Skip to content
Snippets Groups Projects
Commit 3bff7492 authored by mrp19's avatar mrp19
Browse files

Alterado componente do painel expansivo

parent 4d38e4c2
Branches
Tags
1 merge request!9Resolve "Criar tela de termos de uso"
......@@ -17,68 +17,56 @@ 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 MuiExpansionPanel from '@material-ui/core/ExpansionPanel';
import MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import Typography from '@material-ui/core/Typography';
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';
import styled from 'styled-components';
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 TypographyColorido = styled(Typography)`
color: #666 !important;
font-size: 16px !important;
font-weight: 400 !important;
`
const MuiExpansionPanelMargem = styled(MuiExpansionPanel)`
.Mui-expanded{
background-color: black;
}
`
const MuiExpansionPanelSummaryColorido = styled(MuiExpansionPanelSummary)`
background-color:#e5e5e5 !important;
color: #666;
font-size: 16px;
font-weight: 400;
`
const MuiExpansionPanelDetailsColorido = styled(MuiExpansionPanelDetails)`
background-color: #fff;
font-size: 15px;
`
const AColorido = styled.a`
color: #00BCD4;
text-decoration:none;
`
export default function CustomizedExpansionPanels() {
const [expanded, setExpanded] = React.useState(false);
const handleChange = panel => (event, newExpanded) => {
setExpanded(newExpanded ? panel : false);
};
export default function SimpleExpansionPanel() {
const classes = useStyles();
return (
<div style={{backgroundColor: "#e5e5e5"}}>
<MuiExpansionPanelMargem square expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
<MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel1d-content" id="panel1d-header">
<TypographyColorido>1. Características da <strong>Plataforma Integrada de RED do MEC</strong></TypographyColorido>
</MuiExpansionPanelSummaryColorido>
<MuiExpansionPanelDetailsColorido>
<div className={classes.root}>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<AddIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography className={classes.heading}>1. Características da <strong>Plataforma Integrada de RED do MEC</strong></Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
......@@ -108,13 +96,17 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
</MuiExpansionPanelDetailsColorido>
</MuiExpansionPanelMargem>
<MuiExpansionPanelMargem square expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
<MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel2d-content" id="panel2d-header">
<TypographyColorido>2. Cadastro e segurança</TypographyColorido>
</MuiExpansionPanelSummaryColorido>
<MuiExpansionPanelDetailsColorido>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2a-content"
id="panel2a-header"
>
<Typography className={classes.heading}>2. Cadastro e segurança</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
......@@ -139,13 +131,17 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
</MuiExpansionPanelDetailsColorido>
</MuiExpansionPanelMargem>
<MuiExpansionPanelMargem square expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
<MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel3d-content" id="panel3d-header">
<TypographyColorido>3. Publicações de usuários</TypographyColorido>
</MuiExpansionPanelSummaryColorido>
<MuiExpansionPanelDetailsColorido>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel3a-content"
id="panel3a-header"
>
<Typography className={classes.heading}>3. Publicações de usuários</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
......@@ -202,13 +198,17 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
</MuiExpansionPanelDetailsColorido>
</MuiExpansionPanelMargem>
<MuiExpansionPanelMargem square expanded={expanded === 'panel4'} onChange={handleChange('panel4')}>
<MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel4d-content" id="panel4d-header">
<TypographyColorido>4. Licença de uso do conteúdo</TypographyColorido>
</MuiExpansionPanelSummaryColorido>
<MuiExpansionPanelDetailsColorido>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel4a-content"
id="panel4a-header"
>
<Typography className={classes.heading}>4. Licença de uso do conteúdo</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
......@@ -246,13 +246,18 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
</MuiExpansionPanelDetailsColorido>
</MuiExpansionPanelMargem>
<MuiExpansionPanelMargem square expanded={expanded === 'panel5'} onChange={handleChange('panel5')}>
<MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel5d-content" id="panel5d-header">
<TypographyColorido>5. Práticas de uso e armazenamento</TypographyColorido>
</MuiExpansionPanelSummaryColorido>
<MuiExpansionPanelDetailsColorido>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel5a-content"
id="panel5a-header"
>
<Typography className={classes.heading}>5. Práticas de uso e armazenamento</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div>
......@@ -261,19 +266,23 @@ export default function CustomizedExpansionPanels() {
</Grid>
<Grid item xs={12} md={1}></Grid>
<Grid item xs={12} md={4}>
<div>
<div style={{color:"#00BCD4",fontSize:"18px"}}>
<p>BASICAMENTE,</p>
<p>O usuário será notificado caso algum conteúdo tenha que ser retirado da Plataforma por falta de espaço no servidor.</p>
</div>
</Grid>
</Grid>
</MuiExpansionPanelDetailsColorido>
</MuiExpansionPanelMargem>
<MuiExpansionPanelMargem square expanded={expanded === 'panel6'} onChange={handleChange('panel6')}>
<MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel6d-content" id="panel6d-header">
<TypographyColorido>6. Privacidade da informação</TypographyColorido>
</MuiExpansionPanelSummaryColorido>
<MuiExpansionPanelDetailsColorido>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel6a-content"
id="panel6a-header"
>
<Typography className={classes.heading}>6. Privacidade da informação</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
......@@ -291,13 +300,17 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
</MuiExpansionPanelDetailsColorido>
</MuiExpansionPanelMargem>
<MuiExpansionPanelMargem square expanded={expanded === 'panel7'} onChange={handleChange('panel7')}>
<MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel7d-content" id="panel7d-header">
<TypographyColorido>7. Violação no sistema ou na base de dados</TypographyColorido>
</MuiExpansionPanelSummaryColorido>
<MuiExpansionPanelDetailsColorido>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel7a-content"
id="panel7a-header"
>
<Typography className={classes.heading}>7. Violação no sistema ou na base de dados</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
......@@ -312,13 +325,17 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
</MuiExpansionPanelDetailsColorido>
</MuiExpansionPanelMargem>
<MuiExpansionPanelMargem square expanded={expanded === 'panel8'} onChange={handleChange('panel8')}>
<MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel8d-content" id="panel8d-header">
<TypographyColorido>8. Sanções</TypographyColorido>
</MuiExpansionPanelSummaryColorido>
<MuiExpansionPanelDetailsColorido>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel8a-content"
id="panel8a-header"
>
<Typography className={classes.heading}>8. Sanções</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
......@@ -344,13 +361,17 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
</MuiExpansionPanelDetailsColorido>
</MuiExpansionPanelMargem>
<MuiExpansionPanelMargem square expanded={expanded === 'panel9'} onChange={handleChange('panel9')}>
<MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel9d-content" id="panel9d-header">
<TypographyColorido>9. Limitações de responsabilidade</TypographyColorido>
</MuiExpansionPanelSummaryColorido>
<MuiExpansionPanelDetailsColorido>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel9a-content"
id="panel9a-header"
>
<Typography className={classes.heading}>9. Limitações de responsabilidade</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
......@@ -369,13 +390,17 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
</MuiExpansionPanelDetailsColorido>
</MuiExpansionPanelMargem>
<MuiExpansionPanelMargem square expanded={expanded === 'panel10'} onChange={handleChange('panel10')}>
<MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel10d-content" id="panel10d-header">
<TypographyColorido>10.Inexistência de vínculo</TypographyColorido>
</MuiExpansionPanelSummaryColorido>
<MuiExpansionPanelDetailsColorido>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel10a-content"
id="panel10a-header"
>
<Typography className={classes.heading}>10.Inexistência de vínculo</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
......@@ -390,13 +415,17 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
</MuiExpansionPanelDetailsColorido>
</MuiExpansionPanelMargem>
<MuiExpansionPanelMargem square expanded={expanded === 'panel11'} onChange={handleChange('panel11')}>
<MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel11d-content" id="panel11d-header">
<TypographyColorido>11. Como reportar violações</TypographyColorido>
</MuiExpansionPanelSummaryColorido>
<MuiExpansionPanelDetailsColorido>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel11a-content"
id="panel11a-header"
>
<Typography className={classes.heading}>11. Como reportar violações</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
......@@ -413,13 +442,17 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
</MuiExpansionPanelDetailsColorido>
</MuiExpansionPanelMargem>
<MuiExpansionPanelMargem square expanded={expanded === 'panel12'} onChange={handleChange('panel12')}>
<MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel12d-content" id="panel12d-header">
<TypographyColorido>12. Modificações nos Termos de Uso</TypographyColorido>
</MuiExpansionPanelSummaryColorido>
<MuiExpansionPanelDetailsColorido>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel12a-content"
id="panel12a-header"
>
<Typography className={classes.heading}>12. Modificações nos Termos de Uso</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
......@@ -434,13 +467,17 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
</MuiExpansionPanelDetailsColorido>
</MuiExpansionPanelMargem>
<MuiExpansionPanelMargem square expanded={expanded === 'panel13'} onChange={handleChange('panel13')}>
<MuiExpansionPanelSummaryColorido expandIcon={<AddIcon />} aria-controls="panel13d-content" id="panel13d-header">
<TypographyColorido>13. Foro</TypographyColorido>
</MuiExpansionPanelSummaryColorido>
<MuiExpansionPanelDetailsColorido>
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel13a-content"
id="panel13a-header"
>
<Typography className={classes.heading}>13. Foro</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Grid container spacing={3}>
<Grid item xs={12} md={7}>
<div >
......@@ -455,8 +492,9 @@ export default function CustomizedExpansionPanels() {
</div>
</Grid>
</Grid>
</MuiExpansionPanelDetailsColorido>
</MuiExpansionPanelMargem>
</ExpansionPanelDetails>
</ExpansionPanel>
</div>
);
}
......@@ -16,7 +16,7 @@ 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 ExpansionPanels from '../Components/ExpansionPanels'
import SimpleExpansionPanels from '../Components/ExpansionPanels'
import Grid from '@material-ui/core/Grid';
import Modal from '../Components/Modal'
import styled from 'styled-components'
......@@ -230,7 +230,7 @@ class UserTerms extends Component {
<Grid item xs={12} md={1}></Grid>
<Grid item xs={12} md={10}>
<div style={{ marginBottom:"50px"}}>
<ExpansionPanels/>
<SimpleExpansionPanels/>
</div>
</Grid>
<Grid item xs={12} md={1}></Grid>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment