From fdf5978fd8e6ce3119028fa6ae869a15cfcbd1f6 Mon Sep 17 00:00:00 2001
From: Riba <mrp19@inf.ufpr.br>
Date: Thu, 24 Oct 2019 10:36:25 -0300
Subject: [PATCH] Working on Carousel and Modal
---
src/Components/Carrossel.js | 52 -------------------
src/Components/Modal.js | 99 ++++++++++++++++++++++++++++++++-----
2 files changed, 87 insertions(+), 64 deletions(-)
delete mode 100644 src/Components/Carrossel.js
diff --git a/src/Components/Carrossel.js b/src/Components/Carrossel.js
deleted file mode 100644
index 28b8c133..00000000
--- a/src/Components/Carrossel.js
+++ /dev/null
@@ -1,52 +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 {Component} from 'react';
-import { Carousel } from 'react-responsive-carousel';
-
-const areaStyle={
- paddingTop: "5px",
- fontSize: "16px",
- textAlign:"left",
- backgroundColor: "inherit",
- width: "700px",
- padding: "20px",
- minHeight: "150px"
-}
-export default class CarouselTermosResumidos extends Component {
-
- constructor(props){
- super(props);
-
- };
- render(){
- return(
- <Carousel showThumbs={false} infiniteLoop={true} showStatus={false}>
- <div>TESTE</div>
- <div>DO</div>
- <div>CAROUSEL</div>
- <div>AGORA</div>
- <div>VAI</div>
- <div>POR</div>
- <div>FAVOR</div>
- </Carousel>
- );
-
-
- }
-}
diff --git a/src/Components/Modal.js b/src/Components/Modal.js
index 19f923af..5aec7ee1 100644
--- a/src/Components/Modal.js
+++ b/src/Components/Modal.js
@@ -22,6 +22,12 @@ import Modal from '@material-ui/core/Modal';
import { Carousel } from 'react-responsive-carousel';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
+import VisibilityIcon from '@material-ui/icons/Visibility';
+import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
+
+
+
+
const useStyles = makeStyles(theme => ({
modal: {
@@ -37,7 +43,8 @@ const useStyles = makeStyles(theme => ({
carousel: {
background:"blue",
width: "750px",
- height:"370px"
+ height:"370px",
+
}
}));
@@ -54,9 +61,9 @@ export default function TransitionsModal() {
};
return (
- <div>
- <button type="button" onClick={handleOpen}>
- react-transition-group
+ <div style={{display:"flex", justifyContent: "center"}}>
+ <button type="button" onClick={handleOpen}>
+ <VisibilityIcon/> VEJA A VERSÃO RESUMIDA
</button>
<Modal
aria-labelledby="transition-modal-title"
@@ -71,14 +78,82 @@ export default function TransitionsModal() {
}}
>
<Fade in={open}>
- <Carousel className={classes.carousel} showThumbs={false} infiniteLoop={true} showStatus={false}>
- <div>TESTE</div>
- <div>DO</div>
- <div>CAROUSEL</div>
- <div>AGORA</div>
- <div>VAI</div>
- <div>POR</div>
- <div>FAVOR</div>
+ <Carousel className={classes.carousel} showArrows={<ArrowBackIosIcon/>} showThumbs={false} infiniteLoop={true} showStatus={false}>
+ <div>
+ <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>
+
+ <div class="title">
+ <h2>O que é a Plataforma Integrada MEC RED e como ela está organizada?</h2>
+
+ <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>
+
+ <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>
+ </div>
+
+ <div>
+ <h3>Os recursos educacionais disponibilizados<br/> podem ser de dois tipos:</h3>
+
+ <p><strong>Abertos</strong>: recursos sem nenhuma restrição de acesso e<br/> com flexibilidade quanto ao uso ou reuso.</p>
+
+ <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>
+
+ <p>Como repositório, a Plataforma hospeda somente Recursos Educacionais Abertos (REA). Todo conteúdo inserido por usuários deve ser aberto.</p>
+
+ <p>Como referatório, a Plataforma aponta links para parceiros, e<br/> esses recursos podem ser abertos ou fechados.</p>
+ </div>
+
+ <div>
+ <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>
+ </div>
+
+ <div>
+ <h2>O que publicar?</h2>
+
+ <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>
+
+ <h2>O que não publicar?</h2>
+
+ <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>
+
+ <div>
+ <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>
+
+ <p>CC-BY</p>
+
+ <p>CC-BY-SA</p>
+
+ <p>CC-BY-NC</p>
+
+ <p>CC-BY-NC-SA</p>
+
+ <p>CC-BY</p>
+
+ <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>
+
+ <p>NC</p>
+
+ <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>
+
+ <p>SA</p>
+
+ <p> quer dizer que as novas criações devem ser licenciadas sob termos idênticos aos do trabalho original</p>
+ </div>
+
+ <div>
+ <h2>Respeitamos<br/> a sua privacidade</h2>
+
+ <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>
+
+ <p>Dúvidas? Leia a Ãntegra dos <span ng-click="hide()">Termos de Uso</span> ou fale conosco por meio do <span ui-sref="contato">formulário de contato</span>.</p>
+ </div>
</Carousel>
</Fade>
</Modal>
--
GitLab