From d335cfd8d3e41f40f41f40c280918aa5565a0cb4 Mon Sep 17 00:00:00 2001
From: sayuri <smr17>
Date: Thu, 8 Aug 2019 10:12:28 -0300
Subject: [PATCH] =?UTF-8?q?Thumbnail=20mosaico=20em=20cards=20cole=C3=A7?=
=?UTF-8?q?=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Components/AreasSubPages.js | 6 +++---
src/Components/CollectionCard.js | 26 +++++++++++++++++++++-----
2 files changed, 24 insertions(+), 8 deletions(-)
diff --git a/src/Components/AreasSubPages.js b/src/Components/AreasSubPages.js
index cbcd9578..24997941 100644
--- a/src/Components/AreasSubPages.js
+++ b/src/Components/AreasSubPages.js
@@ -74,13 +74,13 @@ class ReqCollections extends Component{
return(
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
<Row style={{paddingBottom: "5px"}}>
- {row1.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.itens_thumbnail}/></Col>)}
+ {row1.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.items_thumbnails}/></Col>)}
</Row>
<Row>
- {row2.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.itens_thumbnail}/></Col>)}
+ {row2.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.items_thumbnails}/></Col>)}
</Row>
<Row>
- {row3.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.itens_thumbnail}/></Col>)}
+ {row3.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} author={card.owner.name} description={card.description} thumbnail={card.items_thumbnails}/></Col>)}
</Row>
</Carousel>
)
diff --git a/src/Components/CollectionCard.js b/src/Components/CollectionCard.js
index f76b9cb9..14fb0205 100644
--- a/src/Components/CollectionCard.js
+++ b/src/Components/CollectionCard.js
@@ -1,6 +1,7 @@
import React, {Component} from 'react';
import './CardsAnimation.css';
-import {Container} from 'react-grid-system';
+import {apiDomain} from '../env';
+import {Col,Row, Container, Hidden, Visible} from 'react-grid-system';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardActions from '@material-ui/core/CardActions';
@@ -10,6 +11,7 @@ import FolderIcon from '@material-ui/icons/Folder';
import FavoriteIcon from '@material-ui/icons/Favorite';
import StarRatings from 'react-star-ratings';
import algumaCoisa from "../img/laranja/LIVRO_DIGITAL.jpg";
+
var authorStyle={
position: "absolute",
display: "flex",
@@ -29,12 +31,26 @@ var pictureStyle={
height: "50px",
};
+class RenderThumbs extends Component {
+ render(){
+ if (this.props.thumbs) {
+ var array = this.props.thumbs.slice(0,4);
+ return(
+ <div>
+ <Row>
+ {array.map(thumb => <Col style={{padding: "0px"}} md={6}><img key={thumb.id} height="80" src={apiDomain+thumb}/> </Col>)}
+ </Row>
+ </div>
+ );
+ }
+ return(null);
+ }
+}
class CollectionCard extends Component {
- constructor(props) {
+ constructor(props){
super(props);
this.state={
- thumbnail: algumaCoisa,
- userStyle: "animation",
+ userStyle: "animation"
};
}
onHover(){
@@ -47,13 +63,13 @@ class CollectionCard extends Component {
return (
<Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
<Container style={{padding:"0px", backgroundColor: "#673ab7"}}>
+ <RenderThumbs thumbs={this.props.thumbnail}/>
<div style={authorStyle}>
<Typography variant="body2" color="textSecondary" component="p">{this.props.author}</Typography>
<Typography variant="title" color="textSecondary" component="p" >{this.props.name}</Typography>
</div>
<div style={pictureStyle}> fotinha </div>
<div className={this.state.userStyle}>{this.props.author}</div>
- <img src={this.state.thumbnail} alt="thumbnail do recurso"/>
</Container>
<CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}>
--
GitLab