diff --git a/src/App.js b/src/App.js index f7cd24a6ce05719d4786b050255121f93e8cf198..458d25ce50e9ecb17b2ea597faee729f85112dd5 100644 --- a/src/App.js +++ b/src/App.js @@ -24,7 +24,7 @@ import LoadingSpinner from './Components/LoadingSpinner'; import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom"; import createBrowserHistory from 'history/createBrowserHistory' import './App.css'; -import ContrastBar from './Components/Acessibility/ContrastBar'; +import ContrastBar from './Components/Accessibility/ContrastBar'; const AdminTemplate = React.lazy(() => import('./Admin/Components/Components/AdminTemplate')); const Header = React.lazy(() => import("./Components/Header")); @@ -34,6 +34,7 @@ const EcFooter = React.lazy(() => import("./Components/EcFooter")); const GNUAGPLfooter = React.lazy(() => import("./Components/AGPLFooter")); const UserPage = React.lazy(() => import("./Pages/UserPage")); const UserTerms = React.lazy(() => import("./Pages/UserTerms")); +const SummarizedUserTerms = React.lazy(() => import("./Pages/SummarizedUserTerms")); const Contact = React.lazy(() => import("./Pages/Contact")); const AboutPage = React.lazy(() => import("./Pages/AboutPage")); const HelpCenter = React.lazy(() => import("./Pages/HelpCenter")); @@ -100,6 +101,25 @@ const EditRole = React.lazy(() => import("./Admin/Components/Components/Inputs/E const CreateRole = React.lazy(() => import("./Admin/Components/Components/Inputs/CreateRole")); const BlockedUser = React.lazy(() => import("./Admin/Pages/Pages/SubPages/BlockedUsers")); +async function supportsWebp() { + if (!createImageBitmap) return false; + + const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA='; + const blob = await fetch(webpData).then(r => r.blob()); + return createImageBitmap(blob).then(() => true, () => false); +} + +const LoadingScreen = () => ( + <div style={{ + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)" + }}> + <LoadingSpinner/> + </div> +); + export default function App() { // eslint-disable-next-line const { state, dispatch } = useContext(Store); @@ -111,15 +131,7 @@ export default function App() { siteId: 5 }); const customHistory = createBrowserHistory() - - async function supportsWebp() { - if (!createImageBitmap) return false; - - const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA='; - const blob = await fetch(webpData).then(r => r.blob()); - return createImageBitmap(blob).then(() => true, () => false); - } - + async function testWebpSupport() { if(await supportsWebp()) { localStorage.setItem('webpSupport', 'True'); @@ -144,6 +156,10 @@ export default function App() { testWebpSupport(); }, []); + useEffect(() => { + state.contrast === "" ? document.body.style.backgroundColor = "white" : document.body.style.backgroundColor = "black" + }, [ state.contrast ]); + useEffect(() => { const setWindowSize = () => { dispatch({ @@ -160,314 +176,305 @@ export default function App() { return () => window.removeEventListener("resize", setWindowSize); }, [window.innerWidth, window.innerHeight]); - const LoadingScreen = () => ( - <div style={{ - position: "absolute", - top: "50%", - left: "50%", - transform: "translate(-50%, -50%)" - }}> - <LoadingSpinner/> - </div> - ); - - return ( - // add piwik later - // history={piwik.connectToHistory(customHistory)} - <> - {!awaitTest && - <React.Suspense fallback={<LoadingScreen/>}> - <BrowserRouter> - <ContrastBar /> - <Header /> - <div - style={{ - backgroundImage: - "linear-gradient(to right,#ff7f00,#e81f4f,#673ab7,#00bcd4)", - height: "5px", - }} - ></div> - <link - href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" - rel="stylesheet" - /> - <Switch style={state.contrast === "" ? {backgroundColor: "white"} : {backgroundColor: "black"}}> - <Redirect from="/home" to="/" /> - <Route path="/" exact={true} component={Home} /> - <Route path="/busca" component={Search} /> - <Route path="/perfil" component={UserPage} /> - <Route path="/editarperfil" component={EditProfilePage} /> - <Route path="/recurso/:recursoId" component={ResourcePage} /> - <Route path="/termos-publicar-recurso" component={TermsPage} /> - <Route path="/permission" component={PublicationPermissionsPage} /> - {/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/} - <Route path="/ajuda" component={HelpCenter} /> - <Route path="/contato" component={Contact} /> - <Route path="/termos" component={UserTerms} /> - <Route path="/sobre" component={AboutPage} /> - <Route path="/mapa-site" component={SiteMap} /> - <Route path="/acessibilidade" component={Accessibility} /> - <Route path="/publicando-recurso" component={TabResoursePub} /> - <Route path="/encontrando-recurso" component={TabResourseFind} /> - <Route path="/participando-da-rede" component={TabNetPart} /> - <Route path="/gerenciando-conta" component={TabManageAc} /> - <Route path="/plataforma-mec" component={TabPlataformaMEC} /> - <Route path="/recuperar-senha/alterar-senha" component={ChangePasswordPage} /> - <Route path="/recuperar-senha" component={PasswordRecoveryPage} /> - <Route path="/usuario-publico/:userId" component={PublicUserPage} /> - <Route - path="/editar-recurso/:recursoId" - component={EditLearningObjectPage} - /> - <Route path="/professor" component={PageProfessor} /> - <Route path="/upload" component={UploadPage} /> - <Route path="/loja" component={ItemStore} /> - <Route path="/colecao-do-usuario/:id" component={CollectionPage} /> - <Route path="/colecao" component={FormationMaterialPage} /> - <Route path="/topico" component={FormationMaterialPage} /> - <Route path="/iframe-colecao" component={FormationMaterialIframe} /> - <Route path="/material-formacao" component={MaterialPage} /> - - <Route - path="/admin/home" - exact={true} - render={() => { - return <AdminTemplate inner={<Inframe/>}/> - }} - /> - <Route - path="/admin/institutions" - render={() => { - return <AdminTemplate inner={<Institution />}/> - }} - /> - <Route - path="/admin/institution" - render={() => { - return <AdminTemplate inner={<InstitutionCard />}/> - }} - /> - <Route - path="/admin/institutionEdit" - render={() => { - return <AdminTemplate inner={<InstitutionsInput />}/> - }} - /> - <Route - path="/admin/InstitutionCreate" - render={() => { - return <AdminTemplate inner={<CreateInstitution />}/> - }} - /> - <Route - path="/admin/noteVars" - render={() => { - return <AdminTemplate inner={<NoteVariables />}/> - }} - /> - <Route - path="/admin/noteVar" - render={() => { - return <AdminTemplate inner={<NoteVarCard />}/> - }} - /> - <Route - path="/admin/noteVarEdit" - render={() => { - return <AdminTemplate inner={<NoteVarInputs />}/> - }} - /> - <Route - path="/admin/languages" - render={() => { - return <AdminTemplate inner={<Languages />}/> - }} - /> - <Route - path="/admin/languageEdit" - render={() => { - return <AdminTemplate inner={<EditLanguage />}/> - }} - /> - <Route - path="/admin/languageCreate" - render={() => { - return <AdminTemplate inner={<CreateLanguage />}/> - }} - /> - <Route - path="/admin/CommunityQuestions" - render={() => { - return <AdminTemplate inner={<CommunityQuestions />}/> - }} - /> - <Route - path="/admin/CommunityQuestion" - render={() => { - return <AdminTemplate inner={<CommunityCard />}/> - }} - /> - <Route - path="/admin/Collections" - render={() => { - return <AdminTemplate inner={<Collections />}/> - }} - /> - <Route - path="/admin/Collection" - render={() => { - return <AdminTemplate inner={<CollectionCard />}/> - }} - /> - <Route - path="/admin/EditCollection" - render={() => { - return <AdminTemplate inner={<EditCollection />}/> + return ( + // add piwik later + // history={piwik.connectToHistory(customHistory)} + <> + {!awaitTest && + <React.Suspense fallback={<LoadingScreen/>}> + <BrowserRouter> + <ContrastBar/> + <Header /> + <div + style={{ + backgroundImage: + "linear-gradient(to right,#ff7f00,#e81f4f,#673ab7,#00bcd4)", + height: "5px", }} - /> - <Route - path="/admin/Ratings" - render={() => { - return <AdminTemplate inner={<Ratings />}/> - }} - /> - <Route - path="/admin/Rating" - render={() => { - return <AdminTemplate inner={<RatingCard />}/> - }} - /> - <Route - path="/admin/EditRating" - render={() => { - return <AdminTemplate inner={<EditRating />}/> - }} - /> - <Route - path="/admin/CreateRating" - render={() => { - return <AdminTemplate inner={<CreateRating />}/> - }} - /> - <Route - path="/admin/Questions" - render={() => { - return <AdminTemplate inner={<Questions />}/> - }} - /> - <Route - path="/admin/CreateQuestion" - render={() => { - return <AdminTemplate inner={<CreateQuestions />}/> - }} - /> - <Route - path="/admin/activities" - render={() => { - return <AdminTemplate inner={<Activity />}/> - }} - /> - <Route - path="/admin/activity" - render={() => { - return <AdminTemplate inner={<ActivityCard />}/> - }} - /> - <Route - path="/admin/learningObjects" - render={() => { - return <AdminTemplate inner={<EducationalObject />}/> - }} - /> - <Route - path="/admin/learningObject" - render={() => { - return <AdminTemplate inner={<EducationalObjectCard />}/> - }} - /> - <Route - path="/admin/learningObjectEdit" - render={() => { - return <AdminTemplate inner={<EducationalObjectEdit />}/> - }} - /> - <Route - path="/admin/complaints" - render={() => { - return <AdminTemplate inner={<Complaints />}/> - }} - /> - <Route - path="/admin/complaint" - render={() => { - return <AdminTemplate inner={<ComplaintCard />}/> - }} - /> - <Route - path="/admin/users/teacher_requests" - render={() => { - return <AdminTemplate inner={<AproveTeacher />}/> - }} - /> - <Route - path="/admin/usersList" - render={() => { - return <AdminTemplate inner={<UserList />}/> - }} - /> - <Route - path="/admin/user" - render={() => { - return <AdminTemplate inner={<UserCard />}/> - }} - /> - <Route - path="/admin/EditUser" - render={() => { - return <AdminTemplate inner={<EditUser />}/> - }} - /> - <Route - path="/admin/permissions" - render={() => { - return <AdminTemplate inner={<UserPermissions />}/> - }} - /> - <Route - path="/admin/EditPermissions" - render={() => { - return <AdminTemplate inner={<EditRole />}/> - }} - /> - <Route - path="/admin/CreateRole" - render={() => { - return <AdminTemplate inner={<CreateRole />}/> - }} - /> - <Route - path="/admin/BlockedUsers" - render={() => { - return <AdminTemplate inner={<BlockedUser />}/> - }} - /> - <Route - path="/admin/sendEmail" - render={() => { - return <AdminTemplate inner={<SendEmail />}/> - }} - /> - <Route path='*' component={PageNotFound} /> - </Switch> - {!hideFooter && ( - <div> - <EcFooter contrast={state.contrast} /> - <GNUAGPLfooter contrast={state.contrast} /> - </div> - )} - </BrowserRouter> - </React.Suspense> - } - </> - ); + ></div> + <link + href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" + rel="stylesheet" + /> + <div id="Conteudo_scroll"></div> + <Switch style={state.contrast === "" ? {backgroundColor: "white"} : {backgroundColor: "black"}}> + <Redirect from="/home" to="/" /> + <Route path="/" exact={true} component={Home} /> + <Route path="/busca" component={Search} /> + <Route path="/perfil" component={UserPage} /> + <Route path="/editarperfil" component={EditProfilePage} /> + <Route path="/recurso/:recursoId" component={ResourcePage} /> + <Route path="/termos-publicar-recurso" component={TermsPage} /> + <Route path="/permission" component={PublicationPermissionsPage} /> + {/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/} + <Route path="/ajuda" component={HelpCenter} /> + <Route path="/contato" component={Contact} /> + <Route path="/termos-resumido" component={SummarizedUserTerms} /> + <Route path="/termos" component={UserTerms} /> + <Route path="/sobre" component={AboutPage} /> + <Route path="/mapa-site" component={SiteMap} /> + <Route path="/acessibilidade" component={Accessibility} /> + <Route path="/publicando-recurso" component={TabResoursePub} /> + <Route path="/encontrando-recurso" component={TabResourseFind} /> + <Route path="/participando-da-rede" component={TabNetPart} /> + <Route path="/gerenciando-conta" component={TabManageAc} /> + <Route path="/plataforma-mec" component={TabPlataformaMEC} /> + <Route path="/recuperar-senha/alterar-senha" component={ChangePasswordPage} /> + <Route path="/recuperar-senha" component={PasswordRecoveryPage} /> + <Route path="/usuario-publico/:userId" component={PublicUserPage} /> + <Route + path="/editar-recurso/:recursoId" + component={EditLearningObjectPage} + /> + <Route path="/professor" component={PageProfessor} /> + <Route path="/upload" component={UploadPage} /> + <Route path="/loja" component={ItemStore} /> + <Route path="/colecao-do-usuario/:id" component={CollectionPage} /> + <Route path="/colecao" component={FormationMaterialPage} /> + <Route path="/topico" component={FormationMaterialPage} /> + <Route path="/iframe-colecao" component={FormationMaterialIframe} /> + <Route path="/material-formacao" component={MaterialPage} /> + + <Route + path="/admin/home" + exact={true} + render={() => { + return <AdminTemplate inner={<Inframe/>}/> + }} + /> + <Route + path="/admin/institutions" + render={() => { + return <AdminTemplate inner={<Institution />}/> + }} + /> + <Route + path="/admin/institution" + render={() => { + return <AdminTemplate inner={<InstitutionCard />}/> + }} + /> + <Route + path="/admin/institutionEdit" + render={() => { + return <AdminTemplate inner={<InstitutionsInput />}/> + }} + /> + <Route + path="/admin/InstitutionCreate" + render={() => { + return <AdminTemplate inner={<CreateInstitution />}/> + }} + /> + <Route + path="/admin/noteVars" + render={() => { + return <AdminTemplate inner={<NoteVariables />}/> + }} + /> + <Route + path="/admin/noteVar" + render={() => { + return <AdminTemplate inner={<NoteVarCard />}/> + }} + /> + <Route + path="/admin/noteVarEdit" + render={() => { + return <AdminTemplate inner={<NoteVarInputs />}/> + }} + /> + <Route + path="/admin/languages" + render={() => { + return <AdminTemplate inner={<Languages />}/> + }} + /> + <Route + path="/admin/languageEdit" + render={() => { + return <AdminTemplate inner={<EditLanguage />}/> + }} + /> + <Route + path="/admin/languageCreate" + render={() => { + return <AdminTemplate inner={<CreateLanguage />}/> + }} + /> + <Route + path="/admin/CommunityQuestions" + render={() => { + return <AdminTemplate inner={<CommunityQuestions />}/> + }} + /> + <Route + path="/admin/CommunityQuestion" + render={() => { + return <AdminTemplate inner={<CommunityCard />}/> + }} + /> + <Route + path="/admin/Collections" + render={() => { + return <AdminTemplate inner={<Collections />}/> + }} + /> + <Route + path="/admin/Collection" + render={() => { + return <AdminTemplate inner={<CollectionCard />}/> + }} + /> + <Route + path="/admin/EditCollection" + render={() => { + return <AdminTemplate inner={<EditCollection />}/> + }} + /> + <Route + path="/admin/Ratings" + render={() => { + return <AdminTemplate inner={<Ratings />}/> + }} + /> + <Route + path="/admin/Rating" + render={() => { + return <AdminTemplate inner={<RatingCard />}/> + }} + /> + <Route + path="/admin/EditRating" + render={() => { + return <AdminTemplate inner={<EditRating />}/> + }} + /> + <Route + path="/admin/CreateRating" + render={() => { + return <AdminTemplate inner={<CreateRating />}/> + }} + /> + <Route + path="/admin/Questions" + render={() => { + return <AdminTemplate inner={<Questions />}/> + }} + /> + <Route + path="/admin/CreateQuestion" + render={() => { + return <AdminTemplate inner={<CreateQuestions />}/> + }} + /> + <Route + path="/admin/activities" + render={() => { + return <AdminTemplate inner={<Activity />}/> + }} + /> + <Route + path="/admin/activity" + render={() => { + return <AdminTemplate inner={<ActivityCard />}/> + }} + /> + <Route + path="/admin/learningObjects" + render={() => { + return <AdminTemplate inner={<EducationalObject />}/> + }} + /> + <Route + path="/admin/learningObject" + render={() => { + return <AdminTemplate inner={<EducationalObjectCard />}/> + }} + /> + <Route + path="/admin/learningObjectEdit" + render={() => { + return <AdminTemplate inner={<EducationalObjectEdit />}/> + }} + /> + <Route + path="/admin/complaints" + render={() => { + return <AdminTemplate inner={<Complaints />}/> + }} + /> + <Route + path="/admin/complaint" + render={() => { + return <AdminTemplate inner={<ComplaintCard />}/> + }} + /> + <Route + path="/admin/users/teacher_requests" + render={() => { + return <AdminTemplate inner={<AproveTeacher />}/> + }} + /> + <Route + path="/admin/usersList" + render={() => { + return <AdminTemplate inner={<UserList />}/> + }} + /> + <Route + path="/admin/user" + render={() => { + return <AdminTemplate inner={<UserCard />}/> + }} + /> + <Route + path="/admin/EditUser" + render={() => { + return <AdminTemplate inner={<EditUser />}/> + }} + /> + <Route + path="/admin/permissions" + render={() => { + return <AdminTemplate inner={<UserPermissions />}/> + }} + /> + <Route + path="/admin/EditPermissions" + render={() => { + return <AdminTemplate inner={<EditRole />}/> + }} + /> + <Route + path="/admin/CreateRole" + render={() => { + return <AdminTemplate inner={<CreateRole />}/> + }} + /> + <Route + path="/admin/BlockedUsers" + render={() => { + return <AdminTemplate inner={<BlockedUser />}/> + }} + /> + <Route + path="/admin/sendEmail" + render={() => { + return <AdminTemplate inner={<SendEmail />}/> + }} + /> + <Route path='*' component={PageNotFound} /> + </Switch> + {!hideFooter && ( + <div id="Rodape_scroll"> + <EcFooter contrast={state.contrast} /> + <GNUAGPLfooter contrast={state.contrast} /> + </div> + )} + </BrowserRouter> + </React.Suspense> + } + </> + ); } \ No newline at end of file diff --git a/src/Components/Acessibility/ContrastBar.css b/src/Components/Accessibility/ContrastBar.css similarity index 86% rename from src/Components/Acessibility/ContrastBar.css rename to src/Components/Accessibility/ContrastBar.css index 17fdac74a260deeda4addbc9c4edd2a81bc8cf71..1ed1e53e513c1f3eda56d61b562b8b80e566462a 100644 --- a/src/Components/Acessibility/ContrastBar.css +++ b/src/Components/Accessibility/ContrastBar.css @@ -19,6 +19,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> .Constrasticon { width: 1em; height: 1em; + vertical-align: middle; } .contrastButton{ @@ -37,7 +38,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> overflow: auto; background-color: white; width: 100%; - + height: 1.3em; border-bottom: 1px solid #666; } @@ -45,7 +46,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> overflow: auto; background-color: black; width: 100%; - border-bottom: 1px solid white; } @@ -53,9 +53,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> color: yellow; text-decoration: underline; cursor: pointer; - width: 140px; - padding-left: 10px; - padding-right: 10px; text-align: center; vertical-align: middle; } @@ -63,19 +60,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> .text{ color: #666; cursor: pointer; - width: 140px; - padding-left: 10px; - padding-right: 10px; text-align: center; vertical-align: middle; -} - -.textRight { - float:right; - height:100%; - display: flex; -} -.textLeft { - float:left; - height:100%; } \ No newline at end of file diff --git a/src/Components/Accessibility/ContrastBar.js b/src/Components/Accessibility/ContrastBar.js new file mode 100644 index 0000000000000000000000000000000000000000..0ce7505068d7f5882f1e931b281d0dfedf64af9e --- /dev/null +++ b/src/Components/Accessibility/ContrastBar.js @@ -0,0 +1,208 @@ +/*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 terxs 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, { useEffect } from 'react'; +import './ContrastBar.css'; +import ContrastImageOn from '../../img/OnContrastIcon.png'; +import ContrastImageOff from '../../img/OffContrastIcon.png'; +import { Store } from '../../Store'; +import Grid from "@material-ui/core/Grid" +import { Button } from '@material-ui/core'; +import styled from 'styled-components'; + +/** + * Bar allowing for the toggle of the high contrast mode on the page. + */ +function ContrastBar() { + /* eslint-disable */ + + // Hook to set contrast context + const { state, dispatch } = React.useContext(Store); + + const handleScrollTo = (location) => { + if (location === "Pesquisa_scroll") + dispatch({ + type: 'HANDLE_SEARCH_BAR', + opened: !state.searchOpen + }) + document.getElementById(location).scrollIntoView({ behavior: 'smooth' }); + } + + useEffect(() => { + const testContrast = localStorage.getItem('@portalmec/contrast'); + if (testContrast) { + setContrastAction(testContrast); + } else { + setContrastAction(''); + } + }, []); + + const setContrastAction = (newContrast) => { + localStorage.setItem('@portalmec/contrast', newContrast) + return dispatch({ + type: 'SET_CONTRAST', + payload: newContrast + }) + } + + const setFontSizeAction = (newFontSize) => { + return dispatch({ + type: 'SET_FONT_SIZE', + payload: newFontSize + }) + } + + const toggleContrast = () => { + var status = (state.contrast === '' ? 'Contrast' : '') + + setContrastAction(status) + } + const incrementFontSize = () => { + document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) + 1) + "px"; + setFontSizeAction(parseInt(state.fontSize, 10) + 1); + } + const decrementFontSize = () => { + document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) - 1) + "px"; + setFontSizeAction(parseInt(state.fontSize, 10) - 1); + } + const defaultFontSize = () => { + setFontSizeAction(15); + document.getElementsByTagName("body")[0].style.fontSize = "15px"; + } + + return ( + <React.Fragment> + <StyledGrid contrast={state.contrast} xs={12}> + { + window.innerWidth > 750 ? + ( + <> + <Grid xs={8}> + <StyledButton style={{justifyContent: "flex-start"}}> + <a href="/" accessKey="1" title="Ir para a página principal alt + 1"> + <span className={`${state.contrast}text`}>Plataforma MEC de Recursos Educacionais Digitais</span> + </a> + </StyledButton> + </Grid> + <Grid xs={4} style={{display: "flex"}}> + <Grid xs={3}> + <StyledButton onClick={() => handleScrollTo("Conteudo_scroll")}> + <a className={`${state.contrast}text`} accessKey="2" title="Ir para o conteúdo alt + 2"> + Conteúdo + </a> + </StyledButton> + </Grid> + <Grid xs={3}> + <StyledButton onClick={() => handleScrollTo("Pesquisa_scroll")}> + <a className={`${state.contrast}text`} accessKey="3" title="Ir para o menu e a barra de pesquisa alt + 3"> + Menu + </a> + </StyledButton> + </Grid> + <Grid xs={3}> + <StyledButton onClick={() => handleScrollTo("Rodape_scroll")}> + <a className={`${state.contrast}text`} accessKey="4" title="Ir para o rodapé alt + 4"> + Rodapé + </a> + </StyledButton> + </Grid> + <Grid xs={3}> + <StyledButton onClick={toggleContrast}> + <a className={`${state.contrast}text`} title={state.contrast === "" ? "Ativar alto contraste" : "Desativar alto contraste"}> + <img className='Constrasticon' src={state.contrast === "" ? ContrastImageOff : ContrastImageOn} style={{ paddingRight: "15px" }} alt="Ãcone de contraste" /> + </a> + </StyledButton> + </Grid> + </Grid> + </> + ) + : + ( + <> + <Grid xs={12} style={{display: "flex"}}> + <Grid xs={3}> + <StyledButton> + <a href="/" accessKey="1" title="Ir para a página principal alt + 1"> + <span className={`${state.contrast}text`}>MEC RED</span> + </a> + </StyledButton> + </Grid> + <Grid xs={3}> + <StyledButton onClick={() => handleScrollTo("Conteudo_scroll")}> + <a className={`${state.contrast}text`} accessKey="2" title="Ir para o conteúdo alt + 2"> + Conteúdo + </a> + </StyledButton> + </Grid> + <Grid xs={2}> + <StyledButton onClick={() => handleScrollTo("Pesquisa_scroll")}> + <a className={`${state.contrast}text`} accessKey="3" title="Ir para o menu e a barra de pesquisa alt + 3"> + Menu + </a> + </StyledButton> + </Grid> + <Grid xs={3}> + <StyledButton onClick={() => handleScrollTo("Rodape_scroll")}> + <a className={`${state.contrast}text`} accessKey="4" title="Ir para o rodapé alt + 4"> + Rodapé + </a> + </StyledButton> + </Grid> + <Grid xs={1}> + <StyledButton onClick={toggleContrast}> + <a className={`${state.contrast}text`} title={state.contrast === "" ? "Ativar alto contraste" : "Desativar alto contraste"}> + <img className='Constrasticon' src={state.contrast === "" ? ContrastImageOff : ContrastImageOn} style={{ paddingRight: "15px" }} alt="Ãcone de contraste" /> + </a> + </StyledButton> + </Grid> + </Grid> + </> + ) + } + </StyledGrid> + </React.Fragment> + ); + +} + +const StyledGrid = styled(Grid) ` + display: flex; + padding-left: 15px; + padding-right: 15px; + background: ${props => props.contrast === "" ? "white" : "black"}; +` + +const StyledButton = styled(Button)` + width: 100%; +` + +/* +<div> + <a className={`${state.contrast}text`} onClick={incrementFontSize} title="Aumentar tamanho da fonte"> + A+ + </a> + <a className={`${state.contrast}text`} onClick={decrementFontSize} title="Diminuir tamanho da fonte"> + A- + </a> + <a className={`${state.contrast}text`} onClick={defaultFontSize} title="Restaurar tamanho da fonte"> + A + </a> +</div> +*/ + +export default ContrastBar; \ No newline at end of file diff --git a/src/Components/Acessibility/ContrastBar.js b/src/Components/Acessibility/ContrastBar.js deleted file mode 100644 index 985bc8126d1dce42a5d0c68222606aafd2b7cbe6..0000000000000000000000000000000000000000 --- a/src/Components/Acessibility/ContrastBar.js +++ /dev/null @@ -1,115 +0,0 @@ -/*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, { useEffect } from 'react'; -import './ContrastBar.css'; -import ContrastImageOn from '../../img/OnContrastIcon.png'; -import ContrastImageOff from '../../img/OffContrastIcon.png'; -import { Store } from '../../Store'; - -/** - * Bar allowing for the toggle of the high contrast mode on the page. - */ -function ContrastBar() { - /* eslint-disable */ - - // Hook to set contrast context - const { state, dispatch } = React.useContext(Store); - - useEffect(() => { - const testContrast = localStorage.getItem('@portalmec/contrast'); - if (testContrast) { - setContrastAction(testContrast); - } else { - setContrastAction(''); - } - - }, []); - - const setContrastAction = (newContrast) => { - localStorage.setItem('@portalmec/contrast', newContrast) - return dispatch({ - type: 'SET_CONTRAST', - payload: newContrast - }) - } - - const setFontSizeAction = (newFontSize) => { - return dispatch({ - type: 'SET_FONT_SIZE', - payload: newFontSize - }) - } - - const toggleContrast = () => { - var status = (state.contrast === '' ? 'Contrast' : '') - - setContrastAction(status) - } - const incrementFontSize = () => { - document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) + 1) + "px"; - setFontSizeAction(parseInt(state.fontSize, 10) + 1); - } - const decrementFontSize = () => { - document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) - 1) + "px"; - setFontSizeAction(parseInt(state.fontSize, 10) - 1); - } - const defaultFontSize = () => { - setFontSizeAction(15); - document.getElementsByTagName("body")[0].style.fontSize = "15px"; - } - - return ( - <React.Fragment> - <div className={`${state.contrast}bar`}> - <div className='textRight'> - <div> - <a className={`${state.contrast}text`} onClick={incrementFontSize} title="Aumentar tamanho da fonte"> - A+ - </a> - <a className={`${state.contrast}text`} onClick={decrementFontSize} title="Diminuir tamanho da fonte"> - A- - </a> - <a className={`${state.contrast}text`} onClick={defaultFontSize} title="Restaurar tamanho da fonte"> - A - </a> - </div> - <div onClick={toggleContrast}> - { - state.contrast === "" ? - ( - <a className={`${state.contrast}text`} title="Ativar modo de alto contraste"> - <img className='Constrasticon' src={ContrastImageOff} style={{ marginRight: 5 }} alt="Ãcone de contraste" /> - </a> - ) - : - ( - <a className={`${state.contrast}text`} title="Desativar modo de alto contraste"> - <img className='Constrasticon' src={ContrastImageOn} style={{ marginRight: 5 }} alt="Ãcone de contraste" /> - </a> - ) - } - </div> - </div> - </div> - </React.Fragment> - ); - -} - -export default ContrastBar; \ No newline at end of file diff --git a/src/Components/ButtonAvaliarRecurso.js b/src/Components/ButtonAvaliarRecurso.js index 0a7d59a10b1aa0743d0208692e0aec7bc39b3412..06d6305977e90c105dbdcf7965b04bca33cb0d48 100644 --- a/src/Components/ButtonAvaliarRecurso.js +++ b/src/Components/ButtonAvaliarRecurso.js @@ -12,7 +12,7 @@ export default function ButtonAvaliarRecurso (props) { ) } -const StyledButton = styled(Button)` +export const StyledButton = styled(Button)` &:hover { background-color: ${props => props.contrast === "" ? "#ed6f00" : "black"} !important; } diff --git a/src/Components/Carousel.js b/src/Components/Carousel.js deleted file mode 100644 index 1275ad32b170b2471934f3902109b5dc84171afb..0000000000000000000000000000000000000000 --- a/src/Components/Carousel.js +++ /dev/null @@ -1,645 +0,0 @@ -/*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 styled from 'styled-components'; -import Grid from '@material-ui/core/Grid'; - -/*Importação de imagens para o componente*/ -import Handshake from "../img/termos/handshake.svg" -import Pessoa from "../img/termos/Pessoa.svg" -import Email from "../img/termos/Email.svg" -import Seguranca from "../img/termos/Seguranca.svg" -import Arrow_down from "../img/termos/Arrow_down.svg"; -import Arrow_double from "../img/termos/Arrow_double.svg"; -import Like from "../img/termos/Like.svg"; -import Unlike from "../img/termos/Unlike.svg"; -import Line from "../img/termos/Line.svg"; -import Entenda from "../img/termos/Entenda.svg"; -import V from "../img/termos/V.svg"; -//Image Import -import { Aberto } from "ImportImages.js"; -import { Fechado } from "ImportImages.js"; -import { Arrow_O } from "ImportImages.js"; -import { Arrow_O_1 } from "ImportImages.js"; -import { OrthogonalLineUp } from "ImportImages.js"; -import { OrthogonalLineDown } from "ImportImages.js"; - -const Slide = styled.div` - border: ${props => props.contrast === "" ? "" : "1px solid white"}; - position: absolute; - height: 500px; - width: 1366px; - - h2{ - font-family: "Pompiere", regular; - font-size: 44px; - line-height: 120%; - color: #FFFFFF; - } - - h3{ - font-family: "Roboto", regular; - font-size: 27px; - line-height: 120%; - color: #FFFFFF; - } - - p{ - font-family: "Roboto", regular; - font-size: 20px; - line-height: 120%; - color: #FFFFFF; - text-align: left; - } - - .container{ - position: absolute; - height: auto; - width: auto; - margin: 70px 180px 90px; - } - - - .tmpl1{ - background: ${props => props.contrast === "" ? "#00BCD4" : "black"}; - height: inherit; - width: inherit; - display: flex; - align-items: center; - - .box-text{ - position: relative; - float: left; - padding-right: 10px; - padding-left: 10px; - - p { - margin: 0 0 10px; - } - } - - .box-image{ - position: relative; - float: right; - } - } - - .tmpl2{ - height: inherit; - width: inherit; - display: flex; - align-items: center; - background: ${props => props.contrast === "" ? "#673AB7" : "black"}; - - .title{ - padding-bottom: 50px; - } - - .images{ - position: absolute; - display: table-row; - } - - .arrow{ - display: table-row; - position: absolute; - margin-left: 55px; - margin-top: -15px; - width: 282px; - } - - .circle{ - display: table-row; - position: absolute; - margin-top: -100px; - margin-left: 795px; - width: 191px; - } - - h2 { - margin-top: 20px; - margin-bottom: 10px; - font-weight: 500; - } - - .box-text{ - p{ - font-size: 18px; - line-height: 25px; - } - - position: relative; - - } - } - - .tmpl3{ - height: inherit; - width: inherit; - display: flex; - align-items: center; - background: ${props => props.contrast === "" ? "#E81F4F" : "black"}; - - .title{ - position: relative; - padding-left: 10px; - h3{ - line-height: 40px; - } - } - - .box-text1{ - .text{ - padding-top: 20px; - } - - .content{ - display: table-row; - - p{ - display: table-cell; - font-size: 18px; - line-height: 25px; - vertical-align: middle; - } - - img{ - position: relative; - left: 0; - margin-right: 20px; - display: table-cell; - vertical-align: middle; - margin: 10px 20px 10px -10px; - } - - } - } - - .box-text2{ - top: -50px; - .content{ - p{ - padding-bottom: 20px; - } - - img{ - margin-left: -65px; - margin-top: 25px; - } - - .twoArrow{ - margin-top: -5px; - } - } - } - } - - .tmpl4{ - height: inherit; - width: inherit; - display: flex; - align-items: center; - background: ${props => props.contrast === "" ? "#FF7F00" : "black"}; - - h2{ - padding-bottom: 20px; - } - - p{ - font-size: 20px; - line-height: 25px; - vertical-align: middle; - } - - .box-images{ - height: inherit; - display: table-row; - padding-top: 50px; - } - - img{ - display: table-cell; - vertical-align: middle; - top: 40px; - } - - - } - - .tmpl5{ - height: inherit; - width: inherit; - display: flex; - align-items: center; - background: ${props => props.contrast === "" ? "#1AB9DE" : "black"}; - - .title{ - display: table-row; - align-items: center; - - img{ - display: table-cell; - margin-right: 30px; - } - - h2{ - display: table-cell; - text-align: center; - vertical-align: middle; - } - } - - .box-text { - margin-top: 20px; - p{ - font-size: 17px; - font-weight: 15px; - } - } - - } - - .tmpl6{ - height: inherit; - width: inherit; - display: flex; - align-items: center; - background: ${props => props.contrast === "" ? "#673AB7" : "black"}; - - .box-text-1{ - h3{ - margin-bottom: 20px; - font-size: 27px; - } - p{ - margin-bottom: 20px; - font-size: 18px; - margin-top: 0px; - } - - - .licences{ - padding: 35px 150px 50px 35px; - margin-top: 50pz; - background-image: url(${Entenda}); - background-repeat: no-repeat; - background-size: cover; - p::before{ - content: url(${V}); - } - p{ - padding-left: 20px; - font-family: "Kalam", regular; - font-size: 24px; - white-space: nowrap; - } - .row{ - padding-bottom: 5px; - } - } - } - - - .box-text-2{ - background-image: url(${OrthogonalLineUp}),url(${OrthogonalLineDown}); - background-repeat: no-repeat; - background-position: left top, right bottom; - padding-top: 30px; - padding-left: 50px; - p{ - font-size: 15px; - padding-bottom: 15px; - } - - .licenses_type{ - margin-left: -20px; - font-size: 22px; - font-weight: bold; - text-align: right; - white-space: nowrap; - } - .row { - margin-right: -15px; - margin-left: -15px; - - p { - padding-left: 15px; - } - } - } - - } - - .tmpl7{ - height: inherit; - width: inherit; - display: flex; - align-items: center; - background: ${props => props.contrast === "" ? "#E81F4F" : "black"}; - - .title{ - h2{ - font-family: Roboto; - font-size: 44px; - } - } - - .box-text{ - margin-top: 20px; - p{ - line-height: 20px; - font-family: "Roboto"; - font-size: 18px; - } - } - - .rodape{ - margin-top: 40px; - p{ - line-height: 20px; - font-family: "Pompiere", regular; - font-size: 28px; - text-align: center; - } - span{ - text-decoration: underline; - font-family: "Pompiere", regular; - line-height: 20px; - font-size: 28px; - cursor: pointer; - } - } - } - -` - -const CarouselStyled = styled(Carousel)` - - .carousel.carousel-slider { - height: 500px !important; - } - - .carousel .slider-wrapper.axis-horizontal { - height: 500px !important; - } - .carousel .control-dots { - position: absolute !important; - padding-bottom: 20px; - } - - .carousel .control-arrow:before, .carousel.carousel-slider .control-arrow:before { - margin: 0 5px; - display: inline-block; - content: ' '; - } - .carousel .control-arrow { - background: transparent !important; - } - .m4d-icons { - size: 50px - } - - -` -export default function TermsCarousel({ contrast }) { - return ( - <CarouselStyled - showThumbs={false} - showStatus={false} - transitionTime={1000} - - width={"1366px"} - - > - <div > - <Slide contrast={contrast}> - <div className="tmpl1"> - <div className="container"> - <Grid container spacing={0}> - <Grid item xs={6} > - <div className="box-text"> - <p>A Plataforma Integrada MEC RED é parte do Compromisso 6 do 3º Plano de Ação da Parceria para Governo Aberto (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> - </div> - </Grid> - <Grid style={{ display: "flex", justifyContent: "center" }} item xs={6}> - <div className="box-image"> - <img src={Handshake} alt="handshake" /> - </div> - </Grid> - </Grid> - </div> - </div> - </Slide> - - </div> - <div> - <Slide contrast={contrast}> - <div className="tmpl2"> - <div className="container"> - <div className="title"> - <h2>O que é a Plataforma Integrada MEC RED e como ela está organizada?</h2> - <div className="images"> - <div className="arrow"> - <img src={Arrow_O} alt="Arrow_O" /> - </div> - <div className="circle"> - <img src={Arrow_O_1} alt="Arrow_O_1" /> - </div> - </div> - </div> - <Grid container> - <Grid className="box-text" item xs={6}> - <p>Uma plataforma interativa, colaborativa e criada em software livre, que disponibiliza conteúdos do acervo do MEC e indica conteúdos de parceiros com o objetivo de formar uma rede ativa de educadores interessados em usar, criar e compartilhar recursos educacionais digitais.</p> - </Grid> - <Grid className="box-text" item xs={6}> - <p><strong>Repositório</strong> de recursos educacionais digitais que permite aos usuários cadastrados a publicação de seus materiais e <strong>Referatório</strong> que aponta links para conteúdos em sites externos.</p> - </Grid> - </Grid> - </div> - </div> - </Slide> - </div> - <div> - <Slide contrast={contrast}> - <div className="tmpl3"> - <div className="container"> - <Grid className="title" container spacing={1}> - <Grid item xs={12}> - <h3>Os recursos educacionais disponibilizados<br /> podem ser de dois tipos:</h3> - </Grid> - </Grid> - <Grid className="box-text1" container spacing={1}> - <Grid className="text" item xs={8}> - <div className="content"> - <img src={Aberto} alt="Aberto" /> - <p><strong>Abertos</strong>: recursos sem nenhuma restrição de acesso e<br /> com flexibilidade quanto ao uso ou reuso.</p> - </div> - <div className="content"> - <img src={Fechado} alt="Fechado" /> - <p><strong>Fechados</strong>: recursos com alguma restrição de acesso, uso<br /> ou reuso, como aqueles que, para acesso, há demanda de<br /> cadastro ou que têm licenças restritivas.</p> - </div> - </Grid> - <Grid className="box-text2" item xs={4}> - <div className="content"> - <img src={Arrow_down} alt="Arrow_down" /> - <p>Como repositório, a Plataforma hospeda somente Recursos Educacionais Abertos (REA). Todo conteúdo inserido por usuários deve ser aberto.</p> - </div> - <div className="content"> - <img alt="" className="twoArrow" src={Arrow_double} /> - <p>Como referatório, a Plataforma aponta links para parceiros, e<br /> esses recursos podem ser abertos ou fechados.</p> - </div> - </Grid> - </Grid> - </div> - </div> - </Slide> - </div> - <div> - <Slide contrast={contrast}> - <div class="tmpl4"> - <div class="container"> - <Grid container spacing={5}> - <Grid item xs={6}> - <h2>Como se cadastrar?</h2> - <div> - <p>Para criar uma conta, o usuário deverá clicar no botão “Cadastre-se†na página inicial da Plataforma e fazer um cadastro utilizando um endereço de e-mail e criando uma senha.</p> - </div> - </Grid> - <Grid item xs={2} style={{ alignSelf: "center" }}> <img style={{ width: "150px", height: "150px" }} src={Pessoa} alt="Pessoa" /> </Grid> - <Grid item xs={2} style={{ alignSelf: "center" }}> <img style={{ width: "150px", height: "150px" }} src={Email} alt="Email" /> </Grid> - <Grid item xs={2} style={{ alignSelf: "center" }}> <img style={{ width: "150px", height: "150px" }} src={Seguranca} alt="Seguranca" /> </Grid> - </Grid> - </div> - </div> - </Slide> - </div> - <div> - <Slide contrast={contrast}> - <div class="tmpl5"> - <div class="container"> - <Grid container justify="space-evenly" spacing={12}> - <Grid style={{ paddingRight: "40px" }} item xs={6}> - <div class="title"> - <img src={Like} alt="Like" /> - <h2>O que publicar?</h2> - </div> - <img src={Line} alt="Line" /> - <div class="box-text"> - <p>Conteúdos de cunho educacional e pertinentes ao assunto no qual estão inseridos, de autoria do usuário, de autoria coletiva (com consentimento dos demais autores) ou que estejam no domÃnio público. </p> - </div> - </Grid> - <Grid item xs={6}> - <div class="title"> - <img src={Unlike} alt="Unlike" /> - <h2>O que não publicar?</h2> - </div> - <img src={Line} alt="Line" /> - <div class="box-text"> - <p>Materiais ofensivos, pornográficos, relacionados a atividades ilegais, que invadam a privacidade de terceiros, que violem a legislação de Direito Autoral ou os Direitos Humanos. Propagandas, conteúdos com vÃrus, spam ou comentários abusivos.</p> - </div> - </Grid> - </Grid> - </div> - </div> - </Slide> - </div> - <div> - <Slide contrast={contrast}> - <div className="tmpl6"> - <div className="container"> - <Grid container> - <Grid className="box-text-1" item xs={7}> - <h3>Direitos do autor e licenças de uso</h3> - <p>Ao inserir um novo material de sua autoria no Repositório, o usuário deverá escolher um dos tipos de licença aberta disponÃveis na Plataforma:</p> - <div className="licences"> - <Grid className="row" container> - <Grid item xs={6}> - <p>CC-BY</p> - </Grid> - <Grid item xs={6}> - <p>CC-BY-SA</p> - </Grid> - </Grid> - <Grid className="row" container> - <Grid item xs={6}> - <p>CC-BY-NC</p> - </Grid> - <Grid item xs={6}> - <p>CC-BY-NC-SA</p> - </Grid> - </Grid> - </div> - </Grid> - <Grid className="box-text-2" item xs={5}> - <Grid className="row" container> - <Grid item xs={2}> - <p className="licenses_type">CC-BY</p> - </Grid> - <Grid item xs={10}> - <p> significa que o autor permite que distribuam, remixem, adaptem e criem a partir do seu trabalho, desde que lhe atribuam o devido crédito pela criação original</p> - </Grid> - </Grid> - <Grid className="row" container> - <Grid item xs={2}> - <p className="licenses_type">NC</p> - </Grid> - <Grid item xs={10}> - <p> indica que as criações elaboradas a partir do trabalho do autor podem ser utilizadas somente para fins não comerciais (se não houver esta especificação, o novo recurso poderá ser utilizado para fins comerciais)</p> - </Grid> - </Grid> - <Grid className="row" container> - <Grid item xs={2}> - <p className="licenses_type">SA</p> - </Grid> - <Grid item xs={10}> - <p> quer dizer que as novas criações devem ser licenciadas sob termos idênticos aos do trabalho original</p> - </Grid> - </Grid> - </Grid> - </Grid> - </div> - </div> - </Slide> - </div> - <div> - <Slide contrast={contrast}> - <div class="tmpl7"> - <div class="container"> - <Grid container> - <Grid className="title" item xs={4}> - <h2>Respeitamos<br /> a sua privacidade</h2> - </Grid> - <Grid className="box-text" item xs={8}> - <p>Além de solicitar alguns dados pessoais para o cadastro, a Plataforma coleta, de forma automática, os dados não pessoais relativos à interação dos usuários no sistema. Esses dados nunca serão fornecidos para fins comerciais, assim como nunca serão compartilhados quaisquer dados pessoais que possam identificar o usuário.</p> - <p>Os dados anônimos poderão ser utilizados para fins de melhoria da plataforma, transparência e para o uso em pesquisas.</p> - </Grid> - </Grid> - <div class="rodape col-md-12"> - <p>Dúvidas? Leia a Ãntegra dos <span ng-click="hide()">Termos de Uso</span> ou fale conosco por meio do <a style={{ color: "#fff" }} href="contato">formulário de contato</a>.</p> - </div> - </div> - </div> - </Slide> - </div> - </CarouselStyled> - ) -} diff --git a/src/Components/Header.js b/src/Components/Header.js index 30313f034f8502768895c6af122d424ca6218dd9..fb512f3c13fc314a98eb864fc7e8d67e26694952 100644 --- a/src/Components/Header.js +++ b/src/Components/Header.js @@ -132,6 +132,7 @@ export default function Header(props) { windowWidth > 990 ? ( <React.Fragment> + <div id="Pesquisa_scroll"></div> <MenuBar openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} /> { state.searchOpen && @@ -143,7 +144,8 @@ export default function Header(props) { : ( <React.Fragment> - <MenuBarMobile contrast={state.contrast} openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} /> + <div id="Pesquisa_scroll"></div> + <MenuBarMobile contrast={state.contrast} openSearchBar={handleClickSearch} openSignUp={handleSignUp} openLogin={handleLogin} /> { state.searchOpen && <SearchBar /> diff --git a/src/Components/Modal.js b/src/Components/Modal.js deleted file mode 100644 index 0dea20d0564cbe9733e257ec06f7122248703300..0000000000000000000000000000000000000000 --- a/src/Components/Modal.js +++ /dev/null @@ -1,84 +0,0 @@ -/*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 { makeStyles } from '@material-ui/styles'; -import Modal from '@material-ui/core/Modal'; - -import TermsCarousel from './Carousel'; - -import Backdrop from '@material-ui/core/Backdrop'; -import Fade from '@material-ui/core/Fade'; -import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined'; - -const useStyles = makeStyles(theme => ({ - modal: { - display: "flex", - alignItems: "center", - justifyContent: "center" - }, - paper: { - border: '2px solid #000', - boxShadow: " 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)" - }, - carousel: { - width: "750px", - height: "370px", - - } -})); - -export default function TransitionsModal({ contrast }) { - const classes = useStyles(); - const [open, setOpen] = React.useState(false); - - const handleOpen = () => { - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - }; - - return ( - <div style={{ display: "flex", justifyContent: "center" }}> - <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" /> - <button style={{ background: "none", border: "none", color: "#fff", verticalAlign: "center" }} type="button" onClick={handleOpen}> - <VisibilityOutlinedIcon style={{ verticalAlign: "middle" }} /> <spam style={{ verticalAlign: "middle", fontWeight: "600", fontSize: "14px" }}>VEJA A VERSÃO RESUMIDA</spam> - </button> - <Modal - aria-labelledby="transition-modal-title" - aria-describedby="transition-modal-description" - className={classes.modal} - open={open} - onClose={handleClose} - closeAfterTransition - BackdropComponent={Backdrop} - BackdropProps={{ - timeout: 500, - }} - > - <Fade in={open}> - <div> - <TermsCarousel contrast={contrast}/> - </div> - </Fade> - </Modal> - </div> - ); -} diff --git a/src/Components/SnackbarComponent.js b/src/Components/SnackbarComponent.js index 60692e9c43f7298f34b9eed84eda31ab36cb640b..9017c2dc36b44ecb3daa836d5f534e5e1672e948 100644 --- a/src/Components/SnackbarComponent.js +++ b/src/Components/SnackbarComponent.js @@ -16,11 +16,14 @@ 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, { /*useContext*/ } from 'react' import Alert from '../Components/Alert.js'; import Snackbar from '@material-ui/core/Snackbar'; +//import { Store } from '../Store.js' export default function SnackbarComponent(props) { +// const { state } = useContext(Store) + return ( <Snackbar open={props.snackbarOpen} autoHideDuration={3000} onClose={props.handleClose} anchorOrigin={{ vertical: 'top', horizontal: 'right' }} diff --git a/src/Components/UploadPageComponents/GetIconByName.js b/src/Components/UploadPageComponents/GetIconByName.js index d3c40d376b0032dea30ee2f22e423b4f189c5f38..b19857c0f9af5743e1045e949ee5c93892889cb4 100644 --- a/src/Components/UploadPageComponents/GetIconByName.js +++ b/src/Components/UploadPageComponents/GetIconByName.js @@ -14,7 +14,6 @@ import { ReactComponent as VideoIcon } from '../../img/object_type_icons/object- import { ReactComponent as AnimacaoIcon } from '../../img/object_type_icons/object-type_animacao.svg' import { ReactComponent as PlanoAulaIcon } from '../../img/object_type_icons/object-type_plano-de-aula.svg' - import { ReactComponent as Arte } from '../../img/subject_icons/subject_arte.svg' import { ReactComponent as Biologia } from '../../img/subject_icons/subject_biologia.svg' import { ReactComponent as CienciasNatureza } from '../../img/subject_icons/subject_ciencias-da-natureza.svg' @@ -125,7 +124,7 @@ export default function GetIconByName(objName) { case "vÃdeo": return <VideoIcon className="icon" />; case "animação": - return <AnimacaoIcon className="icon" />; + return <AnimacaoIcon className="icon"/>; default: return <OutrosIcon className="icon" />; } diff --git a/src/Components/UploadPageComponents/StyledComponents.js b/src/Components/UploadPageComponents/StyledComponents.js index 755942670cd73307035f3de0bc9fdcb641deb6d7..f09077acd3440bfc2f8453937b668f8ad3bd842e 100644 --- a/src/Components/UploadPageComponents/StyledComponents.js +++ b/src/Components/UploadPageComponents/StyledComponents.js @@ -302,11 +302,13 @@ export const ObjTypeBox = styled.div` height : 100px; width : 100px; border-radius : 10px; - background-color : ${props => props.contrast === "" ? props.checked ? "#00bcd4" : "#f4f4f4" : "black"}; - color : ${props => props.contrast === "" ? props.checked ? "#fff" : "#00bcd4" : "yellow"}; - text-decoration : ${props => props.contrast === "Contrast" ? props.checked ? "none" : "underline" : "none"}; - border : ${props => props.contrast === "Contrast" ? props.checked ? "1px solid white" : "0" : "0"}; + background-color : ${props => props.contrast === "" ? "#f4f4f4" : "black"}; + border : ${props => props.contrast === "Contrast" ? props.checked ? "1px solid white" : "0" : props.checked ? "1px solid #00bcd4" : "0"}; font-weight : ${props => props.checked ? "bold" : "lighter"}; + + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; span { padding-top : 5%; @@ -315,22 +317,20 @@ export const ObjTypeBox = styled.div` justify-content : center; .icon { - color : ${props => props.contrast === "" ? props.checked ? "#fff" : "#00bcd4" : "white"}; + color : #00bcd4; align-self : center; height : 48px; width : 48px; } p { + color : ${props => props.contrast === "" ? "#00bcd4" : "yellow"}; + text-decoration : ${props => props.contrast === "Contrast" ? props.checked ? "none" : "underline" : "none"}; height : 28px; font-size : 14px; text-align : center; line-height : 14px; } - - svg path { - fill : ${props => props.contrast === "" ? props.checked ? "#fff" : "#00bcd4" : "white"}; - } } ` diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js index b622b7934b583c54cc7b5a8e2766f58d49c3c35f..b64c73ce67b73ea8226457aef9e4fb2fa2bd9996 100644 --- a/src/Pages/CollectionPage.js +++ b/src/Pages/CollectionPage.js @@ -99,7 +99,6 @@ export default function CollectionPage(props) { imgsrc={collection.owner.avatar ? apiDomain + collection.owner.avatar : noAvatar} /> </Grid> - <Grid item md={5}> <CollectionDescription contrast={state.contrast} diff --git a/src/Pages/SummarizedUserTerms.js b/src/Pages/SummarizedUserTerms.js new file mode 100644 index 0000000000000000000000000000000000000000..b48e5369dcd4911854a0ea28610cf3a64d634ca6 --- /dev/null +++ b/src/Pages/SummarizedUserTerms.js @@ -0,0 +1,400 @@ +/*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, { useContext, useState } from 'react'; +import { Store } from '../Store' +import styled from 'styled-components'; +import Grid from '@material-ui/core/Grid'; +import Fab from '@material-ui/core/Fab'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; + +import { StyledButton } from '../Components/ButtonAvaliarRecurso.js'; +import { BannerStyle } from './UserTerms'; + +/*Importação de imagens para o componente*/ +import Handshake from "../img/termos/handshake.svg" +import Pessoa from "../img/termos/Pessoa.svg" +import Email from "../img/termos/Email.svg" +import Seguranca from "../img/termos/Seguranca.svg" +import Like from "../img/termos/Like.svg"; +import Unlike from "../img/termos/Unlike.svg"; +import Line from "../img/termos/Line.svg"; + +import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward'; +import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward'; +//Image Import +import { Aberto } from "ImportImages.js"; +import { Fechado } from "ImportImages.js"; + +const theme = createMuiTheme({ + palette: { + primary: { + light: 'orange', + main: 'orange', + dark: 'orange', + contrastText: '#fff', + }, + secondary: { + light: 'black', + main: 'black', + dark: 'black', + contrastText: 'yellow', + }, + }, + }); + + +export default function SummarizedUserTerms() { + const { state } = useContext(Store) + const [slide, updateSlide] = useState(0); + + const handleGoUp = () => { + console.log(slide - 1); + if (slide > 1) { + var element = document.getElementById("slide" + (slide - 1).toString()); + if (element.offsetHeight < state.windowSize.height) element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' }) + else element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'center' }) + updateSlide(slide - 1); + } + } + + const handleGoDown = () => { + if (slide < 7) { + var element = document.getElementById("slide" + (slide + 1).toString()); + if (element.offsetHeight < state.windowSize.height) element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' }) + else element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'center' }) + updateSlide(slide + 1); + } + } + + return ( + <Content contrast={state.contrast}> + <link href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap" rel="stylesheet" /> + <BannerStyle contrast={state.contrast}> + <h2 style={{ width: "100%", textAlign: "center", marginTop: "0px", paddingTop: "6rem", marginBottom: "16px", fontSize: "52px", fontFamily: "'Pompiere', cursive", color: "#fff", fontWeight: "500" }}>RESUMO DOS TERMOS DE USO</h2> + <div style={{ display: "flex", justifyContent: "center" }}> + <StyledButton contrast={state.contrast} onClick={() => window.location.href='/termos'}> + Se preferir, veja a versão completa + </StyledButton> + </div> + </BannerStyle> + <FloatingButtons> + <ThemeProvider theme={theme}> + <Fab + color={state.contrast === "" ? "primary": "secondary"} + aria-label="slide superior" + onClick={handleGoUp} + style={state.contrast === "" ? {} : {border: "1px solid white"}} + > + <ArrowUpwardIcon/> + </Fab> + </ThemeProvider> + <ThemeProvider theme={theme}> + <Fab + color={state.contrast === "" ? "primary": "secondary"} + aria-label="slide inferior" + onClick={handleGoDown} + style={state.contrast === "" ? {} : {border: "1px solid white"}} + > + <ArrowDownwardIcon/> + </Fab> + </ThemeProvider> + </FloatingButtons> + <div className="slides"> + <div id="slide1" className="tmpl1"> + <div className="container"> + <Grid container> + <Grid item xs={12} md={8}> + <div className="box-text"> + <p>A Plataforma Integrada MEC RED é parte do Compromisso 6 do 3º Plano de Ação da Parceria para Governo Aberto (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> + </div> + </Grid> + <Grid style={{ display: "flex", justifyContent: "center" }} item xs={12} md={4}> + <div className="box-image"> + <img src={Handshake} alt="handshake" /> + </div> + </Grid> + </Grid> + </div> + </div> + <div id="slide2" className="tmpl2"> + <div className="container"> + <div className="title"> + <p>O que é a Plataforma Integrada MEC RED e como ela está organizada?</p> + </div> + <Grid container> + <Grid className="box-text" item xs={12} md={6}> + <p>Uma plataforma interativa, colaborativa e criada em software livre, que disponibiliza conteúdos do acervo do MEC e indica conteúdos de parceiros com o objetivo de formar uma rede ativa de educadores interessados em usar, criar e compartilhar recursos educacionais digitais.</p> + </Grid> + <Grid className="box-text" item xs={12} md={6}> + <p><strong>Repositório</strong> de recursos educacionais digitais que permite aos usuários cadastrados a publicação de seus materiais e <strong>Referatório</strong> que aponta links para conteúdos em sites externos.</p> + </Grid> + </Grid> + </div> + </div> + <div id="slide3" className="tmpl3"> + <div className="container"> + <Grid className="title" container> + <Grid item xs={12}> + <p>Os recursos educacionais disponibilizados podem ser de dois tipos:</p> + </Grid> + </Grid> + <Grid container> + <Grid item xs={12} md={6}> + <div className="box-text"> + <img src={Aberto} alt="Aberto" /> + <p><strong>Abertos</strong>: recursos sem nenhuma restrição de acesso e<br /> com flexibilidade quanto ao uso ou reuso.</p> + </div> + <div className="box-text"> + <img src={Fechado} alt="Fechado" /> + <p><strong>Fechados</strong>: recursos com alguma restrição de acesso, uso<br /> ou reuso, como aqueles que, para acesso, há demanda de<br /> cadastro ou que têm licenças restritivas.</p> + </div> + </Grid> + <Grid item xs={12} md={6}> + <Grid item xs={12} md={12}> + <div className="box-text"> + <p>Como repositório, a Plataforma hospeda somente Recursos Educacionais Abertos (REA). Todo conteúdo inserido por usuários deve ser aberto.</p> + </div> + </Grid> + <Grid item xs={12} md={12}> + <div className="box-text"> + <p>Como referatório, a Plataforma aponta links para parceiros, e<br /> esses recursos podem ser abertos ou fechados.</p> + </div> + </Grid> + </Grid> + </Grid> + </div> + </div> + <div id="slide4" className="tmpl4"> + <div className="container"> + <Grid container> + <Grid item xs={12} md={6}> + <p className="title">Como se cadastrar?</p> + <div className="box-text"> + <p>Para criar uma conta, o usuário deverá clicar no botão “Cadastre-se†na página inicial da Plataforma e fazer um cadastro utilizando um endereço de e-mail e criando uma senha.</p> + </div> + </Grid> + <Grid item xs={4} md={2} style={{ alignSelf: "center" }}> <img style={{ width: "10vh", height: "10vh", verticalAlign: "middle", margin: "auto", display: "block" }} src={Pessoa} alt="Pessoa" /> </Grid> + <Grid item xs={4} md={2} style={{ alignSelf: "center" }}> <img style={{ width: "10vh", height: "10vh", verticalAlign: "middle", margin: "auto", display: "block" }} src={Email} alt="Email" /> </Grid> + <Grid item xs={4} md={2} style={{ alignSelf: "center" }}> <img style={{ width: "10vh", height: "10vh", verticalAlign: "middle", margin: "auto", display: "block" }} src={Seguranca} alt="Seguranca" /> </Grid> + </Grid> + </div> + </div> + <div id="slide5" className="tmpl5"> + <div className="container"> + <Grid container> + <Grid item xs={12} md={6}> + <div className="title"> + <img src={Like} alt="Like" /> + <p>O que publicar?</p> + </div> + <img src={Line} alt="Line" style={{margin: "auto", display: "block"}}/> + <div className="box-text"> + <p className="box-text">Conteúdos de cunho educacional e pertinentes ao assunto no qual estão inseridos, de autoria do usuário, de autoria coletiva (com consentimento dos demais autores) ou que estejam no domÃnio público. </p> + </div> + </Grid> + <Grid item xs={12} md={6}> + <div className="title"> + <img src={Unlike} alt="Unlike" /> + <p>O que não publicar?</p> + </div> + <img src={Line} alt="Line" style={{margin: "auto", display: "block"}}/> + <div className="box-text"> + <p className="box-text">Materiais ofensivos, pornográficos, relacionados a atividades ilegais, que invadam a privacidade de terceiros, que violem a legislação de Direito Autoral ou os Direitos Humanos. Propagandas, conteúdos com vÃrus, spam ou comentários abusivos.</p> + </div> + </Grid> + </Grid> + </div> + </div> + <div id="slide6" className="tmpl6"> + <div className="container"> + <Grid container> + <Grid item xs={12} md={7}> + <div className="title"> + <p>Direitos do autor e licenças de uso</p> + </div> + <div className="box-text"> + <p>Ao inserir um novo material de sua autoria no Repositório, o usuário deverá escolher um dos tipos de licença aberta disponÃveis na Plataforma:</p> + </div> + <div className="box-text"> + <Grid container> + <Grid item xs={3} className="licenses"> + <p>CC-BY</p> + </Grid> + <Grid item xs={3} className="licenses"> + <p>CC-BY-SA</p> + </Grid> + <Grid item xs={3} className="licenses"> + <p>CC-BY-NC</p> + </Grid> + <Grid item xs={3} className="licenses"> + <p>CC-BY-NC-SA</p> + </Grid> + </Grid> + </div> + </Grid> + <Grid item xs={12} md={5}> + <Grid container> + <Grid item xs={12} md={2} className="licenses"> + <p>CC-BY</p> + </Grid> + <Grid item xs={12} md={10} className="box-text"> + <p> significa que o autor permite que distribuam, remixem, adaptem e criem a partir do seu trabalho, desde que lhe atribuam o devido crédito pela criação original</p> + </Grid> + </Grid> + <Grid container> + <Grid item xs={12} md={2} className="licenses"> + <p>NC</p> + </Grid> + <Grid item xs={12} md={10} className="box-text"> + <p> indica que as criações elaboradas a partir do trabalho do autor podem ser utilizadas somente para fins não comerciais (se não houver esta especificação, o novo recurso poderá ser utilizado para fins comerciais)</p> + </Grid> + </Grid> + <Grid container> + <Grid item xs={12} md={2} className="licenses"> + <p>SA</p> + </Grid> + <Grid item xs={12} md={10} className="box-text"> + <p> quer dizer que as novas criações devem ser licenciadas sob termos idênticos aos do trabalho original</p> + </Grid> + </Grid> + </Grid> + </Grid> + </div> + </div> + <div id="slide7" className="tmpl7"> + <div className="container"> + <Grid container xs={12}> + <Grid className="title" item xs={12} md={6}> + <p>Respeitamos a sua privacidade</p> + </Grid> + <Grid item xs={12} md={6}> + <Grid item xs={12} md={12} className="box-text"> + <p>Além de solicitar alguns dados pessoais para o cadastro, a Plataforma coleta, de forma automática, os dados não pessoais relativos à interação dos usuários no sistema. Esses dados nunca serão fornecidos para fins comerciais, assim como nunca serão compartilhados quaisquer dados pessoais que possam identificar o usuário.</p> + </Grid> + <Grid item xs={12} md={12} className="box-text"> + <p>Os dados anônimos poderão ser utilizados para fins de melhoria da plataforma, transparência e para o uso em pesquisas.</p> + </Grid> + </Grid> + </Grid> + <Grid container xs={12}> + <div className="title"> + <p>Dúvidas? Leia a <a href="/termos">versão completa dos termos de uso</a> ou fale conosco por meio do <a href="/contato">formulário de contato</a>.</p> + </div> + </Grid> + </div> + </div> + </div> + </Content> + ) +} + +const FloatingButtons = styled.div` + display: flex; + flex-direction: column; + position: fixed !important; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + right: 15px; + Fab { + margin: 15px; + } +` + +const Content = styled.div` + + color: white; + + text-align: left; + + p { + margin: 0; + } + + a { + text-decoration: ${props => props.contrast === "" ? "none" : "yellow underline"}; + color: ${props => props.contrast === "" ? "" : "yellow"}; + } + + .slides > div { + min-height: 500px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid ${props => props.contrast === "" ? "inherit" : "white"}; + border-radius: 20px; + margin: 25px; + } + + .box-text { + font-family: "Roboto", regular; + display: flex; + padding: 25px; + img { + width: 10vh; + height: 10vh; + vertical-align: middle; + } + font-size: 1.1em; + } + + .title { + font-family: "Pompiere", regular; + padding: 25px; + text-align: center; + font-size: 3em; + } + + .licenses { + text-align: center; + margin: auto; + } + + .box-image { + + } + + .tmpl1 { + background: ${props => props.contrast === "" ? "#00BCD4" : "black"}; + } + + .tmpl2 { + background: ${props => props.contrast === "" ? "#673AB7" : "black"}; + } + + .tmpl3 { + background: ${props => props.contrast === "" ? "#E81F4F" : "black"}; + } + + .tmpl4 { + background: ${props => props.contrast === "" ? "#FF7F00" : "black"}; + } + + .tmpl5 { + background: ${props => props.contrast === "" ? "#1AB9DE" : "black"}; + } + + .tmpl6 { + background: ${props => props.contrast === "" ? "#673AB7" : "black"}; + } + + .tmpl7 { + background: ${props => props.contrast === "" ? "#E81F4F" : "black"}; + } + +` \ No newline at end of file diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js index fadd1b57a89df285d36477f2e662ebb701ed8f8d..2f6d9d9c798c8533f0b2831895dfaf60a4b096a6 100644 --- a/src/Pages/UserTerms.js +++ b/src/Pages/UserTerms.js @@ -18,7 +18,7 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/> import React, { useEffect, useContext } from 'react'; import SimpleExpansionPanels from '../Components/ExpansionPanels' import Grid from '@material-ui/core/Grid'; -import Modal from '../Components/Modal' +import { StyledButton } from '../Components/ButtonAvaliarRecurso.js' import styled from 'styled-components' import { Store } from '../Store' @@ -33,7 +33,7 @@ import { Banner } from "ImportImages.js"; import { Aberto } from "ImportImages.js"; import { Fechado } from "ImportImages.js"; -const BannerStyle = styled.div` +export const BannerStyle = styled.div` background: ${props => props.contrast === "" ? "" : "black"}; width: 100%; background-image: ${props => props.contrast === "" ? `url(${Banner})` : ""}; @@ -41,6 +41,7 @@ const BannerStyle = styled.div` background-position: top center; height: 370px; vertical-align: "middle"; + border-bottom: ${props => props.contrast === "" ? "1px solid black" : "1px solid white"}; ` const AColorido = styled.a` @@ -49,17 +50,18 @@ const AColorido = styled.a` ` const ImagemSeçao2 = styled.div` - + padding: 0 5%; font-family: "Roboto", sans-serif; background: ${props => props.contrast === "" ? "" : "black"}; color: ${props => props.contrast === "" ? "rgba(0,0,0,0.87)" : "white"}; - @media (min-width:1450px) { + @media (min-width:750px) { background-image: url(${BuscaTermos}); background-position: right; background-size: contain; background-repeat: no-repeat; } + height: auto; align-items: center; padding-block: 30px; @@ -67,11 +69,11 @@ const ImagemSeçao2 = styled.div` line-height: 1.1; text-align: center; @media (min-width: 1000px) { - font-size: 30px; + font-size: 30px; } @media (max-width: 1000px){ - font-size: 20px; + font-size: 20px; } margin-top: 20px; margin-bottom: 10px; @@ -90,6 +92,7 @@ const ImagemSeçao2 = styled.div` ` const Secao3 = styled.div` + padding: 20px 5%; background: ${props => props.contrast === "" ? "#FF7F00" : "black"}; @media (min-width: 1000px) { background-image: url(${CadeadoAberto}), url(${CadeadoFechado}); @@ -130,22 +133,24 @@ const Secao3 = styled.div` background-position-x: 0, 35px; padding-left: 90px; .texto{ - background-image: url(${Linha}); - background-position: top left; - background-repeat: repeat-x; - background-size: auto auto; - span { - font-size: 26px; - } - p { - text-align: left; - font-size: 15px; - margin: 0 0 10px; + background-image: url(${Linha}); + background-position: top left; + background-repeat: repeat-x; + background-size: auto auto; + span { + font-size: 26px; + } + p { + text-align: left; + font-size: 15px; + margin: 0 0 10px; + } } } ` const Secao4 = styled.div` + padding: 0 5%; font-size: 15px; background: ${props => props.contrast === "" ? "" : "black"}; @@ -171,23 +176,22 @@ const Secao4 = styled.div` text-align: center; color: ${props => props.contrast === "" ? "#666" : "white"}; h3 { - font-size: 30px; - height: 22px; - padding-bottom: 20px; - margin-top: 20px; - margin-bottom: 10px; - font-weight: 500; - line-height: 1.1; + font-size: 30px; + height: 22px; + padding-bottom: 20px; + margin-top: 20px; + margin-bottom: 10px; + font-weight: 500; + line-height: 1.1; } p { - height: 18px; - line-height: 1.42857143; - margin: 0 0 10px; + height: 18px; + line-height: 1.42857143; + margin: 0 0 10px; } ` - export default function UserTerms() { const { state } = useContext(Store) useEffect(() => { @@ -197,13 +201,16 @@ export default function UserTerms() { <div style={{ color: "rgba(0,0,0,0.87" }} > <BannerStyle contrast={state.contrast}> <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 contrast={state.contrast} /> + <div style={{ display: "flex", justifyContent: "center" }}> + <StyledButton contrast={state.contrast} onClick={() => window.location.href='/termos-resumido'}> + Se preferir, veja a versão resumida + </StyledButton> + </div> </BannerStyle> <ImagemSeçao2 contrast={state.contrast}> <Grid container> - <Grid item xs={12} md={1}></Grid> - <Grid item xs={12} md={10}> + <Grid item xs={12} md={12}> <div> <h3><strong style={{ fontWeight: "700" }}>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br />uma iniciativa do Ministério da Educação!</h3> @@ -213,15 +220,13 @@ export default function UserTerms() { </p> </div> </Grid> - <Grid item xs={12} md={1}></Grid> </Grid> </ImagemSeçao2> <Secao3 contrast={state.contrast}> <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} > + <Grid item xs={12} md={6} > <div class="caixa aberto"> <div class="texto"> <span>Abertos</span> @@ -229,8 +234,7 @@ export default function UserTerms() { </div> </div> </Grid> - - <Grid item xs={12} md={5}> + <Grid item xs={12} md={6}> <div class="caixa fechado"> <div class="texto"> <span>Fechados</span> @@ -238,13 +242,11 @@ export default function UserTerms() { </div> </div> </Grid> - <Grid item xs={12} md={1} ></Grid> </Grid> </Secao3> <Grid container style={state.contrast === "" ? {} : { backgroundColor: "black" }}> - <Grid item xs={12} md={1}></Grid> - <Grid item xs={12} md={10}> + <Grid item xs={12} md={12}> <Secao4 contrast={state.contrast}> <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> @@ -262,18 +264,14 @@ export default function UserTerms() { </div> </Secao4> </Grid> - <Grid item xs={12} md={1}></Grid> </Grid> - - - <Grid container style={state.contrast === "" ? {} : { backgroundColor: "black" }}> - <Grid item xs={12} md={1}></Grid> - <Grid item xs={12} md={10}> + + <Grid container style={state.contrast === "" ? { padding: "0 5%" } : { backgroundColor: "black", padding: "0 5%" }}> + <Grid item xs={12} md={12}> <div style={{ marginBottom: "50px", paddingTop: "20px" }}> <SimpleExpansionPanels contrast={state.contrast} /> </div> </Grid> - <Grid item xs={12} md={1}></Grid> </Grid> </div> ); diff --git a/src/img/termos/handshake.svg b/src/img/termos/handshake.svg index 7bde658e631f91995a5aed3591aa46b202295bb2..4ace30bff59d40ed3ba50c1f93951c18856e4dfd 100644 --- a/src/img/termos/handshake.svg +++ b/src/img/termos/handshake.svg @@ -6,9 +6,9 @@ <path d="M117.537 114.957C117.537 114.957 156.706 141.311 156.616 149.654C156.515 159.107 146.919 163.575 139.855 158.654C132.79 153.732 106.434 132.572 106.434 132.572" stroke="white" stroke-width="2" stroke-miterlimit="10"/> <path d="M185.722 2.01043L162.527 16.4248L210.805 94.4066L233.999 79.9922L185.722 2.01043Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> <path d="M2.0007 79.9816L25.1953 94.396L73.4726 16.4142L50.278 1.99984L2.0007 79.9816Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> -<path d="M57.1547 103.426L57.1506 103.423C51.5036 98.8576 43.232 99.7433 38.6754 105.401L30.5923 115.438C26.0358 121.095 26.9198 129.383 32.5668 133.948L32.5709 133.951C38.2179 138.517 46.4895 137.631 51.0461 131.973L59.1291 121.937C63.6857 116.279 62.8017 107.991 57.1547 103.426Z" fill="#1AB9DE" stroke="white" stroke-width="2" stroke-miterlimit="10"/> -<path d="M76.2726 136.557C80.1935 131.688 79.4338 124.557 74.5757 120.63C69.7176 116.702 62.6008 117.465 58.6798 122.334L50.8611 132.042C46.9401 136.911 47.6999 144.041 52.558 147.969C57.4161 151.896 64.5329 151.134 68.4538 146.265L76.2726 136.557Z" fill="#1AB9DE" stroke="white" stroke-width="2" stroke-miterlimit="10"/> -<path d="M94.3195 153.237C98.2404 148.369 97.4807 141.238 92.6226 137.311C87.7645 133.383 80.6476 134.146 76.7267 139.014L68.9079 148.723C64.987 153.591 65.7468 160.722 70.6049 164.65C75.463 168.577 82.5798 167.814 86.5007 162.946L94.3195 153.237Z" fill="#1AB9DE" stroke="white" stroke-width="2" stroke-miterlimit="10"/> -<path d="M110.877 163.334C114.192 159.218 113.549 153.189 109.44 149.868C105.332 146.547 99.3147 147.191 95.9999 151.307L89.3855 159.52C86.0707 163.636 86.7138 169.665 90.8219 172.986C94.9301 176.308 100.948 175.663 104.262 171.547L110.877 163.334Z" fill="#1AB9DE" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M57.1547 103.426L57.1506 103.423C51.5036 98.8576 43.232 99.7433 38.6754 105.401L30.5923 115.438C26.0358 121.095 26.9198 129.383 32.5668 133.948L32.5709 133.951C38.2179 138.517 46.4895 137.631 51.0461 131.973L59.1291 121.937C63.6857 116.279 62.8017 107.991 57.1547 103.426Z" fill="none" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M76.2726 136.557C80.1935 131.688 79.4338 124.557 74.5757 120.63C69.7176 116.702 62.6008 117.465 58.6798 122.334L50.8611 132.042C46.9401 136.911 47.6999 144.041 52.558 147.969C57.4161 151.896 64.5329 151.134 68.4538 146.265L76.2726 136.557Z" fill="none" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M94.3195 153.237C98.2404 148.369 97.4807 141.238 92.6226 137.311C87.7645 133.383 80.6476 134.146 76.7267 139.014L68.9079 148.723C64.987 153.591 65.7468 160.722 70.6049 164.65C75.463 168.577 82.5798 167.814 86.5007 162.946L94.3195 153.237Z" fill="none" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M110.877 163.334C114.192 159.218 113.549 153.189 109.44 149.868C105.332 146.547 99.3147 147.191 95.9999 151.307L89.3855 159.52C86.0707 163.636 86.7138 169.665 90.8219 172.986C94.9301 176.308 100.948 175.663 104.262 171.547L110.877 163.334Z" fill="none" stroke="white" stroke-width="2" stroke-miterlimit="10"/> <path d="M71.6484 24.2119L81.606 28.3382" stroke="white" stroke-width="2" stroke-miterlimit="10"/> </svg>