From 8acb7f06a7f17f897d419fccd38ef05959118e2d Mon Sep 17 00:00:00 2001
From: "Henrique V. Ehrenfried" <hvehrenfried@inf.ufpr.br>
Date: Wed, 27 Jan 2021 12:01:23 -0300
Subject: [PATCH] Started to fix AboutPage reposivity
Signed-off-by: Henrique V. Ehrenfried <hvehrenfried@inf.ufpr.br>
---
src/Components/AboutCarousel.css | 6 +
src/Components/AboutCarousel.js | 93 ++++++++--------
src/Components/AboutCarouselPartner.css | 6 +
src/Components/AboutCarouselPartner.js | 142 ++++++++++++++++++++++++
src/Pages/AboutPage.js | 133 +++-------------------
5 files changed, 219 insertions(+), 161 deletions(-)
create mode 100644 src/Components/AboutCarousel.css
create mode 100644 src/Components/AboutCarouselPartner.css
create mode 100644 src/Components/AboutCarouselPartner.js
diff --git a/src/Components/AboutCarousel.css b/src/Components/AboutCarousel.css
new file mode 100644
index 00000000..92e69e00
--- /dev/null
+++ b/src/Components/AboutCarousel.css
@@ -0,0 +1,6 @@
+#You-Can-Caroussel > .carousel-root > .carousel-slider > button{
+ display:none;
+}
+.dot{
+ border: 1px solid black;
+}
\ No newline at end of file
diff --git a/src/Components/AboutCarousel.js b/src/Components/AboutCarousel.js
index 35e68f3a..fc365152 100644
--- a/src/Components/AboutCarousel.js
+++ b/src/Components/AboutCarousel.js
@@ -21,7 +21,7 @@ import React from 'react';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
import styled from 'styled-components';
-
+import "./AboutCarousel.css"
import Img1 from '../img/carousel/Icone_Grande (1).png'
import Img2 from '../img/carousel/Icone_Grande (2).png'
@@ -70,7 +70,7 @@ const CarouselAbout = styled(Carousel)`
text-align: center;
display: block;
margin: auto;
- padding-inline: 235px
+ // padding-inline: 235px
}
}
`
@@ -80,50 +80,51 @@ const CarouselAbout = styled(Carousel)`
function AboutCarousel(props) {
return (
- <CarouselAbout showThumbs= {true}
- showStatus= {false}
- showIndicators = {false}
- interval={8000}
- transitionTime={1000}
- autoPlay
- infiniteLoop
-
- >
- <div>
- <img src={Img1} alt="Slide 1"/>
- <span>Buscar e Baixar Recursos</span>
- <p>São mais de 20 mil recursos educacionais à sua disposição. São recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!</p>
- </div>
- <div>
- <img src={Img2} alt="Slide 2"/>
- <span>Guardar Recursos em Coleções</span>
- <p>Guarde e organize em coleções aqueles recursos que você considera ser interessantes para elaborar a sua aula. Aproveite e indique aos colegas pelas redes sociais ou e-mail.</p>
- </div>
- <div>
- <img src={Img3} alt="Slide 3"/>
-
- <span>Compartilhar suas Experiências</span>
- <p>Você pode relatar suas experiências sobre o uso de recursos no seu cotidiano escolar. Aproveite esse espaço para sugerir e conhecer novos usos para um mesmo recurso.</p>
-
- </div>
- <div>
- <img src={Img4} alt="Slide 4"/>
-
- <span>Publicar o seu Recurso</span>
- <p>Colabore e ajude a fortalecer a plataforma publicando um recurso educacional desenvolvido por você ou pelo coletivo da escola do qual faz parte. Compartilhe seu conhecimento e dê visibilidade ao seu recurso, torne-o público enriquecendo o conhecimento partilhado!</p>
-
-
- </div>
- <div>
- <img src={Img5} alt="Slide 5"/>
-
- <span>Encontrar Materiais de Formação</span>
- <p>A plataforma disponibiliza um conjunto de materiais de formação desenvolvidos pelo Ministério da Educação com diversidade de temas e recursos educacionais.</p>
-
-
- </div>
- </CarouselAbout>
-
+ <div id={"You-Can-Caroussel"}>
+ <CarouselAbout showThumbs= {true}
+ showStatus= {false}
+ showIndicators = {false}
+ interval={8000}
+ transitionTime={1000}
+ autoPlay
+ infiniteLoop
+
+ >
+ <div>
+ <img src={Img1} alt="Slide 1"/>
+ <span>Buscar e Baixar Recursos</span>
+ <p>São mais de 20 mil recursos educacionais à sua disposição. São recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!</p>
+ </div>
+ <div>
+ <img src={Img2} alt="Slide 2"/>
+ <span>Guardar Recursos em Coleções</span>
+ <p>Guarde e organize em coleções aqueles recursos que você considera ser interessantes para elaborar a sua aula. Aproveite e indique aos colegas pelas redes sociais ou e-mail.</p>
+ </div>
+ <div>
+ <img src={Img3} alt="Slide 3"/>
+
+ <span>Compartilhar suas Experiências</span>
+ <p>Você pode relatar suas experiências sobre o uso de recursos no seu cotidiano escolar. Aproveite esse espaço para sugerir e conhecer novos usos para um mesmo recurso.</p>
+
+ </div>
+ <div>
+ <img src={Img4} alt="Slide 4"/>
+
+ <span>Publicar o seu Recurso</span>
+ <p>Colabore e ajude a fortalecer a plataforma publicando um recurso educacional desenvolvido por você ou pelo coletivo da escola do qual faz parte. Compartilhe seu conhecimento e dê visibilidade ao seu recurso, torne-o público enriquecendo o conhecimento partilhado!</p>
+
+
+ </div>
+ <div>
+ <img src={Img5} alt="Slide 5"/>
+
+ <span>Encontrar Materiais de Formação</span>
+ <p>A plataforma disponibiliza um conjunto de materiais de formação desenvolvidos pelo Ministério da Educação com diversidade de temas e recursos educacionais.</p>
+
+
+ </div>
+ </CarouselAbout>
+ </div>
);
}
diff --git a/src/Components/AboutCarouselPartner.css b/src/Components/AboutCarouselPartner.css
new file mode 100644
index 00000000..4ccfbadb
--- /dev/null
+++ b/src/Components/AboutCarouselPartner.css
@@ -0,0 +1,6 @@
+#Partner-Caroussel > .carousel-root > .carousel-slider > button{
+ display:none;
+}
+.dot{
+ border: 1px solid black;
+}
\ No newline at end of file
diff --git a/src/Components/AboutCarouselPartner.js b/src/Components/AboutCarouselPartner.js
new file mode 100644
index 00000000..eb9c9c29
--- /dev/null
+++ b/src/Components/AboutCarouselPartner.js
@@ -0,0 +1,142 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
+
+
+import React from 'react';
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+import { Carousel } from 'react-responsive-carousel';
+import './AboutCarouselPartner.css'
+
+
+import LogoPortalDoProfessor from "../img/logo_parceiros/logo_portaldoprofessor.png";
+import LogoBioe from "../img/logo_parceiros/logo_bioe.png";
+import LogoDominioPublico from "../img/logo_parceiros/logo_dominiopublico.png";
+import LogoTvEscola from "../img/logo_parceiros/logo_tvescola.png";
+import Safer from "../img/logo_parceiros/safer.png";
+import FundacaoLemann from "../img/logo_parceiros/fundacao-lemann.png";
+import InstitutoCrescer from "../img/logo_parceiros/instituto-crescer.png";
+import RedeEscola from "../img/logo_parceiros/redeescola.png";
+import Educagital from "../img/logo_parceiros/educagital.png";
+import EnefAef from "../img/logo_parceiros/ENEF_AEF.png";
+import Impa from "../img/logo_parceiros/impa.png";
+import Futura from "../img/logo_parceiros/futura.png";
+import Impulsiona from "../img/logo_parceiros/impulsiona.png";
+import InstPeninsula from "../img/logo_parceiros/inst-peninsula.png";
+import Telefonica from "../img/logo_parceiros/telefonica.png";
+
+function AboutCarouselPartner(props) {
+
+
+ const itens = [
+ <a href="http://portaldoprofessor.mec.gov.br/index.html" rel="noreferrer" target="_blank">
+ <img src={LogoPortalDoProfessor} alt="LogoPortalDoProfessor"/>
+ </a>,
+ <a href="http://objetoseducacionais2.mec.gov.br/" rel="noreferrer" target="_blank">
+ <img src={LogoBioe} alt="LogoBioe" />
+ </a>,
+ <a href="http://www.dominiopublico.gov.br/pesquisa/PesquisaObraForm.jsp" rel="noreferrer" target="_blank">
+ <img src={LogoDominioPublico} alt="LogoDominioPublico" />
+ </a>,
+ <a href="https://tvescola.org.br/" rel="noreferrer" target="_blank">
+ <img src={LogoTvEscola} alt="LogoTvEscola" />
+ </a>,
+ <a href="http://www.fundacaolemann.org.br/" rel="noreferrer" target="_blank">
+ <img style={{align: "middle"}} src={FundacaoLemann} alt="FundacaoLemann" />
+ </a>,
+ <a href="http://new.safernet.org.br/" rel="noreferrer" target="_blank">
+ <img src={Safer} alt="Safer" />
+ </a>,
+ <a href="http://institutocrescer.org.br/" rel="noreferrer" target="_blank">
+ <img src={InstitutoCrescer} alt="InstitutoCrescer" />
+ </a>,
+ <a href="http://escoladigital.org.br/" rel="noreferrer" target="_blank">
+ <img src={RedeEscola} alt="RedeEscola" />
+ </a>,
+ <a href="http://educadigital.org.br" rel="noreferrer" target="_blank">
+ <img src={Educagital} alt="Educagital" />
+ </a>,
+ <a href="http://www.aefbrasil.org.br" rel="noreferrer" target="_blank">
+ <img style={{filter: "grayscale(1)"}} src={EnefAef} alt="EnefAef" />
+ </a>,
+ <a href="https://impa.br/" rel="noreferrer" target="_blank">
+ <img src={Impa} alt="Impa" />
+ </a>,
+ <a href="http://futura.org.br/" rel="noreferrer" target="_blank">
+ <img src={Futura} alt="Futura" />
+ </a>,
+ <a href="http://impulsiona.org.br/" rel="noreferrer" target="_blank">
+ <img src={Impulsiona} alt="Impulsiona" />
+ </a>,
+ <a href="http://www.institutopeninsula.org.br/" rel="noreferrer" target="_blank">
+ <img src={InstPeninsula} alt="InstPeninsula" />
+ </a>,
+ <a href="http://fundacaotelefonica.org.br/" rel="noreferrer" target="_blank">
+ <img src={Telefonica} alt="Telefonica" />
+ </a>
+ ]
+ const partnerPerPage = (()=> {
+ var pageWidth = window.innerWidth
+ if (pageWidth >= 1200){
+ return 3
+ }
+ else{
+ return 1
+ }
+ })
+ var rows = []
+ var partner_per_page = partnerPerPage()
+ for(let i = 0; i < 15/partner_per_page; i++){
+ rows.push(itens.slice(i*partner_per_page, partner_per_page*(i+1)))
+ }
+
+ return (
+ <div id="Partner-Caroussel">
+ <Carousel showThumbs= {false}
+ showStatus= {false}
+ showIndicators = {true}
+ interval={4500}
+ transitionTime={1000}
+ autoPlay
+ infiniteLoop
+
+ >
+ {
+ rows.map((row, index) => (
+ <div key={(index+1)} style={{display:'inline-flex', paddingTop:100}}>
+ {
+ row.map((partner, index2) => (
+ <div
+ key={index + (index2*10)}
+ style={{marginLeft:10, display: 'flex', maxWidth:300}}
+ >
+ {
+ partner
+ }
+ </div>
+ ))
+ }
+ </div>
+ ))
+ }
+ </Carousel>
+ </div>
+
+ );
+}
+
+export default AboutCarouselPartner;
diff --git a/src/Pages/AboutPage.js b/src/Pages/AboutPage.js
index a69e23ff..a3a45761 100644
--- a/src/Pages/AboutPage.js
+++ b/src/Pages/AboutPage.js
@@ -21,6 +21,8 @@ import Grid from '@material-ui/core/Grid';
import styled from 'styled-components';
import Modal from '../Components/ModalAbout';
import AboutCarousel from "../Components/AboutCarousel";
+import AboutCarouselPartner from '../Components/AboutCarouselPartner';
+
/*Importação de imagens para o componente*/
import Agpl from "../img/sobre/agpl.svg";
@@ -31,21 +33,6 @@ import Alunos from "../img/sobre/Alunos.png";
import Gestores from "../img/sobre/Gestores.png";
import Comunidade from "../img/sobre/comunidade.png";
-import LogoPortalDoProfessor from "../img/logo_parceiros/logo_portaldoprofessor.png";
-import LogoBioe from "../img/logo_parceiros/logo_bioe.png";
-import LogoDominioPublico from "../img/logo_parceiros/logo_dominiopublico.png";
-import LogoTvEscola from "../img/logo_parceiros/logo_tvescola.png";
-import Safer from "../img/logo_parceiros/safer.png";
-import FundacaoLemann from "../img/logo_parceiros/fundacao-lemann.png";
-import InstitutoCrescer from "../img/logo_parceiros/instituto-crescer.png";
-import RedeEscola from "../img/logo_parceiros/redeescola.png";
-import Educagital from "../img/logo_parceiros/educagital.png";
-import EnefAef from "../img/logo_parceiros/ENEF_AEF.png";
-import Impa from "../img/logo_parceiros/impa.png";
-import Futura from "../img/logo_parceiros/futura.png";
-import Impulsiona from "../img/logo_parceiros/impulsiona.png";
-import InstPeninsula from "../img/logo_parceiros/inst-peninsula.png";
-import Telefonica from "../img/logo_parceiros/telefonica.png";
const Secao1 = styled.div`
height: 600px;
@@ -63,7 +50,6 @@ const Secao2 = styled.div`
.container {
height: 100%;
- width: 1140px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
@@ -116,7 +102,6 @@ const Secao3 = styled.div`
.container {
height: 100%;
- width: 1140px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
@@ -184,7 +169,6 @@ const Secao4 = styled.div`
.container {
height: 100%;
- width: 1140px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
@@ -298,7 +282,6 @@ const Secao5 = styled.div`
.container {
height: 100%;
- width: 1140px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
@@ -341,8 +324,7 @@ const Secao6 = styled.div`
.container {
- height: 450px;
- width: 1140px;
+ height: 100%;
padding-top:50px
padding-right: 15px;
padding-left: 15px;
@@ -359,7 +341,7 @@ const Secao6 = styled.div`
.conteudo-secao {
height: 100%;
- width: 970px;
+ width: 100%;
h2 {
text-align: center;
@@ -392,13 +374,12 @@ const Secao6 = styled.div`
`
const Secao7 = styled.div`
- height: 592px;
+ height: 100%;
background-color: #f4f4f4;
.container {
height: 100%;
- width: 1170px;
margin-right: auto;
margin-left: auto;
@@ -408,6 +389,7 @@ const Secao7 = styled.div`
flex-direction: column;
justify-content: center;
color: #666;
+ padding: 50px
.conteudo-secao {
@@ -436,11 +418,11 @@ const Secao7 = styled.div`
.card {
- height: 270px;
+ height: 80%;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- padding: 50px 20px;
+ padding: 40px 20px;
text-align: center;
h3 {
@@ -478,7 +460,6 @@ const Secao8 = styled.div`
.container {
height: 100%;
- width: 1140px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
@@ -579,7 +560,7 @@ export default function AboutPage(props) {
<link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/>
<Secao1>
- <iframe title="VÃdeo página sobre" src="https://player.vimeo.com/video/231609051" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowFullScreen></iframe>
+ <iframe title="VÃdeo página sobre" src="https://player.vimeo.com/video/231609051" width="100%" height="100%" frameBorder="0" allow="autoplay; fullscreen" allowFullScreen></iframe>
</Secao1>
@@ -656,6 +637,8 @@ export default function AboutPage(props) {
</div>
</Secao3>
+
+
<Secao4>
<div className="container">
<div className="container-secao" id="portaisparceiros">
@@ -664,89 +647,9 @@ export default function AboutPage(props) {
<h2>Portais Parceiros</h2>
<p>Aqui na Plataforma você encontra os Recursos Digitais dos principais portais do MEC e de vários outros parceiros.</p>
</div>
- <div className="portais">
- <ul className="itens">
- <li>
- <a href="http://portaldoprofessor.mec.gov.br/index.html" rel="noreferrer" target="_blank">
- <img src={LogoPortalDoProfessor} alt="LogoPortalDoProfessor" />
- </a>
- </li>
- <li>
- <a href="http://objetoseducacionais2.mec.gov.br/" rel="noreferrer" target="_blank">
- <img src={LogoBioe} alt="LogoBioe" />
- </a>
- </li>
- <li>
- <a href="http://www.dominiopublico.gov.br/pesquisa/PesquisaObraForm.jsp" rel="noreferrer" target="_blank">
- <img src={LogoDominioPublico} alt="LogoDominioPublico" />
- </a>
- </li>
- <li>
- <a href="https://tvescola.org.br/" rel="noreferrer" target="_blank">
- <img src={LogoTvEscola} alt="LogoTvEscola" />
- </a>
- </li>
- </ul>
- <ul className="itens">
- <li>
- <a href="http://www.fundacaolemann.org.br/" rel="noreferrer" target="_blank">
- <img style={{align: "middle"}} src={FundacaoLemann} alt="FundacaoLemann" />
- </a>
- </li>
- <li>
- <a href="http://new.safernet.org.br/" rel="noreferrer" target="_blank">
- <img src={Safer} alt="Safer" />
- </a>
- </li>
- <li>
- <a href="http://institutocrescer.org.br/" rel="noreferrer" target="_blank">
- <img src={InstitutoCrescer} alt="InstitutoCrescer" />
- </a>
- </li>
- <li>
- <a href="http://escoladigital.org.br/" rel="noreferrer" target="_blank">
- <img src={RedeEscola} alt="RedeEscola" />
- </a>
- </li>
- <li>
- <a href="http://educadigital.org.br" rel="noreferrer" target="_blank">
- <img src={Educagital} alt="Educagital" />
- </a>
- </li>
- <li>
- <a href="http://www.aefbrasil.org.br" rel="noreferrer" target="_blank">
- <img style={{height:"130px",filter: "grayscale(1)"}} src={EnefAef} alt="EnefAef" />
- </a>
- </li>
- </ul>
- <ul className="itens">
- <li>
- <a href="https://impa.br/" rel="noreferrer" target="_blank">
- <img src={Impa} alt="Impa" />
- </a>
- </li>
- <li>
- <a href="http://futura.org.br/" rel="noreferrer" target="_blank">
- <img src={Futura} alt="Futura" />
- </a>
- </li>
- <li>
- <a href="http://impulsiona.org.br/" rel="noreferrer" target="_blank">
- <img src={Impulsiona} alt="Impulsiona" />
- </a>
- </li>
- <li>
- <a href="http://www.institutopeninsula.org.br/" rel="noreferrer" target="_blank">
- <img src={InstPeninsula} alt="InstPeninsula" />
- </a>
- </li>
- <li>
- <a href="http://fundacaotelefonica.org.br/" rel="noreferrer" target="_blank">
- <img src={Telefonica} alt="Telefonica" />
- </a>
- </li>
- </ul>
- </div>
+
+ <AboutCarouselPartner/>
+
<div>
<h3>Você busca Recursos Educacionais Digitais em outros sites?</h3>
<p>
@@ -807,7 +710,7 @@ export default function AboutPage(props) {
</div>
<div>
<Grid container spacing={3}>
- <Grid item xs={3}>
+ <Grid item xs>
<div className="card">
<img src={Professores} alt="" />
<h3>Professores</h3>
@@ -818,7 +721,7 @@ export default function AboutPage(props) {
</p>
</div>
</Grid>
- <Grid item xs={3}>
+ <Grid item xs>
<div className="card">
<img src={Alunos} alt="" />
<h3>Alunos</h3>
@@ -829,7 +732,7 @@ export default function AboutPage(props) {
</p>
</div>
</Grid>
- <Grid item xs={3}>
+ <Grid item xs>
<div className="card">
<img src={Gestores} alt="" />
<h3>Gestores</h3>
@@ -839,7 +742,7 @@ export default function AboutPage(props) {
</p>
</div>
</Grid>
- <Grid item xs={3}>
+ <Grid item xs>
<div className="card">
<img src={Comunidade} alt="" />
<h3>Comunidade Escolar</h3>
--
GitLab