Skip to content
Snippets Groups Projects
Commit c8971f4f authored by Henrique Varella Ehrenfried's avatar Henrique Varella Ehrenfried :speech_balloon:
Browse files

Improve home responsivity 


Signed-off-by: Henrique Varella Ehrenfried's avatarHenrique V. Ehrenfried <hvehrenfried@inf.ufpr.br>
parent 134e3ffb
No related branches found
No related tags found
5 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!39Update admin system,!32Homologa,!31Fix console error
Hide whitespace changes
Inline Side-by-side
src/Components/AreasSubPages.js
+ 73
− 115
View file @ c8971f4f
......@@ -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
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment