From a03a942838be6c1510ae96aaf2c588893ccd1dfd Mon Sep 17 00:00:00 2001
From: Riba <mrp19@inf.ufpr.br>
Date: Tue, 22 Oct 2019 11:45:38 -0300
Subject: [PATCH] =?UTF-8?q?Working=20na=20cria=C3=A7=C3=A3o=20do=20modal?=
=?UTF-8?q?=20e=20carrossel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Components/Carrossel.js | 0
src/Components/ExpansionPanels.js | 33 ++++++++-------
src/Components/Modal.js | 67 +++++++++++++++++++++++++++++++
src/Pages/UserTerms.js | 44 +++++++++++---------
4 files changed, 111 insertions(+), 33 deletions(-)
create mode 100644 src/Components/Carrossel.js
create mode 100644 src/Components/Modal.js
diff --git a/src/Components/Carrossel.js b/src/Components/Carrossel.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/Components/ExpansionPanels.js b/src/Components/ExpansionPanels.js
index c69d93bc..75786564 100644
--- a/src/Components/ExpansionPanels.js
+++ b/src/Components/ExpansionPanels.js
@@ -3,9 +3,14 @@ import MuiExpansionPanel from '@material-ui/core/ExpansionPanel';
import MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import Typography from '@material-ui/core/Typography';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { Link } from 'react-router-dom'
import Grid from '@material-ui/core/Grid';
+import AddIcon from '@material-ui/icons/Add';
+import RemoveIcon from '@material-ui/icons/Remove';
+
+
+
+
@@ -19,7 +24,7 @@ export default function CustomizedExpansionPanels() {
return (
<div>
<MuiExpansionPanel square expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
- <MuiExpansionPanelSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1d-content" id="panel1d-header">
+ <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel1d-content" id="panel1d-header">
<Typography>1. Características da <strong>Plataforma Integrada de RED do MEC</strong></Typography>
</MuiExpansionPanelSummary>
<MuiExpansionPanelDetails>
@@ -53,7 +58,7 @@ export default function CustomizedExpansionPanels() {
</MuiExpansionPanelDetails>
</MuiExpansionPanel>
<MuiExpansionPanel square expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
- <MuiExpansionPanelSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel2d-content" id="panel2d-header">
+ <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel2d-content" id="panel2d-header">
<Typography>2. Cadastro e segurança</Typography>
</MuiExpansionPanelSummary>
<MuiExpansionPanelDetails>
@@ -84,7 +89,7 @@ export default function CustomizedExpansionPanels() {
</MuiExpansionPanelDetails>
</MuiExpansionPanel>
<MuiExpansionPanel square expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
- <MuiExpansionPanelSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel3d-content" id="panel3d-header">
+ <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel3d-content" id="panel3d-header">
<Typography>3. Publicações de usuários</Typography>
</MuiExpansionPanelSummary>
<MuiExpansionPanelDetails>
@@ -147,7 +152,7 @@ export default function CustomizedExpansionPanels() {
</MuiExpansionPanelDetails>
</MuiExpansionPanel>
<MuiExpansionPanel square expanded={expanded === 'panel4'} onChange={handleChange('panel4')}>
- <MuiExpansionPanelSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel4d-content" id="panel4d-header">
+ <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel4d-content" id="panel4d-header">
<Typography>4. Licença de uso do conteúdo</Typography>
</MuiExpansionPanelSummary>
<MuiExpansionPanelDetails>
@@ -191,7 +196,7 @@ export default function CustomizedExpansionPanels() {
</MuiExpansionPanelDetails>
</MuiExpansionPanel>
<MuiExpansionPanel square expanded={expanded === 'panel5'} onChange={handleChange('panel5')}>
- <MuiExpansionPanelSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel5d-content" id="panel5d-header">
+ <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel5d-content" id="panel5d-header">
<Typography>5. Práticas de uso e armazenamento</Typography>
</MuiExpansionPanelSummary>
<MuiExpansionPanelDetails>
@@ -212,7 +217,7 @@ export default function CustomizedExpansionPanels() {
</MuiExpansionPanelDetails>
</MuiExpansionPanel>
<MuiExpansionPanel square expanded={expanded === 'panel6'} onChange={handleChange('panel6')}>
- <MuiExpansionPanelSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel6d-content" id="panel6d-header">
+ <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel6d-content" id="panel6d-header">
<Typography>6. Privacidade da informação</Typography>
</MuiExpansionPanelSummary>
<MuiExpansionPanelDetails>
@@ -236,7 +241,7 @@ export default function CustomizedExpansionPanels() {
</MuiExpansionPanelDetails>
</MuiExpansionPanel>
<MuiExpansionPanel square expanded={expanded === 'panel7'} onChange={handleChange('panel7')}>
- <MuiExpansionPanelSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel7d-content" id="panel7d-header">
+ <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel7d-content" id="panel7d-header">
<Typography>7. Violação no sistema ou na base de dados</Typography>
</MuiExpansionPanelSummary>
<MuiExpansionPanelDetails>
@@ -257,7 +262,7 @@ export default function CustomizedExpansionPanels() {
</MuiExpansionPanelDetails>
</MuiExpansionPanel>
<MuiExpansionPanel square expanded={expanded === 'panel8'} onChange={handleChange('panel8')}>
- <MuiExpansionPanelSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel8d-content" id="panel8d-header">
+ <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel8d-content" id="panel8d-header">
<Typography>8. Sanções</Typography>
</MuiExpansionPanelSummary>
<MuiExpansionPanelDetails>
@@ -289,7 +294,7 @@ export default function CustomizedExpansionPanels() {
</MuiExpansionPanelDetails>
</MuiExpansionPanel>
<MuiExpansionPanel square expanded={expanded === 'panel9'} onChange={handleChange('panel9')}>
- <MuiExpansionPanelSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel9d-content" id="panel9d-header">
+ <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel9d-content" id="panel9d-header">
<Typography>9. Limitações de responsabilidade</Typography>
</MuiExpansionPanelSummary>
<MuiExpansionPanelDetails>
@@ -314,7 +319,7 @@ export default function CustomizedExpansionPanels() {
</MuiExpansionPanelDetails>
</MuiExpansionPanel>
<MuiExpansionPanel square expanded={expanded === 'panel10'} onChange={handleChange('panel10')}>
- <MuiExpansionPanelSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel10d-content" id="panel10d-header">
+ <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel10d-content" id="panel10d-header">
<Typography>10.Inexistência de vínculo</Typography>
</MuiExpansionPanelSummary>
<MuiExpansionPanelDetails>
@@ -335,7 +340,7 @@ export default function CustomizedExpansionPanels() {
</MuiExpansionPanelDetails>
</MuiExpansionPanel>
<MuiExpansionPanel square expanded={expanded === 'panel11'} onChange={handleChange('panel11')}>
- <MuiExpansionPanelSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel11d-content" id="panel11d-header">
+ <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel11d-content" id="panel11d-header">
<Typography>11. Como reportar violações</Typography>
</MuiExpansionPanelSummary>
<MuiExpansionPanelDetails>
@@ -358,7 +363,7 @@ export default function CustomizedExpansionPanels() {
</MuiExpansionPanelDetails>
</MuiExpansionPanel>
<MuiExpansionPanel square expanded={expanded === 'panel12'} onChange={handleChange('panel12')}>
- <MuiExpansionPanelSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel12d-content" id="panel12d-header">
+ <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel12d-content" id="panel12d-header">
<Typography>12. Modificações nos Termos de Uso</Typography>
</MuiExpansionPanelSummary>
<MuiExpansionPanelDetails>
@@ -379,7 +384,7 @@ export default function CustomizedExpansionPanels() {
</MuiExpansionPanelDetails>
</MuiExpansionPanel>
<MuiExpansionPanel square expanded={expanded === 'panel13'} onChange={handleChange('panel13')}>
- <MuiExpansionPanelSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel13d-content" id="panel13d-header">
+ <MuiExpansionPanelSummary expandIcon={<AddIcon />} aria-controls="panel13d-content" id="panel13d-header">
<Typography>13. Foro</Typography>
</MuiExpansionPanelSummary>
<MuiExpansionPanelDetails>
diff --git a/src/Components/Modal.js b/src/Components/Modal.js
new file mode 100644
index 00000000..c8ced25d
--- /dev/null
+++ b/src/Components/Modal.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Modal from '@material-ui/core/Modal';
+
+function rand() {
+ return Math.round(Math.random() * 20) - 10;
+}
+
+function getModalStyle() {
+ const top = 50 + rand();
+ const left = 50 + rand();
+
+ return {
+ top: `${top}%`,
+ left: `${left}%`,
+ transform: `translate(-${top}%, -${left}%)`,
+ };
+}
+
+const useStyles = makeStyles(theme => ({
+ paper: {
+ position: 'absolute',
+ width: 400,
+ backgroundColor: theme.palette.background.paper,
+ border: '2px solid #000',
+ boxShadow: theme.shadows[5],
+ padding: theme.spacing(2, 4, 3),
+ },
+}));
+
+export default function SimpleModal() {
+ const classes = useStyles();
+ // getModalStyle is not a pure function, we roll the style only on the first render
+ const [modalStyle] = React.useState(getModalStyle);
+ const [open, setOpen] = React.useState(false);
+
+ const handleOpen = () => {
+ setOpen(true);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ return (
+ <div>
+ <p>Click to get the full Modal experience!</p>
+ <button type="button" onClick={handleOpen}>
+ Open Modal
+ </button>
+ <Modal
+ aria-labelledby="simple-modal-title"
+ aria-describedby="simple-modal-description"
+ open={open}
+ onClose={handleClose}
+ >
+ <div style={modalStyle} className={classes.paper}>
+ <h2 id="simple-modal-title">Text in a modal</h2>
+ <p id="simple-modal-description">
+ Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+ </p>
+ <SimpleModal />
+ </div>
+ </Modal>
+ </div>
+ );
+}
diff --git a/src/Pages/UserTerms.js b/src/Pages/UserTerms.js
index 1185aad3..31279b33 100644
--- a/src/Pages/UserTerms.js
+++ b/src/Pages/UserTerms.js
@@ -19,7 +19,9 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, {Component} from 'react';
import ExpansionPanels from '../Components/ExpansionPanels'
import Grid from '@material-ui/core/Grid';
-import Banner1 from "../img/termos/banner.jpg"
+import Banner1 from "../img/termos/banner.jpg";
+import { AutoRotatingCarousel } from 'material-auto-rotating-carousel'
+import Modal from '../Components/Modal'
const bannerStyle={
@@ -37,6 +39,19 @@ const center={
width: "100%",
textAlign: "center"
}
+const container={
+ paddingInline: "15px",
+ paddingBlock: "20px",
+ marginInline: "auto",
+ textAlign:"center",
+ width:"750px"
+
+}
+const secao2={
+ height: "100%",
+ alignItems: "center",
+ paddingBlock: "30px"
+}
@@ -49,27 +64,18 @@ class UserTerms extends Component {
<div style = {bannerStyle}>
<h2 style={{width: "100%", height:"370px",textAlign: "center",marginTop:"0px", paddingTop:"9rem",fontSize:"52px"}}>TERMOS DE USO</h2>
- {/* /<h3 style = {{color: "red",verticalAlign:'middle'}}> Veja a versão resumida</h3>*/}
+ <div><Modal/></div>
</div>
- <div style = {center}>
- <h3 style= {{textAlign: "center",fontWeight: "normal"}}><strong>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br/>uma iniciativa do Ministério da Educação!</h3>
-
- <p>
- A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6
- do <a href= "http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</a> (OGP-Brasil), que tem por<br/>
- 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,<br/> valorizando a pluralidade e a diversidade da educação brasileira”.<br/><br/><br/>
-
- </p>
-
- <spam >
- Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência<br/>
- pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domínio público ou que tenham sido divulgados sob licença aberta que permita<br/>
- acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.” <a href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</a>.
-
- </spam>
+ <div style= {secao2}>
+ <div style = {container}>
+ <h3 style= {{textAlign: "center",fontWeight: "normal"}}><strong>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br/>uma iniciativa do Ministério da Educação!</h3>
+ <p style={{textAlign:"justify"}}>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <a href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</a> (OGP-Brasil), que tem por objetivo “incorporar na política educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileira”.
+ </p>
+ <p style={{textAlign:"justify"}}>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domínio público ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.” <a href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</a>.
+ </p>
+ </div>
</div>
<div style = {{background: "#ff7f00"}} >
--
GitLab