From c8971f4fdf1af18d8467cfbce66ff10dc536f2ff Mon Sep 17 00:00:00 2001
From: "Henrique V. Ehrenfried" <hvehrenfried@inf.ufpr.br>
Date: Wed, 27 Jan 2021 09:20:02 -0300
Subject: [PATCH] Improve home responsivity
Signed-off-by: Henrique V. Ehrenfried <hvehrenfried@inf.ufpr.br>
---
src/Components/AreasSubPages.js | 188 +++++++++++++-------------------
1 file changed, 73 insertions(+), 115 deletions(-)
diff --git a/src/Components/AreasSubPages.js b/src/Components/AreasSubPages.js
index 7283ffe8..0b7cc763 100644
--- a/src/Components/AreasSubPages.js
+++ b/src/Components/AreasSubPages.js
@@ -27,21 +27,9 @@ 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";
-import Grid from "@material-ui/core/Grid";
import ResourceCardFunction from "./ResourceCardFunction.js";
import CollectionCardFunction from "./CollectionCardFunction.js";
-const areaStyle = {
- paddingTop: "5px",
- fontSize: "16px",
- textAlign: "left",
- backgroundColor: "inherit",
- width: "1000px",
- margin: "auto",
- padding: "20px",
- minHeight: "190px",
-};
-
class ReqResources extends Component {
constructor(props) {
super(props);
@@ -63,7 +51,7 @@ class ReqResources extends Component {
return 3
}
else{
- if (pageWidth > 752) {
+ if (pageWidth > 766) {
return 2
}
else{
@@ -84,10 +72,10 @@ class ReqResources extends Component {
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
{
- rows.map((row) => (
- <Row style={{ paddingBottom: "5px", margin:'0 auto', width:"80%"}}>
+ rows.map((row, index) => (
+ <Row style={{ paddingBottom: "5px", margin:'0 auto', width:"80%"}} key={(index+1)}>
{row.map((card) => (
- <div style={{marginLeft:10, display: 'flex' }}>
+ <div style={{marginLeft:10, display: 'flex' }} key={card.id*(index+1)}>
<ResourceCardFunction
avatar={card.publisher.avatar}
id={card.id}
@@ -128,60 +116,48 @@ class ReqCollections extends Component {
console.log(res.data);
});
}
+ collectionsPerPage(){
+ var pageWidth = window.innerWidth
+ if (pageWidth >= 1200){
+ return 3
+ }
+ else{
+ if (pageWidth > 766) {
+ return 2
+ }
+ else{
+ return 1
+ }
+ }
+ }
+
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);
+ var rows = []
+ var collections_per_page = this.collectionsPerPage()
+ for(let i = 0; i < 12/collections_per_page; i++){
+ rows.push(this.state.collections.slice(i*collections_per_page, collections_per_page*(i+1)))
+ }
return (
<Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
- <Row style={{ paddingBottom: "5px" }}>
- {row1.map((card) => (
- <Col md={3} sm={6} key={card.id}>
- <CollectionCardFunction
- name={card.name}
- rating={card.score}
- id={card.id}
- author={card.owner.name}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner.avatar}
- likeCount={card.likes_count}
- />
- </Col>
- ))}
- </Row>
- <Row>
- {row2.map((card) => (
- <Col md={3} sm={6} key={card.id}>
- <CollectionCardFunction
- name={card.name}
- id={card.id}
- rating={card.score}
- author={card.owner.name}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner.avatar}
- likeCount={card.likes_count}
- />
- </Col>
- ))}
- </Row>
- <Row>
- {row3.map((card) => (
- <Col md={3} sm={6} key={card.id}>
- <CollectionCardFunction
- name={card.name}
- id={card.id}
- rating={card.score}
- author={card.owner.name}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner.avatar}
- likeCount={card.likes_count}
- />
- </Col>
- ))}
- </Row>
+ {
+ rows.map((row, index) => (
+ <Row style={{ paddingBottom: "5px", margin:'0 auto', width:"80%" }} key={(index+1)}>
+ {row.map((card) => (
+ <div style={{marginLeft:10, display: 'flex' }} key={card.id*(index+1)}>
+ <CollectionCardFunction
+ name={card.name}
+ rating={card.score}
+ id={card.id}
+ author={card.owner.name}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner.avatar}
+ likeCount={card.likes_count}
+ />
+ </div>
+ ))}
+ </Row>
+ ))}
</Carousel>
);
}
@@ -193,28 +169,22 @@ class SubPages extends Component {
case "Recursos":
return (
<React.Fragment>
- <div style={{ backgroundColor: "#ff7f00" }}>
- <Container style={areaStyle}>
- <Grid container style={{ display: "flex" }} spacing={5}>
- <Grid item xs={3}>
- <img
- src={recursos}
- alt="aba recursos"
- height="155"
- style={{ float: "right" }}
- />
- </Grid>
- <Grid item xs={9}>
- <p style={{ textAlign: "justify", color: "#fff" }}>
+ <div style={{ backgroundColor: "#ff7f00", position:"relative" }}>
+ <div style={{ textAlign: "justify", color: "#fff", minHeight:195, paddingLeft:10, paddingRight:10, paddingTop:20, paddingBottom:20 }}>
+ <img
+ src={recursos}
+ alt="aba recursos"
+ height="155"
+ style={{ float: "left", marginRight:20, marginBottom:20, marginLeft: window.innerWidth >= 825? "25%" : "0px" }}
+ />
+ <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825? "25%" : "0px"}}>
Nesta área, você tem acesso a Recursos Educacionais
Digitais, isto é, a vÃdeos, animações e a outros recursos
destinados à educação. São Recursos de portais parceiros
do MEC e de professores que, como você, atuam na Educação
Básica!
</p>
- </Grid>
- </Grid>
- </Container>
+ </div>
</div>
<Container style={{ padding: "20px" }}>
<p
@@ -238,28 +208,22 @@ class SubPages extends Component {
case "Materiais":
return (
<React.Fragment>
- <div style={{ backgroundColor: "#e81f4f" }}>
- <Container style={areaStyle}>
- <Grid container spacing={5}>
- <Grid item xs={3}>
- <img
- src={materiais}
- alt="aba materiais"
- height="165"
- style={{ float: "right" }}
- />
- </Grid>
- <Grid item xs={9}>
- <p style={{ textAlign: "justify", color: "#fff" }}>
+ <div style={{ backgroundColor: "#e81f4f", position:"relative" }}>
+ <div style={{ textAlign: "justify", color: "#fff", minHeight:195, paddingLeft:10, paddingRight:10, paddingTop:20, paddingBottom:20 }}>
+ <img
+ src={materiais}
+ alt="aba recursos"
+ height="155"
+ style={{ float: "left", marginRight:20, marginBottom:20, marginLeft: window.innerWidth >= 825? "25%" : "0px" }}
+ />
+ <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825? "25%" : "0px"}}>
Nesta área, você acessa livremente materiais completos de
formação, como cursos já oferecidos pelo MEC e seus
parceiros. São conteúdos elaborados por equipes
multidisciplinares e de autoria de pesquisadores e
educadores renomados nas áreas.
</p>
- </Grid>
- </Grid>
- </Container>
+ </div>
</div>
<Container style={{ padding: "20px" }}>
<p
@@ -299,27 +263,21 @@ class SubPages extends Component {
case "Colecoes":
return (
<React.Fragment>
- <div style={{ backgroundColor: "#673ab7" }}>
- <Container style={areaStyle}>
- <Grid container spacing={5}>
- <Grid item xs={3}>
- <img
- src={colecoes}
- alt="aba coleções"
- width="180"
- style={{ float: "right" }}
- />
- </Grid>
- <Grid item xs={9}>
- <p style={{ textAlign: "justify", color: "#fff" }}>
+ <div style={{ backgroundColor: "#673ab7", position:"relative" }}>
+ <div style={{ textAlign: "justify", color: "#fff", minHeight:195, paddingLeft:10, paddingRight:10, paddingTop:20, paddingBottom:20 }}>
+ <img
+ src={colecoes}
+ alt="aba recursos"
+ height="155"
+ style={{ float: "left", marginRight:20, marginBottom:20, marginLeft: window.innerWidth >= 825? "25%" : "0px" }}
+ />
+ <p style={{ textAlign: "justify", color: "#fff", marginRight: window.innerWidth >= 825? "25%" : "0px"}}>
Nesta área, você tem acesso às coleções criadas e
organizadas pelos usuários da plataforma. É mais uma
possibilidade de buscar recursos educacionais para sua
aula!
</p>
- </Grid>
- </Grid>
- </Container>
+ </div>
</div>
<Container style={{ padding: "20px" }}>
<p
--
GitLab