diff --git a/src/Components/AreasSubPages.js b/src/Components/AreasSubPages.js
index 0b1d43a25c67fd7ffa3505a92798bf209219c4b2..b2cb2bb58a94e626761032c572bb8a8c4845eb71 100644
--- a/src/Components/AreasSubPages.js
+++ b/src/Components/AreasSubPages.js
@@ -3,24 +3,14 @@ import axios from 'axios';
import {apiUrl} from '../env';
import './carousel.css';
import {Col,Row, Container, Hidden, Visible} from 'react-grid-system';
-import MediaCard from './Card';
+import ResourceCard from './Card';
+import MaterialCard from './MaterialCard';
+import CollectionCard from './CollectionCard';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
import recursos from "../img/ilustra_recursos_digitais.png";
import materiais from "../img/ilustra_materiais.png";
import colecoes from "../img/ilustra_colecoes.png";
-const rows=(<Col md={3} sm={6}>
-<MediaCard name={"oi"}/>
-</Col>)
-const carrossel=(
- <Row justify="around" style={{paddingBottom: "50px"}} >
- {rows}
- {rows}
- {rows}
- {rows}
- </Row>
-)
-
const areaStyle={
paddingTop: "5px",
fontSize: "16px",
@@ -31,7 +21,7 @@ const areaStyle={
minHeight: "150px"
}
-class ReqCards extends Component{
+class ReqResources extends Component{
constructor(props){
super(props);
this.state = {
@@ -52,19 +42,21 @@ class ReqCards 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}><MediaCard name={card.name} rating={card.score} type={card.object_type} description={card.description}/></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}/></Col>)}
</Row>
<Row>
- {row2.map(card => <Col md={3} sm={6} key={card.id}><MediaCard name={card.name} rating={card.score} type={card.object_type} description={card.description}/></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}/></Col>)}
</Row>
<Row>
- {row3.map(card => <Col md={3} sm={6} key={card.id}><MediaCard name={card.name} rating={card.score} type={card.object_type} description={card.description}/></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}/></Col>)}
</Row>
</Carousel>
)
}
}
+
+
class SubPages extends Component{
areaRender(){
@@ -81,14 +73,14 @@ class SubPages extends Component{
Educação Básica!</p>
</Container>
</div>
- <Container style={{padding:"50px"}}>
+ <Container style={{padding:"20px"}}>
<p style={{paddingBottom:"5px", borderBottom: "1px solid #ff7f00", color: "#ff7f00"}}>
Recursos mais recentes </p>
<Hidden sm xs>
- <ReqCards/>
+ <ReqResources/>
</Hidden>
<Visible sm xs>
- <ReqCards/>
+ <ReqResources/>
</Visible>
</Container>
</React.Fragment>
@@ -105,14 +97,26 @@ class SubPages extends Component{
e educadores renomados nas áreas.</p>
</Container>
</div>
- <Container style={{padding:"50px"}}>
+ <Container style={{padding:"20px"}}>
<p style={{paddingBottom:"5px", borderBottom: "1px solid #e81f4f", color: "#e81f4f"}}>
Materiais mais recentes </p>
- <Carousel showThumbs={false} autoPlay infiniteLoop={true} showStatus={false}>
- {carrossel}
- {carrossel}
- {carrossel}
- </Carousel>
+
+ <Carousel style={{padding: "20px"}}showThumbs={false} infiniteLoop={true} showStatus={false}>
+ <Row>
+ <Col md={3}>
+ <MaterialCard name="oioi" />
+ </Col>
+ <Col md={3}>
+ <MaterialCard name="oioi" />
+ </Col>
+ <Col md={3}>
+ <MaterialCard name="oioi" />
+ </Col>
+ <Col md={3}>
+ <MaterialCard name="oioi" />
+ </Col>
+ </Row>
+ </Carousel>
</Container>
</React.Fragment>
);
@@ -127,13 +131,16 @@ class SubPages extends Component{
recursos educacionais para sua aula!</p>
</Container>
</div>
- <Container style={{padding:"50px"}}>
+ <Container style={{padding:"20px"}}>
<p style={{paddingBottom:"5px", borderBottom: "1px solid #673ab7", color: "#673ab7"}}>
Coleções mais recentes </p>
- <Carousel showThumbs={false} autoPlay infiniteLoop={true} showStatus={false}>
- {carrossel}
- {carrossel}
- {carrossel}
+ <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>
</Container>
</React.Fragment>
diff --git a/src/Components/Card.js b/src/Components/Card.js
index 84b6cb78251597d60cdb5dfd2b466757113a8b40..3014e1c0f7cc6cf3e56bb43da70cc3ef99369be7 100644
--- a/src/Components/Card.js
+++ b/src/Components/Card.js
@@ -6,7 +6,6 @@ import CardActions from '@material-ui/core/CardActions';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import FavoriteIcon from '@material-ui/icons/Favorite';
-import ShareIcon from '@material-ui/icons/Share';
import StarRatings from 'react-star-ratings';
import animacao from "../img/laranja/ANIMACAO_SIMULACAO.jpg";
import apresentacao from "../img/laranja/APRESENTACAO.jpg";
@@ -29,14 +28,14 @@ import Video from '@material-ui/icons/OndemandVideo';
var 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}]
-function RecipeReviewCard(props){
+function ResourceCard(props){
var thumbnail = props.thumbnail;
if (!thumbnail) {
thumbnail = types.find(function(element){ return element.label === props.type});
}
thumbnail = thumbnail.thumb;
var isvideo = false;
-(props.type == "VÃdeo")? isvideo=true : isvideo=false;
+(props.type === "VÃdeo")? isvideo=true : isvideo=false;
return (
<Card>
<img src={thumbnail} alt="thumbnail do recurso"/>
@@ -48,7 +47,7 @@ var isvideo = false;
<Container style={{textAlign: "left"}}>
<StarRatings
rating={props.rating*100}
- starRatedColor="orange"
+ starRatedColor="ff7f00"
starDimension="20px"
starSpacing="2px"
starHoverColor="red"
@@ -73,4 +72,4 @@ var isvideo = false;
);
}
-export default RecipeReviewCard;
+export default ResourceCard;
diff --git a/src/Components/CardOptions.js b/src/Components/CardOptions.js
index ad82e333a4d0248714174ee5308a536ccc6bb9af..ce48018738d9cb6ed75124f96974a2eec0b0bac7 100644
--- a/src/Components/CardOptions.js
+++ b/src/Components/CardOptions.js
@@ -3,7 +3,6 @@ import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import MenuItem from '@material-ui/core/MenuItem';
-import IconButton from '@material-ui/core/IconButton';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import OpenIcon from '@material-ui/icons/OpenInNew';
import DownloadIcon from '@material-ui/icons/CloudDownload';
diff --git a/src/Components/CollectionCard.js b/src/Components/CollectionCard.js
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..3ad4fc9a7e0fe77711bc6829d7f700647afaac2c 100644
--- a/src/Components/CollectionCard.js
+++ b/src/Components/CollectionCard.js
@@ -0,0 +1,43 @@
+import React from 'react';
+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 IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+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";
+function CollectionCard(props){
+var thumbnail = props.thumbnail;
+if (!thumbnail) {
+ thumbnail = algumaCoisa;
+}
+
+ return (
+ <Card>
+ <img src={thumbnail} alt="thumbnail do recurso"/>
+ <CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}>
+ </CardContent>
+ <Container style={{textAlign: "left"}}>
+ <StarRatings
+ rating={props.rating*100}
+ starRatedColor="ff7f00"
+ starDimension="20px"
+ starSpacing="2px"
+ starHoverColor="red"
+ />
+ </Container>
+ <CardActions style={{justifyContent: "space-between"}}>
+ <FolderIcon style={{color:"#673ab7"}}/>
+ <IconButton aria-label="Favoritar" size="small">
+ <FavoriteIcon />
+ </IconButton>
+ </CardActions>
+ </Card>
+ );
+}
+
+export default CollectionCard;
diff --git a/src/Components/MaterialCard.js b/src/Components/MaterialCard.js
new file mode 100644
index 0000000000000000000000000000000000000000..63f74ede9fac35f0eef528b4016462658ec19760
--- /dev/null
+++ b/src/Components/MaterialCard.js
@@ -0,0 +1,52 @@
+import React from 'react';
+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 livro from "../img/laranja/LIVRO_DIGITAL.jpg";
+import Library from '@material-ui/icons/LibraryBooks';
+
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+
+function MaterialCard(props){
+ const [expanded, setExpanded] = React.useState(false);
+
+ const handleChange = panel => (event, isExpanded) => {
+ setExpanded(isExpanded ? panel : false);
+ };
+
+var thumbnail = props.thumbnail;
+if (!thumbnail) {
+ thumbnail = livro;
+}
+return (
+ <Card>
+ <img src={thumbnail} alt="thumbnail do recurso" height="200"/>
+ <CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}>
+ <Typography variant="body2" color="textSecondary" component="p" style={{height:"45px", overflow: "hidden", fontSize: "0.8em"}}>
+ {props.name}
+ </Typography>
+ </CardContent>
+ <CardActions>
+ <Library style={{color:"#e81f4f"}}/><Typography>x Módulos</Typography>
+ </CardActions>
+ <CardActions style={{borderTop:"1px solid #e5e5e5", justifyContent: "space-between"}}>
+ <ExpansionPanel expanded={expanded === 'panel'} onChange={handleChange('panel')}>
+ <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} >
+ <Typography>Ver Módulos</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails>
+ <Typography variant="title">
+ TÃtulo do conteúdo
+ </Typography>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ </CardActions>
+ </Card>
+);
+}
+
+export default MaterialCard;