Skip to content
Snippets Groups Projects
Commit 465fbc9a authored by mrp19's avatar mrp19
Browse files

Adding handshake image to img folder, expansion panels CSS ready

parent ccf3d0cd
No related branches found
No related tags found
1 merge request!9Resolve "Criar tela de termos de uso"
Hide whitespace changes
Inline Side-by-side
src/Components/ExpansionPanels.js
+ 123
− 103
View file @ 465fbc9a
......@@ -16,7 +16,8 @@ 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, {Component} from 'react';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
......@@ -30,15 +31,32 @@ import styled from 'styled-components';
import { makeStyles } from '@material-ui/styles';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
const useStyles = makeStyles(theme => ({
root: {
width: '100%',
},
heading: {
fontSize: "15px",
fontWeight: "400",
},
}));
const ExpansionPanelTeste = styled(ExpansionPanel)`
.MuiExpansionPanel-root:expanded{
background-color: black !important;
}
`
const ExpansionPanelSummaryColorido = styled(ExpansionPanelSummary)`
background-color:#e5e5e5 !important;
.MuiExpansionPanel-root {
background-color: #00BCD4 !important;
}
`
const ExpansionPanelDetailsColorido = styled(ExpansionPanelDetails)`
background-color: #fff;
font-size: 15px;
`
const TypographyColorido = styled(Typography)`
......@@ -53,20 +71,22 @@ const AColorido = styled.a`
`
export default function SimpleExpansionPanel() {
const classes = useStyles();
return (
<div className={classes.root}>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<AddIcon />}
<div >
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
expandIcon=<AddIcon/>
aria-controls="panel1a-content"
id="panel1a-header"
>
<TypographyColorido >1. Características da <strong>Plataforma Integrada de RED do MEC</strong></TypographyColorido>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
</ExpansionPanelSummaryColorido>
<ExpansionPanelDetailsColorido >
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
......@@ -96,17 +116,17 @@ export default function SimpleExpansionPanel() {
</div>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
expandIcon={<AddIcon />}
aria-controls="panel2a-content"
id="panel2a-header"
>
<TypographyColorido >2. Cadastro e segurança</TypographyColorido>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
</ExpansionPanelSummaryColorido>
<ExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
......@@ -131,17 +151,17 @@ export default function SimpleExpansionPanel() {
</div>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
expandIcon={<AddIcon />}
aria-controls="panel3a-content"
id="panel3a-header"
>
<TypographyColorido >3. Publicações de usuários</TypographyColorido>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
</ExpansionPanelSummaryColorido>
<ExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
......@@ -198,17 +218,17 @@ export default function SimpleExpansionPanel() {
</div>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
expandIcon={<AddIcon />}
aria-controls="panel4a-content"
id="panel4a-header"
>
<TypographyColorido >4. Licença de uso do conteúdo</TypographyColorido>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
</ExpansionPanelSummaryColorido>
<ExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
......@@ -246,18 +266,18 @@ export default function SimpleExpansionPanel() {
</div>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanelDetailsColorido>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
expandIcon={<AddIcon />}
aria-controls="panel5a-content"
id="panel5a-header"
>
<TypographyColorido >5. Práticas de uso e armazenamento</TypographyColorido>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
</ExpansionPanelSummaryColorido>
<ExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
......@@ -272,17 +292,17 @@ export default function SimpleExpansionPanel() {
</div>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
expandIcon={<AddIcon />}
aria-controls="panel6a-content"
id="panel6a-header"
>
<TypographyColorido >6. Privacidade da informação</TypographyColorido>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
</ExpansionPanelSummaryColorido>
<ExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
......@@ -300,17 +320,17 @@ export default function SimpleExpansionPanel() {
</div>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
expandIcon={<AddIcon />}
aria-controls="panel7a-content"
id="panel7a-header"
>
<TypographyColorido >7. Violação no sistema ou na base de dados</TypographyColorido>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
</ExpansionPanelSummaryColorido>
<ExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
......@@ -325,17 +345,17 @@ export default function SimpleExpansionPanel() {
</div>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
expandIcon={<AddIcon />}
aria-controls="panel8a-content"
id="panel8a-header"
>
<TypographyColorido >8. Sanções</TypographyColorido>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
</ExpansionPanelSummaryColorido>
<ExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
......@@ -361,17 +381,17 @@ export default function SimpleExpansionPanel() {
</div>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
expandIcon={<AddIcon />}
aria-controls="panel9a-content"
id="panel9a-header"
>
<TypographyColorido >9. Limitações de responsabilidade</TypographyColorido>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
</ExpansionPanelSummaryColorido>
<ExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
......@@ -390,17 +410,17 @@ export default function SimpleExpansionPanel() {
</div>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
expandIcon={<AddIcon />}
aria-controls="panel10a-content"
id="panel10a-header"
>
<TypographyColorido >10.Inexistência de vínculo</TypographyColorido>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
</ExpansionPanelSummaryColorido>
<ExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
......@@ -415,17 +435,17 @@ export default function SimpleExpansionPanel() {
</div>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
expandIcon={<AddIcon />}
aria-controls="panel11a-content"
id="panel11a-header"
>
<TypographyColorido >11. Como reportar violações</TypographyColorido>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
</ExpansionPanelSummaryColorido>
<ExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
......@@ -442,17 +462,17 @@ export default function SimpleExpansionPanel() {
</div>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
expandIcon={<AddIcon />}
aria-controls="panel12a-content"
id="panel12a-header"
>
<TypographyColorido >12. Modificações nos Termos de Uso</TypographyColorido>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
</ExpansionPanelSummaryColorido>
<ExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
......@@ -467,17 +487,17 @@ export default function SimpleExpansionPanel() {
</div>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
<ExpansionPanelTeste>
<ExpansionPanelSummaryColorido
expandIcon={<AddIcon />}
aria-controls="panel13a-content"
id="panel13a-header"
>
<TypographyColorido >13. Foro</TypographyColorido>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
</ExpansionPanelSummaryColorido>
<ExpansionPanelDetailsColorido>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
......@@ -492,8 +512,8 @@ export default function SimpleExpansionPanel() {
</div>
</Grid>
</Grid>
</ExpansionPanelDetails>
</ExpansionPanel>
</ExpansionPanelDetailsColorido>
</ExpansionPanelTeste>
</div>
);
......
src/Components/Modal.js
+ 24
− 2
View file @ 465fbc9a
......@@ -21,12 +21,16 @@ import { makeStyles } from '@material-ui/styles';
import Modal from '@material-ui/core/Modal';
import { Carousel } from 'react-responsive-carousel';
import Backdrop from '@material-ui/core/Backdrop';
import Grid from '@material-ui/core/Grid';
import Fade from '@material-ui/core/Fade';
import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
import styled from 'styled-components'
/*Importação de imagens para a página*/
import Handshake from "../img/termos/handshake.svg"
......@@ -70,6 +74,16 @@ const CarouselStyled = styled(Carousel)`
}
`
const Termos1 = styled.div `
.termsTemplates{
}
`
export default function TransitionsModal() {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
......@@ -101,8 +115,16 @@ export default function TransitionsModal() {
>
<Fade in={open}>
<CarouselStyled className={classes.carousel} showArrows={true} showThumbs={false} infiniteLoop={true} showStatus={false}>
<div style={{background:"blue"}}>
<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 style={{background:"#00BCD4"}} >
<Grid container spacing={3}>
<Grid item md={6}>
<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>
</Grid>
<Grid item md={6} style={{backgroundImage: "url(${Handshake)"}}></Grid>
</Grid>
</div>
<div style={{background:"red"}}>
......
src/img/termos/handshake.svg 0 → 100644
+ 14
− 0
View file @ 465fbc9a
<svg width="236" height="179" viewBox="0 0 236 179" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M167.815 25.0125C167.815 25.0125 70.3541 -9.26785 68.9849 60.7128C68.9849 60.7128 68.7345 75.7231 79.161 74.5914C92.0435 73.2249 101.367 66.7126 101.367 55.1239C101.367 43.5352 120.797 51.8784 120.797 51.8784L186.926 109.843L204.577 81.061" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
<path d="M32.8828 86.666C32.8828 86.666 109.208 169.629 122.624 167.312C136.039 164.995 133.279 154.8 133.279 154.8L106.433 132.572" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
<path d="M157.5 84.0771C157.5 84.0771 193.398 109.379 191.549 118.651C189.701 127.923 177.671 130.234 170.744 125.137C163.818 120.039 127.723 93.6428 127.723 93.6428" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
<path d="M117.537 114.957C117.537 114.957 158.241 147.401 166.105 144.62C175.002 141.476 176.127 130.934 169.195 125.82C162.264 120.706 127.713 93.6055 127.713 93.6055" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
<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="M71.6484 24.2119L81.606 28.3382" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
</svg>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment