introdução dos cards materiais e coleções

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>

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;

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';

src/Components/CollectionCard.js

+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;

src/Components/MaterialCard.js

+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;