From 4bcad279f98f2c8f58edb6e582118854c5b8d332 Mon Sep 17 00:00:00 2001
From: sayuri <smr17@inf.ufpr.br>
Date: Fri, 12 Jul 2019 13:48:23 -0300
Subject: [PATCH] =?UTF-8?q?anima=C3=A7=C3=A3o=20correta,=20come=C3=A7o=20d?=
=?UTF-8?q?e=20requisi=C3=A7=C3=A3o=20de=20cole=C3=A7=C3=B5es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Components/AreasSubPages.js | 44 ++++++++++++++++++++++++-------
src/Components/CardsAnimation.css | 11 ++++----
src/Components/CollectionCard.js | 10 ++++---
src/Components/ResourceCard.js | 2 +-
4 files changed, 49 insertions(+), 18 deletions(-)
diff --git a/src/Components/AreasSubPages.js b/src/Components/AreasSubPages.js
index fa80f901..a1417106 100644
--- a/src/Components/AreasSubPages.js
+++ b/src/Components/AreasSubPages.js
@@ -36,7 +36,7 @@ class ReqResources extends Component{
});
}
render(){
- var row1 = this.state.resources.slice(0, 4);
+ var row1 = this.state.resources.slice(0, 4);
var row2 = this.state.resources.slice(4, 8);
var row3 = this.state.resources.slice(8, 13);
return(
@@ -55,6 +55,39 @@ class ReqResources extends Component{
}
}
+class ReqCollections extends Component{
+ constructor(props){
+ super(props);
+ this.state ={
+ collections: [],
+ };
+ }
+ componentDidMount(){
+ axios.get(`${apiUrl}/collections?limit=12&sort=["updated_at", "desc"]`)
+ .then(res=>{this.setState({collections: res.data});
+ console.log(res.data);
+ });
+ }
+ render(){
+ var row1 = this.state.collections.slice(0, 4);
+ var row2 = this.state.collections.slice(4, 8);
+ var row3 = this.state.collections.slice(8, 13);
+ 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}/></Col>)}
+ </Row>
+ <Row>
+ {row2.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} type={card.object_type} description={card.description}/></Col>)}
+ </Row>
+ <Row>
+ {row3.map(card => <Col md={3} sm={6} key={card.id}><CollectionCard name={card.name} rating={card.score} type={card.object_type} description={card.description}/></Col>)}
+ </Row>
+ </Carousel>
+ )
+ }
+}
+
class SubPages extends Component{
@@ -134,14 +167,7 @@ class SubPages extends Component{
<Container style={{padding:"20px"}}>
<p style={{paddingBottom:"5px", borderBottom: "1px solid #673ab7", color: "#673ab7"}}>
Coleções mais recentes </p>
- <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
- <Row>
- <Col md={3}><CollectionCard name="doasi" rating="0"/></Col>
- <Col md={3}><CollectionCard name="dasopijd" rating="0"/></Col>
- <Col md={3}><CollectionCard name="dasopijd" rating="0"/></Col>
- <Col md={3}><CollectionCard name="dasopijd" rating="0"/></Col>
- </Row>
- </Carousel>
+ <ReqCollections/>
</Container>
</React.Fragment>
);
diff --git a/src/Components/CardsAnimation.css b/src/Components/CardsAnimation.css
index aa284c81..b2c60d19 100644
--- a/src/Components/CardsAnimation.css
+++ b/src/Components/CardsAnimation.css
@@ -2,20 +2,21 @@
position: absolute;
display: flex;
background-color: inherit;
- width: 0%;
+ width: 100%;
height: 100%;
+ left: -260px;
padding-top: 20px;
- transition: width 2s;
- visibility: hidden;
- transition-delay: 1s;
+ transition: left 1s;
+ transition-delay: 0.5s;
}
.animationOn{
position: absolute;
display: flex;
+ left: 0px;
background-color: inherit;
width: 100%;
height: 100%;
padding-top: 20px;
- transition: width 2s;
+ transition: left 2s;
}
diff --git a/src/Components/CollectionCard.js b/src/Components/CollectionCard.js
index 9683dd3f..f76b9cb9 100644
--- a/src/Components/CollectionCard.js
+++ b/src/Components/CollectionCard.js
@@ -4,6 +4,7 @@ import {Container} 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';
+import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import FolderIcon from '@material-ui/icons/Folder';
import FavoriteIcon from '@material-ui/icons/Favorite';
@@ -12,7 +13,7 @@ import algumaCoisa from "../img/laranja/LIVRO_DIGITAL.jpg";
var authorStyle={
position: "absolute",
display: "flex",
- backgroundColor: "gray",
+ backgroundColor: "white",
opacity: "0.6",
bottom:"0",
width: "100%",
@@ -46,9 +47,12 @@ class CollectionCard extends Component {
return (
<Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
<Container style={{padding:"0px", backgroundColor: "#673ab7"}}>
- <div style={authorStyle}> Autor Autor <br/> authro</div>
+ <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}>aaaaaaaaaaa</div>
+ <div className={this.state.userStyle}>{this.props.author}</div>
<img src={this.state.thumbnail} alt="thumbnail do recurso"/>
</Container>
diff --git a/src/Components/ResourceCard.js b/src/Components/ResourceCard.js
index 5bbf2fe9..f0837024 100644
--- a/src/Components/ResourceCard.js
+++ b/src/Components/ResourceCard.js
@@ -73,7 +73,7 @@ class ResourceCard extends Component {
starHoverColor="red"
/>
</Container>
- <CardActions style={{justifyContent: "space-between"}}>
+ <CardActions style={{justifyContent: "space-between", padding: "0px"}}>
{ this.props.type ==="VÃdeo"
? <Video style={{color:"#ff7f00"}} />
: <br/>}
--
GitLab