From a4ed590fa7f99d8a49965e3147380cba662d7b3f Mon Sep 17 00:00:00 2001
From: mrp19 <mrp19.ufpr.br>
Date: Mon, 9 Nov 2020 14:41:07 -0300
Subject: [PATCH] Fix aba mapa do site e acessibilidade
---
src/App.js | 4 +
src/Pages/Accessibility.js | 151 +++++++++++++++++++++++++++++
src/Pages/SiteMap.js | 188 +++++++++++++++++++++++++++++++++++++
3 files changed, 343 insertions(+)
create mode 100644 src/Pages/Accessibility.js
create mode 100644 src/Pages/SiteMap.js
diff --git a/src/App.js b/src/App.js
index 0ba68eb4..28154ce0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -45,6 +45,8 @@ import EditProfilePage from './Pages/EditProfilePage.js'
import PublicUserPage from './Pages/PublicUserPage.js'
import UploadPage from './Pages/UploadPage.js'
import EditLearningObjectPage from './Pages/EditLearningObjectPage.js'
+import SiteMap from './Pages/SiteMap'
+import Accessibility from './Pages/Accessibility'
export default function App(){
// eslint-disable-next-line
@@ -95,6 +97,8 @@ export default function App(){
<Route path="/termos" component={UserTerms}/>
<Route path="/teste" component={Teste}/>
<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}/>
diff --git a/src/Pages/Accessibility.js b/src/Pages/Accessibility.js
new file mode 100644
index 00000000..ff57fd98
--- /dev/null
+++ b/src/Pages/Accessibility.js
@@ -0,0 +1,151 @@
+/*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, {useState, useContext} from 'react';
+import styled from 'styled-components'
+import { Link } from "react-router-dom";
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+
+
+const titulo ={
+ fontFamily: "Roboto, sans-serif",
+ marginTop: "0",
+ fontSize: "26px",
+ fontWeight: "300",
+ marginBottom: "10px",
+ color: "#666"
+}
+const subtitulo ={
+ fontFamily: "Roboto, sans-serif",
+ marginBottom: "20px",
+ marginTop: "0",
+ fontWeight: "500",
+ fontSize: "16px",
+ color: "#00bcd4"
+
+}
+
+const paper ={
+ padding: "30px 30px 100px 30px",
+ backgroundColor: "#fff",
+ boxShadow: "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)",
+ width:"1170px",
+ margin: "30px auto",
+ marginBottom:"0",
+ display: "flex",
+ flexDirection:"column",
+ boxSizing: "border-box"
+}
+
+const paragrafo={
+ textAlign: "left",
+ padding: "30px 0",
+ margin: "0",
+ fontFamily: "'Roboto Light','Roboto Regular',Roboto",
+ fontWeight: "300",
+ fontSize: "18px",
+ color: "#666",
+ display:"block"
+}
+
+const azulzinho={
+ textAlign: "right",
+ display:"block",
+ color: "#00bcd4",
+ fontSize: "16px"
+}
+
+const atalhos = {
+ fontWeight: "400",
+ color: "#00bcd4"
+
+}
+
+const breadCrumbs={
+ padding: "10px",
+ display: "flex",
+ margin: "0 auto",
+ width:"1170px"
+}
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+ display: flex;
+ justify-content: flex-start;
+ max-width: 1170px;
+ span {
+ color: #a5a5a5;
+ font-size: 14px;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ font-size: 14px;
+ }
+`;
+
+export default function Acessibility (props) {
+ return (
+ <div style={{padding:"0 0 30px 0",backgroundColor :"#f4f4f4"}}>
+
+ <div style={breadCrumbs}>
+ <StyledBreadCrumbs>
+ <Link to="/">Página Inicial</Link>
+ <span>Acessibilidade</span>
+
+ </StyledBreadCrumbs>
+ </div>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300;400;500&display=swap" rel="stylesheet"/>
+ <div style={paper}>
+ <h3 style={titulo}>Acessibilidade</h3>
+ <div style={{maxWidth:"660px",margin:"0 auto"}}>
+ <p style={paragrafo}>
+ Acessibilidade na web é possibilitar qualquer indivÃduo de usufruir de quaisquer
+ atividades ou conteúdos em sÃtios e serviços disponÃveis na web, com igualdade e
+ autonomia, independentemente de sua capacidade motora, visual, auditiva,
+ intelectual, cultural ou social
+ </p>
+ <span style={azulzinho}>
+ Cartilha Acessibilidade na Web - W3C Brasil, 2013
+ </span>
+ <p style={paragrafo}>
+ Na Plataforma a acessibilidade foi baseada principalmente no Modelo de
+ Acessibilidade em Governo Eletrônico (e-MAG), o modelo pode ser acessado
+ <a
+ style={{textDecoration:"none", color:"#222"}}
+ target="_blank"
+ href="https://www.governoeletronico.gov.br/documentos-e-arquivos/e-MAG%20V3.pdf"> aqui</a>.
+ </p>
+ </div>
+ <div style={{color:"#666", fontSize:"14px"}}>
+ <h3 style={subtitulo}>Atalhos padrões da Plataforma</h3>
+ Teclando-se <strong style={atalhos}>Alt + 1</strong> em qualquer página da Plataforma, chega-se diretamente ao começo do conteúdo principal da página.
+ <br/><br/>
+ Teclando-se <strong style={atalhos}>Alt + 2</strong> em qualquer página da Plataforma, chega-se diretamente ao inÃcio do menu principal.
+ <br/><br/>
+ Teclando-se <strong style={atalhos}>Alt + 3</strong> em qualquer página da Plataforma, chega-se diretamente no campo de busca.
+ <br/><br/>
+ Teclando-se <strong style={atalhos}>Alt + 4</strong> em qualquer página da Plataforma, chega-se diretamente ao rodapé.
+ <br/><br/>
+ No caso do <strong style={atalhos}>Firefox</strong>, em vez de Alt + número, tecle simultaneamente <strong style={atalhos}>Alt + Shift + número</strong>.
+ <br/><br/>
+ Sendo <strong style={atalhos}>Firefox</strong> no <strong style={atalhos}>Mac OS</strong>, em vez de Alt + Shift + número, tecle simultaneamente <strong style={atalhos}>Ctrl + Alt + número</strong>.
+ <br/><br/>
+ No <strong style={atalhos}>Opera</strong>, as teclas são <strong style={atalhos}>Shift + Escape + número</strong>. Ao teclar apenas <strong style={atalhos}>Shift + Escape</strong>, o usuário encontrará uma janela com todas as alternativas de ACCESSKEY da página.
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/src/Pages/SiteMap.js b/src/Pages/SiteMap.js
new file mode 100644
index 00000000..13d6eb97
--- /dev/null
+++ b/src/Pages/SiteMap.js
@@ -0,0 +1,188 @@
+/*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, {useState, useContext} from 'react';
+import styled from 'styled-components'
+import { Link } from "react-router-dom";
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+
+
+const titulo ={
+ fontFamily: "Roboto, sans-serif",
+ marginTop: "0",
+ fontSize: "26px",
+ fontWeight: "300",
+ marginBottom: "10px",
+ color: "#666"
+}
+const subtitulo ={
+ fontFamily: "Roboto, sans-serif",
+ marginTop: "40px",
+ fontWeight:"500",
+ fontSize:"16px",
+ color: "#00bcd4"
+
+}
+const item={
+ fontFamily: "Roboto, sans-serif",
+ textDecoration: "none",
+ display:"block",
+ fontSize:"15px",
+ color: "#333",
+ fontWeight:"300",
+ paddingBottom: "5px"
+}
+const linha={
+ margin: "15px 0",
+ borderTop: "2px solid #00bcd4",
+ borderBottom:"none"
+}
+
+const paper ={
+ padding: "30px 30px 100px 30px",
+ backgroundColor: "#fff",
+ boxShadow: "0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)",
+ maxWidth:"1170px",
+ margin: "30px auto",
+ marginBottom:"0",
+ display: "flex",
+ flexDirection:"column",
+ boxSizing: "border-box"
+}
+
+const cards={
+ display:"flex",
+ flexDirection:"row"
+}
+
+const card = {
+ padding:"0 15px",
+ width:"25%"
+}
+
+const breadCrumbs={
+ padding: "10px",
+ display: "flex",
+ margin: "0 auto",
+ width:"1170px"
+}
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+ display: flex;
+ justify-content: flex-start;
+ max-width: 1170px;
+ span {
+ color: #a5a5a5;
+ font-size: 14px;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ font-size: 14px;
+ }
+`;
+
+export default function SiteMap (props) {
+ return (
+ <div style={{ padding:"0 0 30px 0",backgroundColor :"#f4f4f4"}}>
+
+ <div style={breadCrumbs}>
+ <StyledBreadCrumbs>
+ <Link to="/">Página Inicial</Link>
+ <span>Mapa do site</span>
+
+ </StyledBreadCrumbs>
+ </div>
+ <link href="https://fonts.googleapis.com/css?family=Roboto:300;500&display=swap" rel="stylesheet"/>
+ <div style={paper}>
+ <h3 style={titulo}>Mapa do site</h3>
+ <div style={cards}>
+ <div style={card}>
+ <h3 style={subtitulo}>Sobre</h3>
+ <hr style={linha} />
+ <a style={item} href="sobre">Sobre a Plataforma</a>
+ <a style={item} href="sobre#portaisparceiros">Portais Parceiros</a>
+ <a style={item} href="termos">Termos de Uso</a>
+ <a style={item} href="contato">Contato</a>
+ </div>
+ <div style={card}>
+ <h3 style={subtitulo}>Ajuda</h3>
+ <hr style={linha} />
+ <a style={item} href="ajuda">Central de Ajuda</a>
+ <Link
+ style={item}
+ to={{
+ pathname: "plataforma-mec",
+
+ state: { value: "0" }
+ }}
+ > O que é a Plataforma MEC</Link>
+ <Link
+ style={item}
+ to={{
+ pathname: "publicando-recurso",
+ state: { value: "0" }
+ }}
+ > Publicando Recurso
+ </Link>
+
+ <Link
+ style={item}
+ to={{
+ pathname: "encontrando-recurso",
+ state: { value: "0" }
+ }}
+ > Encontrando Recurso
+ </Link>
+ <Link
+ style={item}
+ to={{
+ pathname: "/participando-da-rede",
+
+ state: { value: "0" }
+ }}
+ > Participando da Rede
+ </Link>
+ <Link
+ style={item}
+ to={{
+ pathname: "gerenciando-conta",
+
+ state: { value: "0" }
+ }}
+ > Gerenciando a conta
+ </Link>
+ </div>
+
+ <div style={card}>
+ <h3 style={subtitulo}>Acessibilidade</h3>
+ <hr style={linha} />
+ <a style={item} href="acessibilidade">Acessibilidade</a>
+ </div>
+ <div style={card}>
+ <h3 style={subtitulo}>Ãrea do Usuário</h3>
+ <hr style={linha} />
+ <a style={item} href="/perfil">Perfil e Atividades</a>
+ <a style={item} href="perfil">Recursos Publicados</a>
+ <a style={item} href="/perfil">Favoritos</a>
+ <a style={item} href="perfil">Coleções</a>
+ <a style={item} href="/perfil">Rede</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}
--
GitLab