From 4b113508818e5937d49d778aacb7f6c326033171 Mon Sep 17 00:00:00 2001
From: sayuri <smr17>
Date: Mon, 12 Aug 2019 11:58:14 -0300
Subject: [PATCH] =?UTF-8?q?thumbs=20e=20avatares=20nos=20cards=20(card=20c?=
=?UTF-8?q?ole=C3=A7=C3=B5es=20fica=20errado=20se=20tiver=20menos=20de=203?=
=?UTF-8?q?=20thumbs)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Components/AreasSubPages.js | 21 +++++++++++++++------
src/Components/CardsAnimation.css | 1 +
src/Components/CollectionCard.js | 20 +++++++++++++++++---
src/Components/ResourceCard.js | 19 +++++++++++++++++--
4 files changed, 50 insertions(+), 11 deletions(-)
diff --git a/src/Components/AreasSubPages.js b/src/Components/AreasSubPages.js
index 24997941..96eaec1e 100644
--- a/src/Components/AreasSubPages.js
+++ b/src/Components/AreasSubPages.js
@@ -32,6 +32,7 @@ class ReqResources extends Component{
axios.get(`${apiUrl}/learning_objects?limit=12&sort=["published_at", "desc"]`)
.then(res=> {
this.setState({resources: res.data});
+ console.log(res.data);
});
}
render(){
@@ -41,13 +42,21 @@ class ReqResources 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}><ResourceCard name={card.name} rating={card.score} type={card.object_type} description={card.description} thumbnail={card.thumbnail}/></Col>)}
+ {row1.map(card => <Col md={3} sm={6} key={card.id}>
+ <ResourceCard name={card.name}
+ rating={card.score}
+ type={card.object_type}
+ description={card.description}
+ thumbnail={card.thumbnail}
+ author={card.author}
+ avatar={card.publisher.avatar}
+ /></Col>)}
</Row>
<Row>
- {row2.map(card => <Col md={3} sm={6} key={card.id}><ResourceCard name={card.name} rating={card.score} type={card.object_type} description={card.description} thumbnail={card.thumbnail}/></Col>)}
+ {row2.map(card => <Col md={3} sm={6} key={card.id}><ResourceCard name={card.name} rating={card.score} type={card.object_type} description={card.description} thumbnail={card.thumbnail} author={card.author}/></Col>)}
</Row>
<Row>
- {row3.map(card => <Col md={3} sm={6} key={card.id}><ResourceCard name={card.name} rating={card.score} type={card.object_type} description={card.description} thumbnail={card.thumbnail}/></Col>)}
+ {row3.map(card => <Col md={3} sm={6} key={card.id}><ResourceCard name={card.name} rating={card.score} type={card.object_type} description={card.description} thumbnail={card.thumbnail} author={card.author}/></Col>)}
</Row>
</Carousel>
)
@@ -74,13 +83,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.items_thumbnails}/></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} avatar={card.owner.avatar}/></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.items_thumbnails}/></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} avatar={card.owner.avatar}/></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.items_thumbnails}/></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} avatar={card.owner.avatar}/></Col>)}
</Row>
</Carousel>
)
diff --git a/src/Components/CardsAnimation.css b/src/Components/CardsAnimation.css
index fd96f233..dae1cfa8 100644
--- a/src/Components/CardsAnimation.css
+++ b/src/Components/CardsAnimation.css
@@ -19,6 +19,7 @@
width: 100%;
height: 100%;
padding-top: 20px;
+ padding-left: 10px;
transition: left 2s;
z-index: 1;
}
diff --git a/src/Components/CollectionCard.js b/src/Components/CollectionCard.js
index 66b9cab7..2f9741ee 100644
--- a/src/Components/CollectionCard.js
+++ b/src/Components/CollectionCard.js
@@ -29,8 +29,20 @@ var pictureStyle={
bottom:"23%",
left: "40%",
height: "50px",
+ width: "50px",
};
+const slideStyle={
+ height: "50px",
+ width: "50px",
+ backgroundColor: "white",
+ borderRadius: "50%",
+};
+const publisherStyle={
+ color: "white",
+ paddinLeft: "20px",
+ fontSize: "15px"
+};
class RenderThumbs extends Component {
render(){
if (this.props.thumbs) {
@@ -61,13 +73,15 @@ class CollectionCard extends Component {
return (
<Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
<Container style={{padding:"0px", backgroundColor: "#673ab7"}}>
- <div className={this.state.userStyle}>{this.props.author}</div>
+ <div className={this.state.userStyle}>
+ <img style={slideStyle} src={apiDomain+this.props.avatar}/>
+ <div style={publisherStyle}>Enviado por: <br/>{this.props.author}</div>
+ </div>
<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>
+ <img style={pictureStyle} src={apiDomain+this.props.avatar}/>
</Container>
<CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}>
diff --git a/src/Components/ResourceCard.js b/src/Components/ResourceCard.js
index 403fef90..0ca8a28e 100644
--- a/src/Components/ResourceCard.js
+++ b/src/Components/ResourceCard.js
@@ -30,6 +30,18 @@ import Video from '@material-ui/icons/OndemandVideo';
const types = [{label: "Animação", thumb: animacao}, {label: "Apresentação", thumb: apresentacao},
{label: "Aplicativo" , thumb: aplicativo}, {label: "Ãudio", thumb: audio}, {label: "Vazio", thumb: vazio}, {label: "Imagem", thumb: imagem}, {label: "Gráfico", thumb: grafico}, {label: "Jogo", thumb: jogo}, {label: "Livro", thumb: livro}, {label: "Mapa", thumb: mapa}, {label: "Outros", thumb: outros}, {label: "Software", thumb:software}, {label: "Texto", thumb:texto}, {label: "VÃdeo", thumb:video}]
+const slideStyle={
+ height: "50px",
+ width: "50px",
+ backgroundColor: "white",
+ borderRadius: "50%",
+};
+const publisherStyle={
+ color: "white",
+ paddinLeft: "20px",
+ fontSize: "15px"
+
+};
class ResourceCard extends Component {
constructor(props) {
@@ -60,8 +72,11 @@ class ResourceCard extends Component {
return (
<Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
<Container style={{padding:"0px", height:"175px", backgroundColor: "#ff7f00"}}>
- <div className={this.state.userStyle}>aaaaaaaaaaa</div>
- <img src={this.state.thumbnail} style={{height:"100%"}}alt="thumbnail do recurso"/>
+ <div className={this.state.userStyle}>
+ <img style={slideStyle} src={apiDomain+this.props.avatar}/>
+ <div style={publisherStyle}>Enviado por: <br/>{this.props.author}</div>
+ </div>
+ <img src={this.state.thumbnail} style={{height:"100%"}}alt="thumbnail do recurso"/>
</Container>
<CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}>
<Typography variant="body2" color="textSecondary" component="p" style={{height:"45px", overflow: "hidden", fontSize: "0.8em"}}>
--
GitLab