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

Started to fix AboutPage reposivity 


Signed-off-by: Henrique Varella Ehrenfried's avatarHenrique V. Ehrenfried <hvehrenfried@inf.ufpr.br>
parent 6b5ee202
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/AboutCarousel.css 0 → 100644
+ 6
− 0
View file @ 8acb7f06
#You-Can-Caroussel > .carousel-root > .carousel-slider > button{
display:none;
}
.dot{
border: 1px solid black;
}
\ No newline at end of file
src/Components/AboutCarousel.js
+ 47
− 46
View file @ 8acb7f06
......@@ -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>
);
}
......
src/Components/AboutCarouselPartner.css 0 → 100644
+ 6
− 0
View file @ 8acb7f06
#Partner-Caroussel > .carousel-root > .carousel-slider > button{
display:none;
}
.dot{
border: 1px solid black;
}
\ No newline at end of file
src/Components/AboutCarouselPartner.js 0 → 100644
+ 142
− 0
View file @ 8acb7f06
/*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;
src/Pages/AboutPage.js
+ 18
− 115
View file @ 8acb7f06
......@@ -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>
......
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