From 28459f13fb423e93ac1554b2a14b43e07ba34b9b Mon Sep 17 00:00:00 2001 From: Luis Felipe Risch <lfr20@inf.ufpr.br> Date: Thu, 13 May 2021 10:25:45 -0300 Subject: [PATCH] fixed anchor bug and added a logic to scroll to the top when user enters in some tab of the help or about --- src/Components/EcFooter.js | 64 +++++---- src/Components/HomeScreenSearchBar.js | 180 +++++++++++++------------- src/Pages/AboutPage.js | 105 ++++++++------- src/Pages/Contact.js | 7 +- src/Pages/HelpCenter.js | 94 +++++++------- src/Pages/TabsHelp/TabManageAc.js | 52 ++++---- src/Pages/TabsHelp/TabNetPart.js | 72 +++++------ src/Pages/TabsHelp/TabResourseFind.js | 71 +++++----- src/Pages/TabsHelp/TabResoursePub.js | 76 +++++------ src/Pages/UserTerms.js | 175 +++++++++++++------------ src/env.js | 2 +- 11 files changed, 456 insertions(+), 442 deletions(-) diff --git a/src/Components/EcFooter.js b/src/Components/EcFooter.js index 2bdf8a2f..eca582f2 100644 --- a/src/Components/EcFooter.js +++ b/src/Components/EcFooter.js @@ -16,11 +16,11 @@ 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, {Component} from 'react'; -import {Row, Col, Container} from 'react-grid-system'; +import React, { Component } from 'react'; +import { Row, Col, Container } from 'react-grid-system'; import eduConectada from '../img/educa-conectada.png'; import styled from 'styled-components'; -import {Link} from 'react-router-dom' +import { HashLink as Link } from 'react-router-hash-link'; const BlueFooter = styled.div` background-color : #00bcd4; @@ -30,12 +30,10 @@ const BlueFooter = styled.div` @media screen and (min-width : 502px) { padding-bottom : 2em; } - - vertical-align: bottom; ` -const listStyle={ +const listStyle = { listStyleType: "none", fontSize: "80%", padding: "0", @@ -46,35 +44,35 @@ const WhiteLink = styled(Link)` color: white; ` -class EcFooter extends Component{ - render(){ - return( +class EcFooter extends Component { + render() { + return ( <BlueFooter> <Container> - <Row> - <Col md={4} sm={6} xs={6} style={window.innerWidth < 502 && {textAlign : "center"} }> - <h4>Sobre</h4> - <ul style={listStyle}> - <li> <WhiteLink to="/sobre">Sobre a Plataforma</WhiteLink> </li> - <li> <WhiteLink to="/sobre#portaisparceiros">Portais Parceiros</WhiteLink> </li> - <li> <WhiteLink to="/termos">Termos de Uso</WhiteLink> </li> - <li> <WhiteLink to="/contato">Contato</WhiteLink> </li> - </ul> - </Col> - <Col md={4} sm={6} xs={6} style={window.innerWidth < 502 && {textAlign : "center"} }> - <h4>Ajuda</h4> - <ul style={listStyle}> - <li> <WhiteLink to="/ajuda">Central de Ajuda</WhiteLink> </li> - <li> <WhiteLink to="/publicando-recurso">Publicando Recursos</WhiteLink> </li> - <li> <WhiteLink to="/encontrando-recurso">Encontrando Recursos</WhiteLink> </li> - <li> <WhiteLink to="/participando-da-rede">Participando da Rede</WhiteLink> </li> - <li> <WhiteLink to="/gerenciando-conta">Gerenciando a Conta</WhiteLink> </li> - </ul> - </Col> - <Col md={4} sm={12} xs={12} style={window.innerWidth < 502 && {textAlign : "center"} }> - <img src={eduConectada} height="50%" alt="logo educação conectada"/> - </Col> - </Row> + <Row> + <Col md={4} sm={6} xs={6} style={window.innerWidth < 502 && { textAlign: "center" }}> + <h4>Sobre</h4> + <ul style={listStyle}> + <li> <WhiteLink to="/sobre">Sobre a Plataforma</WhiteLink> </li> + <li> <WhiteLink to="/sobre#portaisparceiros">Portais Parceiros</WhiteLink> </li> + <li> <WhiteLink to="/termos">Termos de Uso</WhiteLink> </li> + <li> <WhiteLink to="/contato">Contato</WhiteLink> </li> + </ul> + </Col> + <Col md={4} sm={6} xs={6} style={window.innerWidth < 502 && { textAlign: "center" }}> + <h4>Ajuda</h4> + <ul style={listStyle}> + <li> <WhiteLink to="/ajuda">Central de Ajuda</WhiteLink> </li> + <li> <WhiteLink to="/publicando-recurso">Publicando Recursos</WhiteLink> </li> + <li> <WhiteLink to="/encontrando-recurso">Encontrando Recursos</WhiteLink> </li> + <li> <WhiteLink to="/participando-da-rede">Participando da Rede</WhiteLink> </li> + <li> <WhiteLink to="/gerenciando-conta">Gerenciando a Conta</WhiteLink> </li> + </ul> + </Col> + <Col md={4} sm={12} xs={12} style={window.innerWidth < 502 && { textAlign: "center" }}> + <img src={eduConectada} height="50%" alt="logo educação conectada" /> + </Col> + </Row> </Container> </BlueFooter> ) diff --git a/src/Components/HomeScreenSearchBar.js b/src/Components/HomeScreenSearchBar.js index 4427eb29..ef12b7cc 100644 --- a/src/Components/HomeScreenSearchBar.js +++ b/src/Components/HomeScreenSearchBar.js @@ -27,55 +27,55 @@ import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; import SearchIcon from '@material-ui/icons/Search'; /*import {Link} from 'react-router-dom'*/ -export default function HomeScreenSearchBar (props) { - const [ query, setQuery ] = useState("") - const [ searchClass, setSearchClass ] = useState('LearningObject') +export default function HomeScreenSearchBar(props) { + const [query, setQuery] = useState("") + const [searchClass, setSearchClass] = useState('LearningObject') const { state, dispatch } = useContext(Store) - const [ goSearch, setGoSearch ] = useState(false) - - useEffect(()=>{ - if(window.location.pathname.includes('busca')){ - const urlParams = new URLSearchParams(window.location.search) - const urlQuery = urlParams.get('query') - const urlSearchClass = urlParams.get('search_class') - if( searchClass !== urlSearchClass || query !== urlQuery){ - setQuery(urlQuery) - setSearchClass(urlSearchClass) - } + const [goSearch, setGoSearch] = useState(false) + + useEffect(() => { + if (window.location.pathname.includes('busca')) { + const urlParams = new URLSearchParams(window.location.search) + const urlQuery = urlParams.get('query') + const urlSearchClass = urlParams.get('search_class') + if (searchClass !== urlSearchClass || query !== urlQuery) { + setQuery(urlQuery) + setSearchClass(urlSearchClass) + } } - },[]) + }, []) - useEffect(()=>setGoSearch(false),[goSearch]) + useEffect(() => setGoSearch(false), [goSearch]) - const handleChange = ( event ) => { - setQuery(event.target.value) + const handleChange = (event) => { + setQuery(event.target.value) } const handleKeyDown = (event) => { - if(event.key === 'Enter' || event.type === 'click'){ - dispatch({ - type: 'SAVE_SEARCH', - newSearch: { - query: query !== '' ? query: '*', - class: searchClass - } - }) - setGoSearch(true) - } + if (event.key === 'Enter' || event.type === 'click') { + dispatch({ + type: 'SAVE_SEARCH', + newSearch: { + query: query !== '' ? query : '*', + class: searchClass + } + }) + setGoSearch(true) + } } const options = [ - {text : "Recursos", value : "LearningObject", color : "#ff7f00"}, - {text : "Coleções", value : "Collection", color : "#673ab7"}, - {text : "Usuários", value : "User", color : "#00bcd4"}, + { text: "Recursos", value: "LearningObject", color: "#ff7f00" }, + { text: "Coleções", value: "Collection", color: "#673ab7" }, + { text: "Usuários", value: "User", color: "#00bcd4" }, ] const [anchorEl, setAnchorEl] = React.useState(null); const [selectedIndex, setSelectedIndex] = React.useState(0); const handleClickListItem = (event) => { - setAnchorEl(event.currentTarget); + setAnchorEl(event.currentTarget); }; const handleMenuItemClick = (event, index, value) => { @@ -93,69 +93,69 @@ export default function HomeScreenSearchBar (props) { return ( - <StyledGrid container> - {goSearch && <Redirect to={`/busca?query=${state.search.query}&search_class=${state.search.class}`} />} - <Grid item md={7} xs={12} className="first white"> - <StyledTextField - id="standard-search" - placeholder="O que está buscando?" - type="search" - margin="normal" - value={query} - onChange={handleChange} - onKeyPress={handleKeyDown} - fullwidth + <StyledGrid container> + {goSearch && <Redirect to={`/busca?query=${state.search.query}&search_class=${state.search.class}`} />} + <Grid item md={7} xs={12} className="first white"> + <StyledTextField + id="standard-search" + placeholder="O que está buscando?" + type="search" + margin="normal" + value={query} + onChange={handleChange} + onKeyPress={handleKeyDown} + fullwidth + /> + </Grid> + <Grid item md={3} xs={12} className="second white"> + <List component="nav" aria-label="Recurso"> + <ListItem + button + aria-haspopup="true" + aria-controls="lock-menu" + aria-label="Recurso" + onClick={handleClickListItem} + > + <ListItemText + style={{ color: options[selectedIndex].color }} + primary={options[selectedIndex].text} /> - </Grid> - <Grid item md={3} xs={12} className="second white"> - <List component="nav" aria-label="Recurso"> - <ListItem - button - aria-haspopup="true" - aria-controls="lock-menu" - aria-label="Recurso" - onClick={handleClickListItem} - > - <ListItemText - style={{color : options[selectedIndex].color}} - primary={options[selectedIndex].text} - /> - <ListItemIcon> - <ArrowDropDownIcon/> - </ListItemIcon> - </ListItem> - </List> - <Menu - id="simple-menu" - anchorEl={anchorEl} - keepMounted - open={Boolean(anchorEl)} - onClose={handleClose} - > - {options.map((option, index) => ( - <MenuItem + <ListItemIcon> + <ArrowDropDownIcon /> + </ListItemIcon> + </ListItem> + </List> + <Menu + id="simple-menu" + anchorEl={anchorEl} + keepMounted + open={Boolean(anchorEl)} + onClose={handleClose} + > + {options.map((option, index) => ( + <MenuItem key={option.value} selected={index === selectedIndex} onClick={(event) => handleMenuItemClick(event, index, option.value)} - style={{color : option.color}} - > + style={{ color: option.color }} + > {option.text} - </MenuItem> - ))} - </Menu> - </Grid> - <Grid item md={2} xs={12}> - <div style={{height : "100%"}}> - <Button onClick={handleKeyDown} className="custom-button" style={{backgroundColor : options[selectedIndex].color, color : "#fff"}}> - { - WIDTH < 503 && - <span>Buscar</span> - } - <SearchIcon fontSize="large"/> - </Button> - </div> - </Grid> - </StyledGrid> + </MenuItem> + ))} + </Menu> + </Grid> + <Grid item md={2} xs={12}> + <div style={{ height: "100%" }}> + <Button onClick={handleKeyDown} className="custom-button" style={{ backgroundColor: options[selectedIndex].color, color: "#fff" }}> + { + WIDTH < 503 && + <span>Buscar</span> + } + <SearchIcon fontSize="large" /> + </Button> + </div> + </Grid> + </StyledGrid> ) } diff --git a/src/Pages/AboutPage.js b/src/Pages/AboutPage.js index 56b84041..98fdfd05 100644 --- a/src/Pages/AboutPage.js +++ b/src/Pages/AboutPage.js @@ -16,7 +16,7 @@ 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, { useEffect } from 'react'; import Grid from '@material-ui/core/Grid'; import styled from 'styled-components'; import Modal from '../Components/ModalAbout'; @@ -551,26 +551,31 @@ const Secao8 = styled.div` export default function AboutPage(props) { var pageWidth = window.innerWidth - const calculateMargin = ((pageWidth)=>{ - if (pageWidth > 700 && pageWidth <= 850){ + const calculateMargin = ((pageWidth) => { + if (pageWidth > 700 && pageWidth <= 850) { return "40%" } - if (pageWidth > 850 && pageWidth <= 900){ + if (pageWidth > 850 && pageWidth <= 900) { return "25%" } - if (pageWidth > 900 && pageWidth < 1100){ + if (pageWidth > 900 && pageWidth < 1100) { return "13%" } - else{ + else { return "0%" } }) var marginSet = calculateMargin(pageWidth) - const styleIMGSec3 = {float:"right", width:"80%", maxWidth:475, marginRight:30, marginTop: marginSet} + const styleIMGSec3 = { float: "right", width: "80%", maxWidth: 475, marginRight: 30, marginTop: marginSet } + + useEffect(() => { + window.scrollTo(0, 0) + }, []) + return ( <> - <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/> + <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> @@ -582,7 +587,7 @@ export default function AboutPage(props) { <div className="container-secao"> <div className="conteudo-secao"> <h2>Um Pouco da História</h2> - <p style={{marginLeft:20, marginRight:20, marginBottom:40}}> + <p style={{ marginLeft: 20, marginRight: 20, marginBottom: 40 }}> A partir de uma iniciativa do Ministério da Educação, surge em outubro de 2015 a proposta de reunir e disponibilizar, em um único lugar, os Recursos Educacionais Digitais dos principais @@ -592,13 +597,13 @@ export default function AboutPage(props) { da Educação Básica de todo o Brasil. Assim, a Plataforma MEC pretende se tornar uma referência em Recursos Educacionais Digitais, como um ambiente de busca, interação e colaboração - entre professoras(es)!<br/><br/>Faça parte deste espaço de + entre professoras(es)!<br /><br />Faça parte deste espaço de colaborativo você também! </p> <img src={Agpl} alt="agpl" /> <p> Este programa é software livre, sob os termos da - <a href="https://www.gnu.org/licenses/agpl-3.0.en.html" rel="noreferrer" target="_blank"> licença GNU/AGPL</a><br/> + <a href="https://www.gnu.org/licenses/agpl-3.0.en.html" rel="noreferrer" target="_blank"> licença GNU/AGPL</a><br /> Seu código fonte está disponÃvel no <a href="https://gitlab.c3sl.ufpr.br/portalmec/portalmec" rel="noreferrer" target="_blank">GitLab</a> </p> @@ -613,7 +618,7 @@ export default function AboutPage(props) { <div className="container-secao"> <div className="conteudo-secao"> <Grid container spacing={0}> - <Grid item xs style={{paddingRight:20}}> + <Grid item xs style={{ paddingRight: 20 }}> <h2>O que nos faz diferentes?</h2> <h3>Espaço construÃdo por e para professores</h3> <p> @@ -630,19 +635,19 @@ export default function AboutPage(props) { </p> <h3>Todos os recursos em um só lugar</h3> <p> - Aqui você consegue otimizar o seu tempo! A plataforma integra - os Recursos Educacionais Digitais dos principais portais abertos. + Aqui você consegue otimizar o seu tempo! A plataforma integra + os Recursos Educacionais Digitais dos principais portais abertos. </p> </Grid> { - pageWidth >= 751? - <Grid item xs={6} style={{position:"relative"}}> - <img src={Notebook} alt="Imagem Notebook" style={styleIMGSec3}/> - </Grid> - : - <div/> + pageWidth >= 751 ? + <Grid item xs={6} style={{ position: "relative" }}> + <img src={Notebook} alt="Imagem Notebook" style={styleIMGSec3} /> + </Grid> + : + <div /> } - + </Grid> @@ -651,10 +656,10 @@ export default function AboutPage(props) { </div> </Secao3> - - + + <Secao4> - <div className="container"> + <div className="container"> <div className="container-secao" id="portaisparceiros"> <div className="conteudo-secao" > <div> @@ -662,18 +667,18 @@ export default function AboutPage(props) { <p>Aqui na Plataforma você encontra os Recursos Digitais dos principais portais do MEC e de vários outros parceiros.</p> </div> - <AboutCarouselPartner/> - + <AboutCarouselPartner /> + <div> <h3>Você busca Recursos Educacionais Digitais em outros sites?</h3> <p> - Você gostaria que a plataforma tivesse os recursos do site que - você acessa?<br/>Deixe a sua sugestão pra que juntos possamos + Você gostaria que a plataforma tivesse os recursos do site que + você acessa?<br />Deixe a sua sugestão pra que juntos possamos avançar na integração dos mais variados recursos. </p> </div> - <div style={{marginTop:"30px"}}> - <Modal/> + <div style={{ marginTop: "30px" }}> + <Modal /> </div> </div> @@ -686,7 +691,7 @@ export default function AboutPage(props) { <div className="container-secao"> <div className="conteudo-secao"> <h2>AQUI VOCÊ É PROTAGONISTA</h2> - <br/> + <br /> <p> Construa conosco a plataforma e amplie sua rede de conhecimento interagindo com pessoas envolvidas com experiências que ocorrem em todo o Brasil! @@ -697,20 +702,20 @@ export default function AboutPage(props) { </Secao5> <Secao6> - <div className="container"> - <div className="container-secao"> - <div className="conteudo-secao"> - <div> - <h2>Aqui você pode:</h2> + <div className="container"> + <div className="container-secao"> + <div className="conteudo-secao"> + <div> + <h2>Aqui você pode:</h2> - </div> - <div> - <AboutCarousel/> - </div> + </div> + <div> + <AboutCarousel /> + </div> + </div> </div> </div> - </div> </Secao6> <Secao7> @@ -720,7 +725,7 @@ export default function AboutPage(props) { <div className="cabecalho"> <h2>A quem se destina?</h2> <p>A plataforma é aberta e destina-se a todos e todas que se - interessam<br/>pela relação entre a escola e a Cultura Digital:</p> + interessam<br />pela relação entre a escola e a Cultura Digital:</p> </div> <div> <Grid container spacing={3}> @@ -776,18 +781,18 @@ export default function AboutPage(props) { </Secao7> <Secao8> - <div className="container"> - <div className="container-secao"> - <div className="conteudo-secao"> + <div className="container"> + <div className="container-secao"> + <div className="conteudo-secao"> - <h2>Ficou alguma dúvida? Gostaria de fazer alguma sugestão ou crÃtica? Construa conosco.</h2> - <div> - <button><a href="contato">ENTRAR EM CONTATO</a></button> - </div> + <h2>Ficou alguma dúvida? Gostaria de fazer alguma sugestão ou crÃtica? Construa conosco.</h2> + <div> + <button><a href="contato">ENTRAR EM CONTATO</a></button> + </div> + </div> </div> </div> - </div> </Secao8> </> ); diff --git a/src/Pages/Contact.js b/src/Pages/Contact.js index cf2b6458..181e16d4 100644 --- a/src/Pages/Contact.js +++ b/src/Pages/Contact.js @@ -16,7 +16,7 @@ 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, { useEffect } from "react"; import styled from "styled-components"; import Banner1 from "../img/banner-sobre.jpg"; import InputFormulario from "../Components/ContactForm.js"; @@ -137,6 +137,11 @@ const Formulario = styled.div` `; function Contact(props) { + + useEffect(() => { + window.scrollTo(0, 0) + }) + return ( <> <link diff --git a/src/Pages/HelpCenter.js b/src/Pages/HelpCenter.js index f70481b0..8b5ae509 100644 --- a/src/Pages/HelpCenter.js +++ b/src/Pages/HelpCenter.js @@ -16,10 +16,10 @@ 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, { useEffect } from 'react'; import styled from 'styled-components'; import Grid from '@material-ui/core/Grid'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom'; @@ -36,20 +36,22 @@ import CardGerenciando from '../Components/HelpCenter/Cards/CardGerenciando'; function HelpCenter(props) { let windowWidth = window.innerWidth - return( - <div style={{backgroundColor: "#f4f4f4"}}> - <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:300,400&display=swap" rel="stylesheet"/> + useEffect(() => { window.scrollTo(0, 0) }, []) + + return ( + <div style={{ backgroundColor: "#f4f4f4" }}> + <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:300,400&display=swap" rel="stylesheet" /> <Secao1> - <div className= "container"> + <div className="container"> { - windowWidth > 420? - <img src={Banner3} alt="banner3"/> - : - <div/> + windowWidth > 420 ? + <img src={Banner3} alt="banner3" /> + : + <div /> } - <div className= "conteudo"> - <div className= "title"> + <div className="conteudo"> + <div className="title"> <h2>OLÃ! COMO PODEMOS AJUDAR?</h2> </div> </div> @@ -64,18 +66,18 @@ function HelpCenter(props) { <h2>Tópicos de Ajuda</h2> </div> <div> - <Grid container justify="center" style={{margin:-8}}> - <Grid item xs={12} md={5} style={{padding:8}}> - <CardPublicando/> + <Grid container justify="center" style={{ margin: -8 }}> + <Grid item xs={12} md={5} style={{ padding: 8 }}> + <CardPublicando /> </Grid> - <Grid item xs={12} md={5} style={{padding:8}}> - <CardEncontrando/> + <Grid item xs={12} md={5} style={{ padding: 8 }}> + <CardEncontrando /> </Grid> - <Grid item xs={12} md={5} style={{padding:8}}> - <CardParticipando/> + <Grid item xs={12} md={5} style={{ padding: 8 }}> + <CardParticipando /> </Grid> - <Grid item xs={12} md={5} style={{padding:8}}> - <CardGerenciando/> + <Grid item xs={12} md={5} style={{ padding: 8 }}> + <CardGerenciando /> </Grid> </Grid> </div> @@ -84,10 +86,10 @@ function HelpCenter(props) { </div> </Secao2> - <div style={{width:"100%"}}> - <Secao3> - <Grid style={{height:"100%"}} container justify="center"> - <Grid style={{backgroundColor: "#333",paddingInline:"0" }} item xs={12} md={6}> + <div style={{ width: "100%" }}> + <Secao3> + <Grid style={{ height: "100%" }} container justify="center"> + <Grid style={{ backgroundColor: "#333", paddingInline: "0" }} item xs={12} md={6}> <iframe title="VÃdeo página ajuda" src="https://player.vimeo.com/video/231609051" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> </Grid> <Grid item xs={12} md={6}> @@ -102,39 +104,39 @@ function HelpCenter(props) { <Grid container> <Grid item xs={12} md={6}> <p className="links"> - <br/> + <br /> <Link to={{ - pathname : 'plataforma-mec', - state : {value : '0'} + pathname: 'plataforma-mec', + state: { value: '0' } }}>O que é a Plataforma MEC</Link> - <br/> + <br /> <Link to={{ - pathname : 'plataforma-mec', - state : {value : '1'} - }}>Como foi construida a Plataforma<br/>MEC?</Link> - <br/> + pathname: 'plataforma-mec', + state: { value: '1' } + }}>Como foi construida a Plataforma<br />MEC?</Link> + <br /> <Link to={{ - pathname : 'plataforma-mec', - state : {value : '3'} + pathname: 'plataforma-mec', + state: { value: '3' } }}>Quais são os Portais Parceiros?</Link> </p> </Grid> <Grid item xs={12} md={6}> <p className="links"> - <br/> + <br /> <Link to={{ - pathname : 'plataforma-mec', - state : {value : '2'} + pathname: 'plataforma-mec', + state: { value: '2' } }}>Entendendo as 3 áreas</Link> - <br/> + <br /> <Link to={{ - pathname : 'plataforma-mec', - state : {value : '4'} + pathname: 'plataforma-mec', + state: { value: '4' } }}>Tipos de recursos</Link> - <br/> + <br /> <Link to={{ - pathname : 'plataforma-mec', - state : {value : '5'} + pathname: 'plataforma-mec', + state: { value: '5' } }}>Softwares especÃficos</Link> </p> </Grid> @@ -150,8 +152,8 @@ function HelpCenter(props) { <div className="conteudo"> <h2>Não encontrou o que você precisa?</h2> <span>Entre em contato com a nossa Central de Ajuda</span> - <br/> - <button style={{marginBottom:50, marginTop:20}}><a href="contato">ENTRAR EM CONTATO</a></button> + <br /> + <button style={{ marginBottom: 50, marginTop: 20 }}><a href="contato">ENTRAR EM CONTATO</a></button> </div> </div> diff --git a/src/Pages/TabsHelp/TabManageAc.js b/src/Pages/TabsHelp/TabManageAc.js index 9aa293b3..a8280274 100644 --- a/src/Pages/TabsHelp/TabManageAc.js +++ b/src/Pages/TabsHelp/TabManageAc.js @@ -16,7 +16,7 @@ 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, { useState } from "react"; +import React, { useState, useEffect } from "react"; import styled from "styled-components"; import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; @@ -49,6 +49,8 @@ export default function TabManageAc(props) { setTabValue(newValue); }; + useEffect(() => { window.scrollTo(0, 0) }, []) + return ( <div style={{ backgroundColor: "#f4f4f4" }}> <link @@ -73,19 +75,19 @@ export default function TabManageAc(props) { <img src={GerenciandoConta} alt="Gerenciando a conta" /> <span>{tabs[5]}</span> </div> - <TabsStyled orientation = "vertical" - variant = "scrollable" - value = {tabValue} - onChange = {handleChangeTab} - TabIndicatorProps = {{style:{display: "none"}}} + <TabsStyled orientation="vertical" + variant="scrollable" + value={tabValue} + onChange={handleChangeTab} + TabIndicatorProps={{ style: { display: "none" } }} > - <TabStyled label={tabs[0]}></TabStyled> - <TabStyled label={tabs[1]}></TabStyled> - <TabStyled label={tabs[2]}></TabStyled> - <TabStyled label={tabs[3]}></TabStyled> - <TabStyled label={tabs[4]}></TabStyled> + <TabStyled label={tabs[0]}></TabStyled> + <TabStyled label={tabs[1]}></TabStyled> + <TabStyled label={tabs[2]}></TabStyled> + <TabStyled label={tabs[3]}></TabStyled> + <TabStyled label={tabs[4]}></TabStyled> </TabsStyled> - <br/> + <br /> <div className="voltarInicio"> <a href="ajuda">VOLTAR AO ÃNICIO</a> </div> @@ -104,21 +106,21 @@ export default function TabManageAc(props) { </div> </Principal> - </Grid> - </Grid> + </Grid> + </Grid> + - <Grid style={{ marginBottom: "50px" }} container justify={"center"}> - <Grid item xs={12} md={3} style={{margin:5}}> - <CardPublicando /> - </Grid> - <Grid item xs={12} md={3} style={{margin:5}}> - <CardEncontrando /> - </Grid> - <Grid item xs={12} md={3} style={{margin:5}}> - <CardParticipando /> - </Grid> - </Grid> + <Grid item xs={12} md={3} style={{ margin: 5 }}> + <CardPublicando /> + </Grid> + <Grid item xs={12} md={3} style={{ margin: 5 }}> + <CardEncontrando /> + </Grid> + <Grid item xs={12} md={3} style={{ margin: 5 }}> + <CardParticipando /> + </Grid> + </Grid> </Secao> </div> ); diff --git a/src/Pages/TabsHelp/TabNetPart.js b/src/Pages/TabsHelp/TabNetPart.js index 107a998b..c08e3ea1 100644 --- a/src/Pages/TabsHelp/TabNetPart.js +++ b/src/Pages/TabsHelp/TabNetPart.js @@ -16,7 +16,7 @@ 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, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import Tabs from '@material-ui/core/Tabs' import Tab from '@material-ui/core/Tab'; @@ -28,7 +28,7 @@ import What from '../../Components/HelpCenter/TabsNetPart/What' import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando'; import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando'; import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom'; @@ -36,25 +36,25 @@ import { Link } from 'react-router-dom'; -export default function TabNetPart (props) { - const tabs= [ +export default function TabNetPart(props) { + const tabs = [ 'Como comentar ou avaliar um recurso?', 'Que tipo de comentário posso fazer sobre o recurso?', 'Participando da Rede' ] - + const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state); const handleChangeTab = (e, newValue) => { setTabValue(newValue) -} + } + useEffect(() => { window.scrollTo(0, 0) }, []) + return ( + <div style={{ backgroundColor: "#f4f4f4" }}> + <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" /> - return( - <div style={{backgroundColor:"#f4f4f4"}}> - <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/> - <Secao> <BreadCrumbsDiv> <StyledBreadCrumbs> @@ -64,7 +64,7 @@ export default function TabNetPart (props) { <Link to="ajuda" > Ajuda </Link> - + <span> {tabs[2]} </span> @@ -78,26 +78,26 @@ export default function TabNetPart (props) { <Principal> <Menu> <div className="fixo"> - <img src={ParticipandoRede} alt="Participando da Rede"/> + <img src={ParticipandoRede} alt="Participando da Rede" /> <span>{tabs[2]}</span> </div> - <TabsStyled orientation = "vertical" - variant = "scrollable" - value = {tabValue} - onChange = {handleChangeTab} - TabIndicatorProps = {{style:{display: "none"}}} + <TabsStyled orientation="vertical" + variant="scrollable" + value={tabValue} + onChange={handleChangeTab} + TabIndicatorProps={{ style: { display: "none" } }} > - <TabStyled label={tabs[0]}></TabStyled> - <TabStyled label={tabs[1]}></TabStyled> + <TabStyled label={tabs[0]}></TabStyled> + <TabStyled label={tabs[1]}></TabStyled> </TabsStyled> - <br/> + <br /> <div className="voltarInicio"> <a href="ajuda">VOLTAR AO ÃNICIO</a> </div> </Menu> - {tabValue === 0 && <How title={tabs[0]}/>} - {tabValue === 1 && <What title={tabs[1]}/>} + {tabValue === 0 && <How title={tabs[0]} />} + {tabValue === 1 && <What title={tabs[1]} />} <div className="resultadosProcura"> <span>Não era bem o que você procurava?</span> <div className="subtitulo"> @@ -106,21 +106,21 @@ export default function TabNetPart (props) { </div> </Principal> - </Grid> + </Grid> + </Grid> + + + <Grid style={{ paddingBottom: "50px" }} container justify={"center"}> + <Grid item xs={12} md={3} style={{ margin: 5 }}> + <CardPublicando /> + </Grid> + <Grid item xs={12} md={3} style={{ margin: 5 }}> + <CardEncontrando /> + </Grid> + <Grid item xs={12} md={3} style={{ margin: 5 }}> + <CardGerenciando /> + </Grid> </Grid> - - - <Grid style={{paddingBottom:"50px"}} container justify={"center"}> - <Grid item xs={12} md={3} style={{margin:5}}> - <CardPublicando/> - </Grid> - <Grid item xs={12} md={3} style={{margin:5}}> - <CardEncontrando/> - </Grid> - <Grid item xs={12} md={3} style={{margin:5}}> - <CardGerenciando/> - </Grid> - </Grid> </Secao> diff --git a/src/Pages/TabsHelp/TabResourseFind.js b/src/Pages/TabsHelp/TabResourseFind.js index 8691d282..3ea89256 100644 --- a/src/Pages/TabsHelp/TabResourseFind.js +++ b/src/Pages/TabsHelp/TabResourseFind.js @@ -16,7 +16,7 @@ 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, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import Tabs from '@material-ui/core/Tabs' import Tab from '@material-ui/core/Tab'; @@ -29,7 +29,7 @@ import HowToFilter from '../../Components/HelpCenter/TabsResourseFind/HowToFilte import CardPublicando from '../../Components/HelpCenter/Cards/CardPublicando'; import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando'; import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom'; @@ -37,25 +37,26 @@ import { Link } from 'react-router-dom'; -export default function TabResourseFind (props) { - const tabs= [ +export default function TabResourseFind(props) { + const tabs = [ 'Como fazer uma busca?', 'Como filtrar os resultados?', 'Como os recursos são ranqueados?', 'Encontrando Recursos' ] - + const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state); const handleChangeTab = (e, newValue) => { setTabValue(newValue) -} + } + useEffect(() => { window.scrollTo(0, 0) }, []) + + return ( + <div style={{ backgroundColor: "#f4f4f4" }}> + <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" /> - return( - <div style={{backgroundColor:"#f4f4f4"}}> - <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/> - <Secao> <BreadCrumbsDiv> <StyledBreadCrumbs> @@ -65,7 +66,7 @@ export default function TabResourseFind (props) { <Link to="ajuda" > Ajuda </Link> - + <span> {tabs[3]} </span> @@ -78,51 +79,51 @@ export default function TabResourseFind (props) { <Principal> <Menu> <div className="fixo"> - <img src={EncontrandoRecurso} alt="Encontrando Recursos"/> + <img src={EncontrandoRecurso} alt="Encontrando Recursos" /> <span>{tabs[3]}</span> </div> - <TabsStyled orientation = "vertical" - variant = "scrollable" - value = {tabValue} - onChange = {handleChangeTab} - TabIndicatorProps = {{style:{display: "none"}}} + <TabsStyled orientation="vertical" + variant="scrollable" + value={tabValue} + onChange={handleChangeTab} + TabIndicatorProps={{ style: { display: "none" } }} > - <TabStyled label={tabs[0]}></TabStyled> - <TabStyled label={tabs[1]}></TabStyled> - <TabStyled label={tabs[2]}></TabStyled> + <TabStyled label={tabs[0]}></TabStyled> + <TabStyled label={tabs[1]}></TabStyled> + <TabStyled label={tabs[2]}></TabStyled> </TabsStyled> - <br/> + <br /> <div className="voltarInicio"> <a href="ajuda">VOLTAR AO ÃNICIO</a> </div> </Menu> - {tabValue === 0 && <HowToDo title={tabs[0]}/>} - {tabValue === 1 && <HowToFilter title={tabs[1]}/>} - {tabValue === 2 && <HowToRank title={tabs[2]}/>} + {tabValue === 0 && <HowToDo title={tabs[0]} />} + {tabValue === 1 && <HowToFilter title={tabs[1]} />} + {tabValue === 2 && <HowToRank title={tabs[2]} />} <div className="resultadosProcura"> <span>Não era bem o que você procurava?</span> <div className="subtitulo"> <span>Você pode navegar pelos tópicos de ajuda ou entrar em <a href="contato">Contato</a>.</span> </div> </div> - + </Principal> - </Grid> - </Grid> - <Grid style={{paddingBottom:"50px"}} container justify={"center"}> - <Grid item xs={12} md={3} style={{margin:5}}> - <CardPublicando/> </Grid> - <Grid item xs={12} md={3} style={{margin:5}}> - <CardParticipando/> + </Grid> + <Grid style={{ paddingBottom: "50px" }} container justify={"center"}> + <Grid item xs={12} md={3} style={{ margin: 5 }}> + <CardPublicando /> </Grid> - <Grid item xs={12} md={3} style={{margin:5}}> - <CardGerenciando/> + <Grid item xs={12} md={3} style={{ margin: 5 }}> + <CardParticipando /> + </Grid> + <Grid item xs={12} md={3} style={{ margin: 5 }}> + <CardGerenciando /> </Grid> </Grid> - + </Secao> </div> diff --git a/src/Pages/TabsHelp/TabResoursePub.js b/src/Pages/TabsHelp/TabResoursePub.js index 75dead02..514362aa 100644 --- a/src/Pages/TabsHelp/TabResoursePub.js +++ b/src/Pages/TabsHelp/TabResoursePub.js @@ -16,7 +16,7 @@ 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, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import styled from 'styled-components'; import Tabs from '@material-ui/core/Tabs' import Tab from '@material-ui/core/Tab'; @@ -29,40 +29,42 @@ import Which from '../../Components/HelpCenter/TabsResoursePub/Which' import CardEncontrando from '../../Components/HelpCenter/Cards/CardEncontrando'; import CardParticipando from '../../Components/HelpCenter/Cards/CardParticipando'; import CardGerenciando from '../../Components/HelpCenter/Cards/CardGerenciando'; -import { Link } from 'react-router-dom'; +import { Link } from 'react-router-dom'; -export default function TabResoursePub (props) { +export default function TabResoursePub(props) { console.log(props) - - const tabs= [ + + const tabs = [ 'Por que enviar um recurso?', 'Como publicar um recurso?', 'Quais tipos de recursos e formatos de arquivo a plataforma aceita?', 'Publicando Recursos' ] - + const [tabValue, setTabValue] = useState(props.location.state === "undefined" ? 0 : props.location.state); const handleChangeTab = (e, newValue) => { setTabValue(newValue) -} + } + + useEffect(() => { window.scrollTo(0, 0) }, []) + + return ( + <div style={{ backgroundColor: "#f4f4f4" }}> + <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet" /> - return( - <div style={{backgroundColor:"#f4f4f4"}}> - <link href="https://fonts.googleapis.com/css?family=Pompiere|Roboto:500,400&display=swap" rel="stylesheet"/> - <Secao> <BreadCrumbsDiv> <StyledBreadCrumbs> <Link to="/" > - Página Inicial + Página Inicial </Link> <Link to="ajuda" > Ajuda - </Link> + </Link> <span> - {tabs[3]} + {tabs[3]} </span> </StyledBreadCrumbs> @@ -72,28 +74,28 @@ export default function TabResoursePub (props) { <Principal> <Menu> <div className="fixo"> - <img src={PublicandoRecursos} alt="Publicando Recursos"/> + <img src={PublicandoRecursos} alt="Publicando Recursos" /> <span>{tabs[3]}</span> </div> - <TabsStyled orientation = "vertical" - variant = "scrollable" - value = {tabValue} - onChange = {handleChangeTab} - TabIndicatorProps = {{style:{display: "none"}}} + <TabsStyled orientation="vertical" + variant="scrollable" + value={tabValue} + onChange={handleChangeTab} + TabIndicatorProps={{ style: { display: "none" } }} > - <TabStyled label={tabs[0]}></TabStyled> - <TabStyled label={tabs[1]}></TabStyled> - <TabStyled label={tabs[2]}></TabStyled> + <TabStyled label={tabs[0]}></TabStyled> + <TabStyled label={tabs[1]}></TabStyled> + <TabStyled label={tabs[2]}></TabStyled> </TabsStyled> - <br/> + <br /> <div className="voltarInicio"> <a href="ajuda">VOLTAR AO ÃNICIO</a> </div> </Menu> - {tabValue === 0 && <Why title={tabs[0]}/>} - {tabValue === 1 && <How title={tabs[1]}/>} - {tabValue === 2 && <Which title={tabs[2]}/>} + {tabValue === 0 && <Why title={tabs[0]} />} + {tabValue === 1 && <How title={tabs[1]} />} + {tabValue === 2 && <Which title={tabs[2]} />} <div className="resultadosProcura"> <span>Não era bem o que você procurava?</span> <div className="subtitulo"> @@ -102,20 +104,20 @@ export default function TabResoursePub (props) { </div> </Principal> - </Grid> - </Grid> - <Grid style={{paddingBottom:"50px"}} container justify={"center"}> - <Grid item xs={12} md={3} style={{margin:5}}> - <CardEncontrando/> </Grid> - <Grid item xs={12} md={3} style={{margin:5}}> - <CardParticipando/> + </Grid> + <Grid style={{ paddingBottom: "50px" }} container justify={"center"}> + <Grid item xs={12} md={3} style={{ margin: 5 }}> + <CardEncontrando /> + </Grid> + <Grid item xs={12} md={3} style={{ margin: 5 }}> + <CardParticipando /> </Grid> - <Grid item xs={12} md={3} style={{margin:5}}> - <CardGerenciando/> + <Grid item xs={12} md={3} style={{ margin: 5 }}> + <CardGerenciando /> </Grid> - </Grid> + </Grid> </Secao> diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js index d7722bef..e6c2e7cb 100644 --- a/src/Pages/UserTerms.js +++ b/src/Pages/UserTerms.js @@ -15,7 +15,7 @@ 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, {Component} from 'react'; +import React, { useEffect } from 'react'; import SimpleExpansionPanels from '../Components/ExpansionPanels' import Grid from '@material-ui/core/Grid'; import Modal from '../Components/Modal' @@ -32,7 +32,7 @@ import Linha from "../img/termos/linha.svg"; -const BannerStyle=styled.div` +const BannerStyle = styled.div` width: 100%; background-image: url(${Banner1}); background-size: cover; @@ -186,99 +186,98 @@ const Secao4 = styled.div` ` -class UserTerms extends Component { - render() { +export default function UserTerms() { + useEffect(() => { + window.scrollTo(0, 0) + }, []) + return ( + <div style={{ color: "rgba(0,0,0,0.87" }} > - return ( - <div style={{color:"rgba(0,0,0,0.87"}} > + <BannerStyle> + <h2 style={{ width: "100%", textAlign: "center", marginTop: "0px", paddingTop: "6rem", marginBottom: "16px", fontSize: "52px", fontFamily: "'Pompiere', cursive", color: "#fff", fontWeight: "500" }}>TERMOS DE USO</h2> + <Modal /> + </BannerStyle> - <BannerStyle> - <h2 style={{width: "100%",textAlign: "center",marginTop:"0px", paddingTop:"6rem",marginBottom:"16px",fontSize:"52px",fontFamily: "'Pompiere', cursive",color:"#fff",fontWeight:"500"}}>TERMOS DE USO</h2> - <Modal/> - </BannerStyle> + <ImagemSeçao2> + <Grid container > + <Grid item xs={12} md={1}></Grid> + <Grid item xs={12} md={10}> + <div> + <h3><strong style={{ fontWeight: "700" }}>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br />uma iniciativa do Ministério da Educação!</h3> - <ImagemSeçao2> - <Grid container > - <Grid item xs={12} md={1}></Grid> - <Grid item xs={12} md={10}> - <div> - <h3><strong style={{fontWeight:"700"}}>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br/>uma iniciativa do Ministério da Educação!</h3> - - <p>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <AColorido href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</AColorido> (OGP-Brasil), que tem por objetivo “incorporar na polÃtica educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileiraâ€. + <p>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <AColorido href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</AColorido> (OGP-Brasil), que tem por objetivo “incorporar na polÃtica educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileiraâ€. </p> - <p>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domiÌnio puÌblico ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.†<AColorido href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</AColorido>. + <p>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domiÌnio puÌblico ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.†<AColorido href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</AColorido>. </p> - </div> - </Grid> - <Grid item xs={12} md={1}></Grid> - </Grid> - </ImagemSeçao2> - - <Secao3 > - <Grid container > - <h3>Para melhor compreensão, podemos dividir os recursos em dois tipos:</h3> - <Grid item xs={12} md={1} ></Grid> - <Grid item xs={12} md={5} > - <div class="caixa aberto"> - <div class ="texto"> - <span>Abertos</span> - <p>De acordo com a Declaração de Paris, são recursos que, no mÃnimo, têm uma licença de uso mais flexÃvel, que garante livre redistribuição. Adicionalmente, um recurso aberto deve utilizar um formato aberto, um formato de arquivo que permite a fácil edição por terceiros. Nenhum controle sobre o acesso (como cadastro e senha) deve existir para acesso a recursos abertos. Em sua maioria, são recursos gratuitos.</p> - </div> - </div> - </Grid> - - <Grid item xs={12} md={5}> - <div class="caixa fechado"> - <div class ="texto"> - <span>Fechados</span> - <p>São recursos que criam restrições no seu acesso, uso ou reuso. Como exemplo, podemos mencionar recursos que só são acessÃveis mediante cadastro ou que têm licenças restritivas (como “todos os direitos reservadosâ€, o sÃmbolo ©). Podem ser gratuitos ou pagos.</p> - </div> - </div> - </Grid> - <Grid item xs={12} md={1} ></Grid> - </Grid> - </Secao3> - - - - - <Grid container > - <Grid item xs={12} md={1}></Grid> - <Grid item xs={12} md={10}> - <Secao4> - <div class="texto" style={{paddingTop:"70px"}}> - <p>O <a href="http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2014/lei/l13005.htm" rel="noreferrer" target="_blank">Plano Nacional de Educação</a> (2014-2024) enfatiza nas metas 5 e 7 a importância dos recursos educacionais abertos para fomentar a qualidade da educação baÌsica. A <a href="http://portal.mec.gov.br/index.php?option=com_docman&view=download&alias=35541-res-cne-ces-001-14032016-pdf&category_slug=marco-2016-pdf&Itemid=30192" rel="noreferrer" target="_blank">Resolução CNE/CES nº 1</a>, de 11 de março de 2016, também destaca a importância dos recursos educacionais abertos para as instituições de educação superior e para as atividades de educação a distância.</p> - </div> - <div class="titulo"> - <h3>TERMOS DE USO</h3> - <p>InÃcio da vigência: agosto de 2017</p> - </div> - <div class="texto" style={{paddingBottom:"40px"}}> - <p>Aqui estão os “Termos de Uso†da <strong>Plataforma Integrada de RED do MEC</strong>, isto é, as regras de funcionamento da Plataforma e seus serviços, e o que se espera de seus usuários. Por “usuárioâ€, entende-se qualquer pessoa que acesse o domÃnio portal.mec.gov.br, tanto para pesquisa (acesso) como para a inclusão de dados e informações (participação) mediante cadastro.</p> - <p>Fazem parte dos Termos de Uso as polÃticas de responsabilidade, de privacidade e confidencialidade, a licença de uso do conteúdo e as informações sobre como reportar violações.</p> - <p>Ao utilizar a <strong>Plataforma Integrada de RED do MEC</strong>, o usuário aceita todas as condições aqui estabelecidas. O uso da <strong>Plataforma Integrada de RED do MEC</strong> implica aceite das condições aqui elencadas.</p> - <p>Por “serviçoâ€, entende-se qualquer funcionalidade ou ferramenta que permita a interatividade com o usuário, como, por exemplo, usuário subir um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p> - <p>A aceitação destes "Termos de Uso" é indispensável à utilização da <strong>Plataforma Integrada de RED do MEC</strong>. Todos os usuários deverão ler, certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos, utilize o formulário disponÃvel em “Contato†para saná-las.</p> - </div> - </Secao4> - </Grid> - <Grid item xs={12} md={1}></Grid> + </div> + </Grid> + <Grid item xs={12} md={1}></Grid> + </Grid> + </ImagemSeçao2> + + <Secao3 > + <Grid container > + <h3>Para melhor compreensão, podemos dividir os recursos em dois tipos:</h3> + <Grid item xs={12} md={1} ></Grid> + <Grid item xs={12} md={5} > + <div class="caixa aberto"> + <div class="texto"> + <span>Abertos</span> + <p>De acordo com a Declaração de Paris, são recursos que, no mÃnimo, têm uma licença de uso mais flexÃvel, que garante livre redistribuição. Adicionalmente, um recurso aberto deve utilizar um formato aberto, um formato de arquivo que permite a fácil edição por terceiros. Nenhum controle sobre o acesso (como cadastro e senha) deve existir para acesso a recursos abertos. Em sua maioria, são recursos gratuitos.</p> + </div> + </div> </Grid> - - <Grid container > - <Grid item xs={12} md={1}></Grid> - <Grid item xs={12} md={10}> - <div style={{ marginBottom:"50px",paddingTop: "20px"}}> - <SimpleExpansionPanels/> + <Grid item xs={12} md={5}> + <div class="caixa fechado"> + <div class="texto"> + <span>Fechados</span> + <p>São recursos que criam restrições no seu acesso, uso ou reuso. Como exemplo, podemos mencionar recursos que só são acessÃveis mediante cadastro ou que têm licenças restritivas (como “todos os direitos reservadosâ€, o sÃmbolo ©). Podem ser gratuitos ou pagos.</p> </div> - </Grid> - <Grid item xs={12} md={1}></Grid> - </Grid> - </div> - ); - } - } + </div> + </Grid> + <Grid item xs={12} md={1} ></Grid> + </Grid> + </Secao3> + + + + + <Grid container > + <Grid item xs={12} md={1}></Grid> + <Grid item xs={12} md={10}> + <Secao4> + <div class="texto" style={{ paddingTop: "70px" }}> + <p>O <a href="http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2014/lei/l13005.htm" rel="noreferrer" target="_blank">Plano Nacional de Educação</a> (2014-2024) enfatiza nas metas 5 e 7 a importância dos recursos educacionais abertos para fomentar a qualidade da educação baÌsica. A <a href="http://portal.mec.gov.br/index.php?option=com_docman&view=download&alias=35541-res-cne-ces-001-14032016-pdf&category_slug=marco-2016-pdf&Itemid=30192" rel="noreferrer" target="_blank">Resolução CNE/CES nº 1</a>, de 11 de março de 2016, também destaca a importância dos recursos educacionais abertos para as instituições de educação superior e para as atividades de educação a distância.</p> + </div> + <div class="titulo"> + <h3>TERMOS DE USO</h3> + <p>InÃcio da vigência: agosto de 2017</p> + </div> + <div class="texto" style={{ paddingBottom: "40px" }}> + <p>Aqui estão os “Termos de Uso†da <strong>Plataforma Integrada de RED do MEC</strong>, isto é, as regras de funcionamento da Plataforma e seus serviços, e o que se espera de seus usuários. Por “usuárioâ€, entende-se qualquer pessoa que acesse o domÃnio portal.mec.gov.br, tanto para pesquisa (acesso) como para a inclusão de dados e informações (participação) mediante cadastro.</p> + <p>Fazem parte dos Termos de Uso as polÃticas de responsabilidade, de privacidade e confidencialidade, a licença de uso do conteúdo e as informações sobre como reportar violações.</p> + <p>Ao utilizar a <strong>Plataforma Integrada de RED do MEC</strong>, o usuário aceita todas as condições aqui estabelecidas. O uso da <strong>Plataforma Integrada de RED do MEC</strong> implica aceite das condições aqui elencadas.</p> + <p>Por “serviçoâ€, entende-se qualquer funcionalidade ou ferramenta que permita a interatividade com o usuário, como, por exemplo, usuário subir um recurso, postar um comentário, criar uma coleção ou enviar uma mensagem.</p> + <p>A aceitação destes "Termos de Uso" é indispensável à utilização da <strong>Plataforma Integrada de RED do MEC</strong>. Todos os usuários deverão ler, certificar-se de tê-los entendido e aceitar todas as condições neles estabelecidas. Dessa forma, deve ficar claro que a utilização desta "<strong>Plataforma Integrada de RED do MEC</strong>" implica aceitação completa deste documento intitulado Termos de Uso. Caso tenha dúvidas sobre os termos, utilize o formulário disponÃvel em “Contato†para saná-las.</p> + </div> + </Secao4> + </Grid> + <Grid item xs={12} md={1}></Grid> + </Grid> + + + <Grid container > + <Grid item xs={12} md={1}></Grid> + <Grid item xs={12} md={10}> + <div style={{ marginBottom: "50px", paddingTop: "20px" }}> + <SimpleExpansionPanels /> + </div> + </Grid> + <Grid item xs={12} md={1}></Grid> + </Grid> + </div> + ); +} -export default UserTerms; diff --git a/src/env.js b/src/env.js index 82bf229b..b7359157 100644 --- a/src/env.js +++ b/src/env.js @@ -17,7 +17,7 @@ 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/>.*/ -var apiDomain = 'https://api.portalmectest.c3sl.ufpr.br', +var apiDomain = 'https://api.portalmec.c3sl.ufpr.br', apiVersion = 'v1', apiUrl = apiDomain + '/' + apiVersion; -- GitLab