diff --git a/package-lock.json b/package-lock.json index 8732d939e4998c614aa728458c0e1afcd13a97c4..ee9283a8292e98659f283b80b0c55d78a844f146 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11832,6 +11832,11 @@ } } }, + "react-table": { + "version": "7.8.0", + "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.8.0.tgz", + "integrity": "sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA==" + }, "react-transition-group": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz", diff --git a/package.json b/package.json index 3c4f4814cb3cf49ec1a24c595471bc33f2db404d..ee2dc9cfbcc3335709336ad4f3c5ad0f3c9a7d70 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "react-scripts": "3.3.1", "react-select": "^4.3.1", "react-spinners": "^0.10.4", + "react-table": "^7.8.0", "react-virtualized-select": "^3.1.3", "redux": "^4.0.5", "superagent": "^6.1.0" diff --git a/src/App.scss b/src/App.scss index 1ec3d525ec04d3397c31534bd34ef05aceb18502..2798cfb41e377e4582f4916ac538356d8ae18fda 100644 --- a/src/App.scss +++ b/src/App.scss @@ -34,4 +34,28 @@ from { transform: rotate(0deg) } to { transform: rotate(360deg) } } -} \ No newline at end of file +} + +h1 { + font-size: 32px; +} + +h2 { + font-size: 24px; +} + +h3 { + font-size: 18.72px; +} + +h4, p, div, a, li, span { + font-size: 16px; +} + +h5 { + font-size: 13.28px; +} + +h6 { + font-size: 10.72px; +} diff --git a/src/components/BottomTableComponent.js b/src/components/BottomTableComponent.js index 9eeccd9b10b8f9562f1c48e4bdbdb8b43f7a56a0..7e694ae22eee695e8168dba18512052086b74520 100644 --- a/src/components/BottomTableComponent.js +++ b/src/components/BottomTableComponent.js @@ -24,6 +24,11 @@ import { Grid } from '@material-ui/core'; import attention from '../img/attention.svg'; import reload from '../img/reload.svg'; +import sortingArrow from '../img/sorting-arrow.svg'; +import downWhiteArrow from '../img/down-arrow-white.svg'; +import downloadIcon from '../img/download-icon.svg' + +import { useSortBy, useTable } from 'react-table' import Consult from './Consult'; import '../css/BottomTableComponent.scss'; @@ -45,6 +50,7 @@ function BottomTableComponent(props) { const [selectedFilters, setSelectedFilters] = useState([]); const [downloadFile, setdownloadFile] = useState([]); const [totalTableData, setTotalTableData] = useState({}); + const [formattedTableData, setFormattedTableData] = useState([]); useEffect(() => { const chartYearFilters = { @@ -103,7 +109,7 @@ function BottomTableComponent(props) { const evadido = tableData.reduce((sum, item) => sum + item.evadido, 0) const trancado = tableData.reduce((sum, item) => sum + item.trancado, 0) const concluinte = tableData.reduce((sum, item) => sum + item.concluinte, 0) - const taxaEvasao = ((evadido/(cursando+concluinte+evadido+trancado))*100).toFixed(2) + const taxaEvasao = ((cursando + concluinte + evadido + trancado) > 0) ? ((evadido/(cursando+concluinte+evadido+trancado))*100).toFixed(2) : 0 const totalObjectSituation = { cursando: cursando, @@ -317,6 +323,112 @@ function BottomTableComponent(props) { } } + useEffect(() => { + setFormattedTableData(tableData.map((course) => { + if (indicatorName === 'concluintes_licenciatura') { + const lowerName = course.course_name.toLowerCase() + const name = lowerName.charAt(0).toUpperCase() + lowerName.slice(1) + const total = course.finished_total + course.not_finished_total + return ( + { + curso: name, + concluintes: course.finished_total?.toLocaleString('pt-BR'), + nao_concluintes: course.not_finished_total?.toLocaleString('pt-BR'), + total: total?.toLocaleString('pt-BR'), + } + ) + } else if (indicatorName === 'situacao_ingressantes') { + const lowerName = course.course_name.toLowerCase() + const name = lowerName.charAt(0).toUpperCase() + lowerName.slice(1) + return ( + { + curso: name, + cursando: course.cursando?.toLocaleString('pt-BR'), + evadido: course.evadido?.toLocaleString('pt-BR'), + trancado: course.trancado?.toLocaleString('pt-BR'), + concluinte: course.concluinte?.toLocaleString('pt-BR'), + taxaEvasao: course.taxa_evasao ? course.taxa_evasao?.toLocaleString('pt-BR', localeOptions) : 0, + } + ) + } else if (indicatorName === 'situacao_matriculas') { + const lowerName = course.course_name.toLowerCase() + const name = lowerName.charAt(0).toUpperCase() + lowerName.slice(1) + return ( + { + curso: name, + cursando: course.cursando?.toLocaleString('pt-BR'), + evadido: course.evadido?.toLocaleString('pt-BR'), + trancado: course.trancado?.toLocaleString('pt-BR'), + concluinte: course.concluinte?.toLocaleString('pt-BR'), + } + ) + } else { + const lowerName = course.course_name.toLowerCase() + const name = lowerName.charAt(0).toUpperCase() + lowerName.slice(1) + const aB = course.inscritos_total !== 0 ? course.inscritos_total / course.vagas_totais : 0 + const cB = course.vagas_totais !== 0 ? course.ingresso_curso / course.vagas_totais: 0 + return ( + { + curso: name, + inscritos: course.inscritos_total?.toLocaleString('pt-BR'), + vagas: course.vagas_totais?.toLocaleString('pt-BR'), + ingressantes: course.ingresso_curso?.toLocaleString('pt-BR'), + inscritos_por_vagas: aB ? aB?.toLocaleString('pt-BR', localeOptions) : 0, + ingresso_por_vagas: cB ? cB?.toLocaleString('pt-BR', localeOptions) : 0, + } + ) + } + })) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [tableData, indicatorName]) + + const data = React.useMemo( + () => (formattedTableData), + [formattedTableData] + ) + + const localeOptions = { maximumFractionDigits: 2, minimumFractionDigits: 2 } + + const columns = React.useMemo(() => + (indicatorName === 'concluintes_licenciatura') ? + [{ Header: 'Curso', accessor: 'curso', Footer: 'Total' }, + { Header: 'Concluintes', accessor: 'concluintes', Footer: totalTableData?.finished_total?.toLocaleString('pt-BR') }, + { Header: 'Nao Concluintes', accessor: 'nao_concluintes', Footer: totalTableData?.not_finished_total?.toLocaleString('pt-BR') }, + { Header: 'Total', accessor: 'total', Footer: (totalTableData?.not_finished_total + totalTableData?.finished_total)?.toLocaleString('pt-BR') }] + : ((indicatorName === 'situacao_ingressantes') ? + [{ Header: 'Curso', accessor: 'curso', Footer: 'Total' }, + { Header: 'Cursando', accessor: 'cursando', Footer: totalTableData?.cursando?.toLocaleString('pt-BR') }, + { Header: 'Evadidos', accessor: 'evadido', Footer: totalTableData?.evadido?.toLocaleString('pt-BR') }, + { Header: 'Trancado', accessor: 'trancado', Footer: totalTableData?.trancado?.toLocaleString('pt-BR') }, + { Header: 'Concluintes', accessor: 'concluinte', Footer: totalTableData?.concluinte?.toLocaleString('pt-BR') }, + { Header: 'Taxa de evasão (%)', accessor: 'taxaEvasao', Footer: totalTableData?.taxaEvasao?.toLocaleString('pt-BR', localeOptions) }] + : ((indicatorName === 'situacao_matriculas') ? + [{ Header: 'Curso', accessor: 'curso', Footer: 'Total' }, + { Header: 'Cursando', accessor: 'cursando', Footer: totalTableData?.cursando?.toLocaleString('pt-BR') }, + { Header: 'Evadidos', accessor: 'evadido', Footer: totalTableData?.evadido?.toLocaleString('pt-BR') }, + { Header: 'Trancado', accessor: 'trancado', Footer: totalTableData?.trancado?.toLocaleString('pt-BR') }, + { Header: 'Concluintes', accessor: 'concluinte', Footer: totalTableData?.concluinte?.toLocaleString('pt-BR') }] + : [{ Header: 'Curso', accessor: 'curso', Footer: 'Total' }, + { Header: 'Inscritos (a)', accessor: 'inscritos', Footer: totalTableData?.inscritos?.toLocaleString('pt-BR') }, + { Header: 'Vagas (b)', accessor: 'vagas', Footer: totalTableData?.vagas?.toLocaleString('pt-BR') }, + { Header: 'Ingresso total (c)', accessor: 'ingressantes', Footer: totalTableData?.ingressantes?.toLocaleString('pt-BR') }, + { Header: 'a/b', accessor: 'inscritos_por_vagas', Footer: totalTableData?.inscritos_por_vagas?.toLocaleString('pt-BR', localeOptions) }, + { Header: 'c/b', accessor: 'ingresso_por_vagas', Footer: totalTableData?.ingresso_por_vagas?.toLocaleString('pt-BR', localeOptions) }] + ) + ), + // eslint-disable-next-line react-hooks/exhaustive-deps + [indicatorName, totalTableData] + ) + + const { + getTableProps, + getTableBodyProps, + headerGroups, + footerGroups, + rows, + prepareRow, + } = useTable({ columns, data }, useSortBy) + return ( <> { loadingData ? @@ -360,156 +472,86 @@ function BottomTableComponent(props) { download="tabela.csv" className="download-button" > - Baixar + <img className="download-icon" src={downloadIcon} alt="Download"/> </a> <div className="table-container"> <div className="table-overflow-container"> - <table cellSpacing="0" cellPadding="0"> + <table {...getTableProps()} cellSpacing="0" cellPadding="0"> <thead> { - indicatorName === 'concluintes_licenciatura' ? - <tr> - <th>Curso</th> - <th>Concluintes</th> - <th>Não Concluintes</th> - <th>Total</th> - </tr> - : ( - indicatorName === 'situacao_ingressantes' ? - <tr> - <th>Curso</th> - <th>Cursando</th> - <th>Evadidos</th> - <th>Trancado</th> - <th>Concluintes</th> - <th>Taxa de evasão (%)</th> + headerGroups.map(headerGroup => ( + <tr {...headerGroup.getHeaderGroupProps()}> + { + headerGroup.headers.map(column => ( + <th {...column.getHeaderProps(column.getSortByToggleProps({ title: 'Ordenar'}))}> + <div className='header-container'> + {column.render('Header')} + </div> + <span> + { column.isSorted ? column.isSortedDesc + ? + <img + className='sided-arrow' + src={downWhiteArrow} + alt="Flecha para baixo" + /> + : + <img + className='sided-arrow up' + src={downWhiteArrow} + alt="Flecha para cima" + /> + : <img + src={sortingArrow} + alt="Flecha para baixo e para cima" + />} + </span> + </th> + )) + } </tr> - : ( - indicatorName === 'situacao_matriculas' ? - <tr> - <th>Curso</th> - <th>Cursando</th> - <th>Evadidos</th> - <th>Trancado</th> - <th>Concluintes</th> - </tr> - : - <tr> - <th>Curso</th> - <th>Inscritos (a)</th> - <th>Vagas (b)</th> - <th>Ingresso total (c)</th> - <th>a/b</th> - <th>c/b</th> - </tr> - ) - ) + )) } </thead> - <tbody> - { - tableData.map((course, index) => { - if (indicatorName === 'concluintes_licenciatura') { - const lowerName = course.course_name.toLowerCase() - const name = lowerName.charAt(0).toUpperCase() + lowerName.slice(1) - const total = course.finished_total + course.not_finished_total - return ( - <tr key={index} className={`${index % 2 !== 0 ? 'tr-alt' : ''}`}> - <td>{name}</td> - <td>{course.finished_total.toLocaleString('pt-BR')}</td> - <td>{course.not_finished_total.toLocaleString('pt-BR')}</td> - <td>{total.toLocaleString('pt-BR')}</td> - </tr> - ) - } else if (indicatorName === 'situacao_ingressantes') { - const lowerName = course.course_name.toLowerCase() - const name = lowerName.charAt(0).toUpperCase() + lowerName.slice(1) - return ( - <tr key={index} className={`${index % 2 !== 0 ? 'tr-alt' : ''}`}> - <td>{name}</td> - <td>{course.cursando.toLocaleString('pt-BR')}</td> - <td>{course.evadido.toLocaleString('pt-BR')}</td> - <td>{course.trancado.toLocaleString('pt-BR')}</td> - <td>{course.concluinte.toLocaleString('pt-BR')}</td> - <td>{course.taxa_evasao ? course.taxa_evasao.toLocaleString('pt-BR') : 0}</td> - </tr> - ) - } else if (indicatorName === 'situacao_matriculas') { - const lowerName = course.course_name.toLowerCase() - const name = lowerName.charAt(0).toUpperCase() + lowerName.slice(1) - return ( - <tr key={index} className={`${index % 2 !== 0 ? 'tr-alt' : ''}`}> - <td>{name}</td> - <td>{course.cursando.toLocaleString('pt-BR')}</td> - <td>{course.evadido.toLocaleString('pt-BR')}</td> - <td>{course.trancado.toLocaleString('pt-BR')}</td> - <td>{course.concluinte.toLocaleString('pt-BR')}</td> - </tr> - ) - } else { - const lowerName = course.course_name.toLowerCase() - const name = lowerName.charAt(0).toUpperCase() + lowerName.slice(1) - const aB = course.inscritos_total !== 0 ? course.inscritos_total / course.vagas_totais : 0 - const cB = course.vagas_totais !== 0 ? course.ingresso_curso / course.vagas_totais: 0 + <tbody {...getTableBodyProps()}> + { + rows.map((row, index) => { + prepareRow(row) + return ( + <tr {...row.getRowProps()} className={`${index % 2 !== 0 ? 'tr-alt' : ''}`}> + { + row.cells.map(cell => { return ( - <tr key={index} className={`${index % 2 !== 0 ? 'tr-alt' : ''}`}> - <td>{name}</td> - <td>{course.inscritos_total.toLocaleString('pt-BR')}</td> - <td>{course.vagas_totais.toLocaleString('pt-BR')}</td> - <td>{course.ingresso_curso.toLocaleString('pt-BR')}</td> - <td>{aB ? aB.toFixed(2).toLocaleString('pt-BR') : 0}</td> - <td>{cB ? cB.toFixed(2).toLocaleString('pt-BR') : 0}</td> - </tr> + <td {...cell.getCellProps()}> + { cell.render('Cell') } + </td> ) - } - }) - } - { - indicatorName === 'concluintes_licenciatura' ? - <tr className='tr-total'> - <td>Total</td> - <td>{totalTableData.finished_total.toLocaleString('pt-BR')}</td> - <td>{totalTableData.not_finished_total.toLocaleString('pt-BR')}</td> - <td>{totalTableData.finished_sum.toLocaleString('pt-BR')}</td> + }) + } </tr> - : ( - indicatorName === 'situacao_ingressantes' ? - <tr className='tr-total'> - <td>Total</td> - <td>{totalTableData.cursando.toLocaleString('pt-BR')}</td> - <td>{totalTableData.evadido.toLocaleString('pt-BR')}</td> - <td>{totalTableData.trancado.toLocaleString('pt-BR')}</td> - <td>{totalTableData.concluinte.toLocaleString('pt-BR')}</td> - <td>{totalTableData.taxaEvasao.toLocaleString('pt-BR')}</td> - </tr> - : ( - indicatorName === 'situacao_matriculas' ? - <tr className='tr-total'> - <td>Total</td> - <td>{totalTableData.cursando.toLocaleString('pt-BR')}</td> - <td>{totalTableData.evadido.toLocaleString('pt-BR')}</td> - <td>{totalTableData.trancado.toLocaleString('pt-BR')}</td> - <td>{totalTableData.concluinte.toLocaleString('pt-BR')}</td> - </tr> - : - <tr className='tr-total'> - <td>Total</td> - <td>{totalTableData.inscritos.toLocaleString('pt-BR')}</td> - <td>{totalTableData.vagas.toLocaleString('pt-BR')}</td> - <td>{totalTableData.ingressantes.toLocaleString('pt-BR')}</td> - <td>{totalTableData.inscritos_por_vagas.toFixed(2).toLocaleString('pt-BR')}</td> - <td>{totalTableData.ingresso_por_vagas.toFixed(2).toLocaleString('pt-BR')}</td> - </tr> - ) ) - } + }) + } </tbody> + <tfoot> + { + footerGroups.map(group => ( + <tr {...group.getFooterGroupProps()}> + { + group.headers.map(column => ( + <td {...column.getFooterProps()}>{column.render('Footer')}</td> + )) + } + </tr> + )) + } + </tfoot> </table> </div> </div> </> } - <p>{chartInfo.notes}</p> + <p className='box-note'>{chartInfo.notes}</p> </div> </div> } diff --git a/src/components/Charts/BarChartComponent.js b/src/components/Charts/BarChartComponent.js index c950eec7293a6c9f73fb7afd5e30ccc21dc24af7..d504c97b36424d8b2094235e68e277547dda65ea 100644 --- a/src/components/Charts/BarChartComponent.js +++ b/src/components/Charts/BarChartComponent.js @@ -35,7 +35,6 @@ function BarChartComponent(props) { // const { title, data, education } = props; const { title, years, chartLocation, dimension_data, dims, loading, filtersLocation, filtersEducation, disciplines, contrastSet, horizontalChart } = props; - const [selectedFilters, setSelectedFilters] = useState([]); const [isOpen, setIsOpen] = useState(false); const [noDataComponentToggle, setNoDataComponentToggle] = useState(false); @@ -84,8 +83,8 @@ function BarChartComponent(props) { mode: contrastSet ? 'dark' : 'light', }, dataLabels: { - enabled: true, - formatter: value => value.toLocaleString('pt-BR'), + enabled: false, + formatter: value => value?.toLocaleString('pt-BR'), style: { colors: contrastSet ? ['#fff'] : ['#000'], }, @@ -150,7 +149,7 @@ function BarChartComponent(props) { }, xaxis: { labels: { - formatter: value => value.toLocaleString('pt-BR'), + formatter: value => value?.toLocaleString('pt-BR'), minHeight: 80, rotateAlways: true, } @@ -207,7 +206,6 @@ function BarChartComponent(props) { formattedFilters + ', ' + mappedFilters[idx][jdx] } } - setSelectedFilters(formattedFilters) }, [filtersEducation]) @@ -220,14 +218,14 @@ function BarChartComponent(props) { newOptions.yaxis.labels.style.colors = '#fff'; newOptions.chart.background = '#000'; newOptions.theme.mode = 'dark'; - newOptions.dataLabels.style.colors = ['#fff']; + // newOptions.dataLabels.style.colors = ['#fff']; } else { newOptions.legend.labels.colors = '#3c3c3b'; newOptions.xaxis.labels.style.colors = '#3c3c3b'; newOptions.yaxis.labels.style.colors = '#3c3c3b'; newOptions.chart.background = '#fff'; newOptions.theme.mode = 'light'; - newOptions.dataLabels.style.colors = ['#000']; + // newOptions.dataLabels.style.colors = ['#000']; } return newOptions; @@ -267,7 +265,7 @@ function BarChartComponent(props) { newOptions.xaxis.categories.push(last_year); } - newOptions.yaxis.labels.formatter = value => value.toLocaleString('pt-BR'); + newOptions.yaxis.labels.formatter = value => value?.toLocaleString('pt-BR'); if (location.pathname === routes.adequacao_disciplina) { let adequacyPercentages = [] @@ -311,7 +309,7 @@ function BarChartComponent(props) { newOptions.grid.xaxis.lines.show = true newOptions.xaxis.labels.rotateAlways = true newOptions.xaxis.labels.minHeight = 80 - newOptions.xaxis.labels.formatter = value => value.toLocaleString('pt-BR'); + newOptions.xaxis.labels.formatter = value => value?.toLocaleString('pt-BR'); } setChartSeries(dataArray); @@ -335,7 +333,7 @@ function BarChartComponent(props) { newOptions.grid.xaxis.lines.show = true newOptions.xaxis.labels.rotateAlways = true newOptions.xaxis.labels.minHeight = 80 - newOptions.xaxis.labels.formatter = value => value.toLocaleString('pt-BR'); + newOptions.xaxis.labels.formatter = value => value?.toLocaleString('pt-BR'); } if (location.pathname === routes.situacao_ingressantes) { @@ -397,7 +395,7 @@ function BarChartComponent(props) { newOptions.responsive[0].options.xaxis.labels.formatter = value => value + '%'; newOptions.yaxis.forceNiceScale = false; } else { - newOptions.yaxis.labels.formatter = value => value.toLocaleString('pt-BR'); + newOptions.yaxis.labels.formatter = value => value?.toLocaleString('pt-BR'); newOptions.yaxis.forceNiceScale = true; } @@ -430,7 +428,7 @@ function BarChartComponent(props) { } for (i = 0; i < size; i++) { if (location.pathname === routes.adequacao_disciplina) { - newSeries[i].data[i] = ((suitable[i] / total[i]) * 100).toFixed(1) + newSeries[i].data[i] = total[i] !== 0 ? ((suitable[i] / total[i]) * 100).toFixed(1) : 0 } else { newSeries[i].data[i] = total[i] - suitable[i] } @@ -463,6 +461,15 @@ function BarChartComponent(props) { // eslint-disable-next-line react-hooks/exhaustive-deps }, [loading, filtersLocation, contrastSet]); + function generateSubtitle() { + let data = props.data; + let tempString = `${chartLocation} - ` + tempString = tempString.concat(`${data[0]?.year} a ${data[data?.length - 1]?.year}`) + + return tempString; + } + + return ( <> { loading ? @@ -476,9 +483,7 @@ function BarChartComponent(props) { : <div className={`bar-chart-container ${contrastSet ? "high-contrast-bar-chart" : ""}`}> { - years[0] === years[1] ? - <h4 className="bar-chart-subtitle">{`${chartLocation} - ${years[0]}`}</h4> : - <h4 className="bar-chart-subtitle">{`${chartLocation} - ${years[0]} a ${years[1]}`}</h4> + <h4 className="bar-chart-subtitle">{ generateSubtitle() }</h4> } { selectedFilters !== '' && diff --git a/src/components/Charts/PieChartComponent.js b/src/components/Charts/PieChartComponent.js index f09eee4879e94767075a4eda7a36c623de6db63d..9d1e561f02345bd3d470ba9e5fbdb14ca1329ebf 100644 --- a/src/components/Charts/PieChartComponent.js +++ b/src/components/Charts/PieChartComponent.js @@ -46,8 +46,10 @@ function PieChartComponent(props) { let newSeries = []; data.forEach((item) => { - newLabels.push(item[dim + "_name"]); - newSeries.push(item["total"]); + if (!newLabels.includes(item[dim + "_name"])) { + newLabels.push(item[dim + "_name"]); + newSeries.push(item["total"]); + } }); if (pathLocation.pathname === routes.adequacao_disciplina) { @@ -118,12 +120,12 @@ function PieChartComponent(props) { newOptions.labels = labels newOptions.plotOptions.pie.donut.labels.total.formatter = (w) => { - return w.globals.seriesTotals.reduce((a, b) => a + b, 0).toLocaleString('pt-BR'); + return w.globals.seriesTotals.reduce((a, b) => a + b, 0)?.toLocaleString('pt-BR'); } newOptions.tooltip.y.formatter = (value, opts) => { const total = opts.globals.seriesTotals.reduce((a, b) => a + b, 0) const percent = ((value / total) * 100).toFixed(1) - return value.toLocaleString('pt-BR') + ` (${percent}%)` + return value?.toLocaleString('pt-BR') + ` (${percent}%)` } if (pathLocation.pathname === routes.adequacao_disciplina) { @@ -250,7 +252,7 @@ function PieChartComponent(props) { formatter: (w) => { return w.globals.seriesTotals.reduce((a, b) => { return a + b; - }, 0).toLocaleString('pt-BR'); + }, 0)?.toLocaleString('pt-BR'); }, }, value: { @@ -265,7 +267,7 @@ function PieChartComponent(props) { labels: labels, dataLabels: { enabled: true, - formatter: value => value.toLocaleString('pt-BR'), + formatter: value => value?.toLocaleString('pt-BR'), style: { colors: ['#000'], }, @@ -275,7 +277,7 @@ function PieChartComponent(props) { formatter: (value, opts) => { const total = opts.globals.seriesTotals.reduce((a, b) => a + b, 0) const percent = ((value / total) * 100).toFixed(1) - return value.toLocaleString('pt-BR') + ` (${percent}%)` + return value?.toLocaleString('pt-BR') + ` (${percent}%)` }, }, }, @@ -329,7 +331,7 @@ function PieChartComponent(props) { /> } </Grid> - <p>{notes}</p> + <p className='box-note'>{notes}</p> </Grid> </Grid> } diff --git a/src/components/Dropdown/FixedFiltersComponent.js b/src/components/Dropdown/FixedFiltersComponent.js index b3bb29b11e20752f7c3decf4fd5c2e49056f73c4..9b13136c21c8758fbd861fab89466015eaeba2df 100644 --- a/src/components/Dropdown/FixedFiltersComponent.js +++ b/src/components/Dropdown/FixedFiltersComponent.js @@ -174,7 +174,7 @@ function FixedFiltersComponent(props) { ...provided, boxShadow: state.isFocused ? '0 0 0 1px rgba(122, 96, 166, 0.5)' : 0, width: '100%', - height: 40, + height: 42, background: state.hasValue ? (contrastSet ? '#ffff00' : '#7a60a6') : (state.isDisabled ? @@ -189,15 +189,18 @@ function FixedFiltersComponent(props) { cursor: 'pointer', '&:hover': { border: contrastSet ? '2px solid #ffff00' : '2px solid #7a60a6', - } + }, }), placeholder: (provided, state) => ({ ...provided, + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', color: state.isDisabled ? (contrastSet ? '#ffff00' : '#bfbfbf') : (contrastSet ? '#ffff00' : '#7a60a6'), fontSize: 20, + paddingBottom: 5, }), singleValue: (provided, state) => ({ @@ -206,6 +209,12 @@ function FixedFiltersComponent(props) { (contrastSet ? '#000' : '#fff') : (contrastSet ? '#ffff00' : '#7a60a6'), fontSize: 20, + paddingBottom: 5, + }), + + valueContainer: (provided) => ({ + ...provided, + height: 'inherit', }), input: (provided) => ({ @@ -365,7 +374,7 @@ function FixedFiltersComponent(props) { isDisabled={path[4] === 'inscritos_vagas_ingressantes'} onChange={(event) => { updateFilters('city', event ? event.value : 0) - setCityLabel(event ? event.label : '') + setCityLabel(event ? event.label : '') }} value={ cityLabel !== '' ? { diff --git a/src/components/FaixaComponent.js b/src/components/FaixaComponent.js index bc634176271630a7918275a98594c75ee128f7d2..2d5c0c4032057c20be8c8985179b2c94faef57af 100644 --- a/src/components/FaixaComponent.js +++ b/src/components/FaixaComponent.js @@ -18,7 +18,7 @@ You should have received a copy of the GNU General Public License along with mapfor. If not, see <https://www.gnu.org/licenses/>. */ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { Grid, ClickAwayListener } from '@material-ui/core'; import { Link, useLocation } from 'react-router-dom'; import { useSelector, useDispatch } from 'react-redux'; @@ -46,17 +46,25 @@ import highContrast from '../img/highContrast.svg'; function FaixaComponent() { const location = useLocation() + const [textSizeChange, setTextSizeChange] = useState(0); const [visible, setVisible] = useState(false); const [dropdown, setDropdown] = useState(false); - const [isOpen0, setIsOpen0] = React.useState(false); - const [isOpen1, setIsOpen1] = React.useState(false); - const [isOpen2, setIsOpen2] = React.useState(false); - const [isOpen3, setIsOpen3] = React.useState(false); - const [proxModal, setProxModal] = React.useState(() => setIsOpen1); + const [isOpen0, setIsOpen0] = useState(false); + const [isOpen1, setIsOpen1] = useState(false); + const [isOpen2, setIsOpen2] = useState(false); + const [isOpen3, setIsOpen3] = useState(false); + const [proxModal, setProxModal] = useState(() => setIsOpen1); const storeState = useSelector(state => state); const dispatch = useDispatch(); + let exludeList = ['leaflet', 'apex', 'legend', 'map', 'text-home', 'note', 'attribution', 'MuiGrid']; + + + useEffect(() => { + resetFontSize(); + }, [location]) + function closeModal(openFunction){ openFunction(false); } @@ -92,6 +100,101 @@ function FaixaComponent() { } } + function resetFontSize() { + let classElements = document.getElementsByTagName("*"); + for (let i = 0; i < classElements.length; i++) { + let elem = classElements[i]; + let dontChange = false; + elem.classList.forEach((name) => { + if (name.includes('apexcharts-legend-text')) { + dontChange = true; + } + }) + if (!dontChange) { + elem.style.removeProperty('font-size'); + elem.style.removeProperty('line-height'); + elem.style.removeProperty('scale'); + } + } + setTextSizeChange(0); + } + + function decreaseFontSize() { + if (textSizeChange > 1) { + let classElements = document.getElementsByTagName("*"); + for (let i = 0; i < classElements.length; i++) { + let elem = classElements[i]; + let styles = getComputedStyle(elem); + let dontChange = false; + elem.classList.forEach((name) => { + if (exludeList.forEach((subname) => { + if (name.includes(subname)) { + dontChange = true; + } + })) + if (name.includes('arrow')) { + elem.style.scale = String(parseFloat(elem.style.scale) / 1.2); + } + }) + if (elem.title !== undefined) { + if (elem.title === 'A JS library for interactive maps') { + dontChange = true; + } + } + if (elem.tagName === 'tspan') { + dontChange = true; + } + if (!dontChange) { + elem.style.fontSize = (parseFloat(styles.fontSize.slice(0, styles.fontSize.length - 2)) / 1.20 + 'px'); + elem.style.lineHeight = (parseFloat(styles.lineHeight.slice(0, styles.lineHeight.length - 2)) / 1.20 + 'px'); + } + } + setTextSizeChange(textSizeChange - 1); + } + else if (textSizeChange === 1) + resetFontSize(); + } + + function increaseFontSize() { + if (textSizeChange < 3) { + let classElements = document.getElementsByTagName("*"); + for (let i = 0; i < classElements.length; i++) { + let elem = classElements[i]; + let styles = getComputedStyle(elem); + let dontChange = false; + + // check if element contains any class from the list of classes that shouldn't be changed + elem.classList.forEach((name) => { + if (exludeList.forEach((subname) => { + if (name.includes(subname)) { + dontChange = true; + } + })) + if (name.includes('arrow')) { + elem.style.scale = (elem.style.scale !== '') ? String(parseFloat(elem.style.scale) * 1.2) : String(1.2); + } + }) + if (elem.title !== undefined) { + if (elem.title === 'A JS library for interactive maps') { + dontChange = true; + } + } + if (elem.tagName === 'tspan') { + dontChange = true; + } + if (elem.tagName.toLowerCase().includes('br')) { + dontChange = true; + } + + if (!dontChange) { + elem.style.fontSize = (parseFloat(styles.fontSize.slice(0, styles.fontSize.length - 2)) * 1.20 + 'px'); + elem.style.lineHeight = (parseFloat(styles.lineHeight.slice(0, styles.lineHeight.length - 2)) * 1.20 + 'px'); + } + } + setTextSizeChange(textSizeChange + 1); + } + } + const contrastSet = storeState.highContrast.set; return ( @@ -134,12 +237,18 @@ function FaixaComponent() { <a href="#footer">Ir para o rodapé 4</a> </div> */} <div className="access-tools"> - {/* <div className="access-tools-items"> + <div className="access-tools-items"> <p>Tamanho do texto:</p> - <a href="/#">A+</a> - <a href="/#">A-</a> - <a href="/#">A</a> - </div> */} + <button onClick={increaseFontSize} className="contrast-button" id='A+'> + A+ + </button> + <button onClick={decreaseFontSize} className="contrast-button" id='A-'> + A- + </button> + <button onClick={resetFontSize} className="contrast-button" id='A'> + A + </button> + </div> <button onClick={updateContrast} className="contrast-button"> Contraste <img src={contrastSet ? highContrast : contrast} alt="Contraste"/> @@ -221,21 +330,12 @@ function FaixaComponent() { <Link to={routes.contato} - //href='https://dadoseducacionais.c3sl.ufpr.br/#/contato' onClick={() => visible ? setVisible(!visible) : {}} className={`nav-link ${location.pathname === routes.contato ? 'selected' : ''}`} > Contato </Link> - {/* <Link - to={routes.contato} - onClick={() => visible ? setVisible(!visible) : {}} - className={`nav-link ${location.pathname === routes.contato ? 'selected' : ''}`} - > - Contato - </Link> */} - {/* <button className="auth-button">Entrar</button> <button className="auth-button white">Cadastrar</button> */} {/* the login and signup options were suspended for the first release, diff --git a/src/components/Map/LegendComponent.js b/src/components/Map/LegendComponent.js index 831ab2d20aed25e167dc4d08da68c37df6c04028..548c320c947282948622dfd0900d0cf90dafacb2 100644 --- a/src/components/Map/LegendComponent.js +++ b/src/components/Map/LegendComponent.js @@ -51,6 +51,7 @@ class LegendComponent extends MapControl { componentDidMount() { this.legend = L.control({ position: "bottomright" }); + this.legend.update = () => { let title = '<h4 class="legend-title">' if (this.props.title) diff --git a/src/components/Map/MapComponent.js b/src/components/Map/MapComponent.js index 7ab54b15cff4601ea5b363142b7504276cfcd694..091f35e0eb11388ef170dc4bf5b237d4e57e9fa5 100644 --- a/src/components/Map/MapComponent.js +++ b/src/components/Map/MapComponent.js @@ -421,7 +421,7 @@ function MapComponent(props) { titleValue = finishedDataObj.length !== 0 ? finishedDataObj[0].total.toLocaleString('pt-BR') : '0' } else if (path[4] === 'situacao_ingressantes') { const maxYearDataObj = mapTitleData.filter(item => item.year === titleYear) - percentEvaded = maxYearDataObj.length !== 0 ? maxYearDataObj[0].taxa_evasao.toFixed(1) : 0 + percentEvaded = maxYearDataObj.length !== 0 ? maxYearDataObj[0]?.taxa_evasao?.toFixed(1) : 0 if (percentEvaded === '0.0') percentEvaded = 0 } else if (path[4] === 'situacao_matriculas') { const maxYearDataObj = mapTitleData.filter(item => item.year === titleYear) @@ -462,6 +462,8 @@ function MapComponent(props) { case 'concluintes_licenciatura': return titleLocation + ' tem ' + titleValue + ' concluintes em cursos de licenciatura, ' + titleYear case 'situacao_ingressantes': + if (percentEvaded === undefined) + percentEvaded = 0; return titleLocation + ' tem ' + percentEvaded + '% de evasão em cursos de licenciatura, ' + titleYear case 'situacao_matriculas': return titleLocation + ' tem ' + maxYearCoursing + ' matrículas cursando, ' + maxYearEvaded + ' evadidos, ' + @@ -544,7 +546,7 @@ function MapComponent(props) { } <Map ref={mapRef} bounds={mapBounds} minZoom={7} zoomSnap={0.1}> <TileLayer - attribution="<p>&copy <a href='http://osm.c3sl.ufpr.br/'>OpenStreetMap</a> contributors</p>" + attribution="<p class= 'attribution-text' >&copy <a class= 'attribution-link' href='http://osm.c3sl.ufpr.br/'>OpenStreetMap</a> contributors</p>" url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> diff --git a/src/components/NoDataComponent.js b/src/components/NoDataComponent.js index 96ead1b863d16c5a7c67a5bb7729da1d4da913e4..d597f450668b606cf7645e3806e4604f944de850 100644 --- a/src/components/NoDataComponent.js +++ b/src/components/NoDataComponent.js @@ -25,7 +25,7 @@ import '../css/NoDataComponent.scss'; import attention from '../img/attention.svg'; import reload from '../img/reload.svg'; -import iconClose from '../img/close.svg'; +// import iconClose from '../img/close.svg'; function NoDataComponent(props) { Modal.setAppElement('#root'); @@ -36,13 +36,13 @@ function NoDataComponent(props) { className={`no-data-modal ${contrastSet ? "high-contrast-no-data-modal" : ""}`} overlayClassName='modal-overlay' isOpen={props.open} - onRequestClose={() => props.closeModal(props.openFunction)} + // onRequestClose={() => props.closeModal(props.openFunction)} > - <div className="modal-header-container"> + {/* <div className="modal-header-container"> <button onClick={() => props.closeModal(props.openFunction)} > <img alt="Fechar" src={iconClose} /> </button> - </div> + </div> */} <img className="attention-icon" alt="Atenção" src={attention} /> <h2> Ops, parece que não possuímos dados desta diff --git a/src/components/Pages/HomePageComponent.js b/src/components/Pages/HomePageComponent.js index cea7325d7fde726ebfed78e428f46c9250ddb543..29d0bfed292765ac9be184d910d16f03518b1d15 100644 --- a/src/components/Pages/HomePageComponent.js +++ b/src/components/Pages/HomePageComponent.js @@ -110,7 +110,7 @@ function HomePageComponent() { <img src={contrastSet ? highIconFormation : iconFormation} className="icon" alt="Formação"/> </i> <div className="content-container"> - <h2 className="box-text">Qual é a formação dos(as) docentes na educação básica?</h2> + <h1 className="box-text">Qual é a formação dos(as) docentes na educação básica?</h1> <Button className="button-box pink" onClick={() => openTutorial(1)} > Consultar </Button> diff --git a/src/components/Pages/TeamComponent.js b/src/components/Pages/TeamComponent.js index 9ec09ca17ccfb09c5f6334560bcda2dfe90b2ae7..969399161e23ab0f33a7d7c16c9493128d68767b 100644 --- a/src/components/Pages/TeamComponent.js +++ b/src/components/Pages/TeamComponent.js @@ -55,7 +55,7 @@ function TeamComponent(){ <p>Profª Maria Tereza Carneiro Soares</p> </div> <div className="coordination"> - <h1>Coordenação Geral</h1> + <h1>Coordenação Geral (2016-2020)</h1> <h2>Profa. Simone Medida</h2> <p>Setor de Ciências Exatas</p> </div> @@ -64,27 +64,20 @@ function TeamComponent(){ </Grid> <Grid className="teachers-container"> - <h1>Docentes</h1> + <h1>Laboratório de Dados Educacionais</h1> + <h1>Docentes Coordenadores</h1> <Grid className="teachers"> - <Grid className="teacher-item"> - <h2>Profa. Gabriela Schneider</h2> - <p>Educação / DEPLAE / Laboratório de Dados Educacionais</p> - </Grid> <Grid className="teacher-item"> <h2>Profa. Adriana Dragone Silveira</h2> - <p>Educação / DEPLAE / Laboratório de Dados Educacionais</p> + <p>UFPR / Departamento de Planejamento e Administração Escolar</p> </Grid> <Grid className="teacher-item"> - <h2>Prof. Thiago Alves</h2> - <p>UFG / Laboratório de Dados Educacionais</p> - </Grid> - <Grid className="teacher-item"> - <h2>Prof. Marcos Didonet Del Fabro</h2> - <p>Informática / Laboratório de Dados Educacionais / C3SL</p> + <h2>Profa. Gabriela Schneider</h2> + <p>UFPR / Departamento de Planejamento e Administração Escolar</p> </Grid> <Grid className="teacher-item"> - <h2>Prof. Silvana Phillippi Camboim</h2> - <p>Programa de Pós-Graduação em Geodésia</p> + <h2>Prof. Thiago Alves</h2> + <p>UFG / Faculdade de Administração, Ciências Contábeis e Ciências Econômicas</p> </Grid> </Grid> </Grid> @@ -93,38 +86,47 @@ function TeamComponent(){ <img src={teamAnalysis} alt="Equipe" className="img-team-2"/> <Grid className="data-container"> <Grid className="educational-data"> - <h1>Análise de dados educacionais</h1> + <h1>Analistas de dados educacionais</h1> <Grid className="educational-data-text"> + <Grid className="educational-data-item"> + <h2>Alessandra Biscaia de Andrade</h2> + <p>UFPR / Pós-graduando em educação</p> + </Grid> <Grid className="educational-data-item"> <h2>Andréa Polena</h2> - <p>Laboratório de Dados Educacionais</p> + <p>UFPR / Pós-graduando em educação</p> </Grid> <Grid className="educational-data-item"> <h2>Jaqueline Aparecida Cardoso</h2> - <p>Laboratório de Dados Educacionais</p> + <p>Pós-graduando em educação</p> </Grid> <Grid className="educational-data-item"> - <h2>Alessandra Biscaia de Andrade</h2> - <p>Laboratório de Dados Educacionais</p> + <h2>Raphael Cardoso</h2> + <p>Pós-graduando em educação</p> </Grid> </Grid> </Grid> - <Grid className="spacial-data"> - <h1>Análise de dados espaciais</h1> - <Grid className="spacial-data-item"> - <h2>Gabriele Silveira Camara</h2> - <p>Programa de Pós-Graduação em Geodésia</p> - </Grid> - </Grid> </Grid> </Grid> <Grid className="development-container"> - <h1>Equipe de Desenvolvimento da Plataforma</h1> + <h1>Equipe de Desenvolvimento da Plataforma - C3SL</h1> + <h1>Docentes Coordenadores</h1> + <Grid className="coordenators-container"> + <Grid className='coordenators-item'> + <h2>Prof. Marcos Sfair Sunye</h2> + <p>UFPR / Departamento de Informática</p> + </Grid> + <Grid className="coordenators-item"> + <h2>Prof. Marcos Didonet <br/> (2015 - 2021)</h2> + <p>UFPR / Departamento de Informática</p> + </Grid> + </Grid> + <h1>Estudantes</h1> <Grid className="developers-container"> <Grid className="developers-item"> - <h2>Fernando Claudecir Erd <br/> (2018 - 2020)</h2> - <p>Laboratório de Dados Educacionais / C3SL</p> + <h2>Fernando Gbur dos Santos</h2> + <p>UFPR/ Graduando em Computação</p> </Grid> <Grid className="developers-item"> <h2>Fernando Gbur dos Santos</h2> @@ -132,44 +134,67 @@ function TeamComponent(){ </Grid> <Grid className="developers-item"> <h2>Guiusepe Oneda Dal Pai</h2> - <p>Laboratório de Dados Educacionais / C3SL</p> + <p>UFPR/ Graduando em Computação</p> </Grid> <Grid className="developers-item"> <h2>Henrique Varella Ehrenfried</h2> - <p>Laboratório de Dados Educacionais / C3SL</p> - </Grid> - <Grid className="developers-item"> - <h2>João Pedro Picolo <br/> (2020)</h2> - <p>Laboratório de Dados Educacionais / C3SL</p> + <p>UFPR/ Pós-graduando em Computação</p> </Grid> <Grid className="developers-item"> - <h2>João Victor Winandy Ponaco <br/> (2019)</h2> - <p>Laboratório de Dados Educacionais / C3SL</p> + <h2>João Pedro Kieras Oliveira</h2> + <p>UFPR/ Graduando em Computação</p> </Grid> <Grid className="developers-item"> <h2>Lucas Soni Teixeira</h2> - <p>Laboratório de Dados Educacionais / C3SL</p> - </Grid> - <Grid className="developers-item"> - <h2>Miguel Angelo Neumann Salerno <br/> (2021 - 2022)</h2> - <p>Laboratório de Dados Educacionais / C3SL</p> + <p>UFPR/ Graduando em Computação</p> </Grid> <Grid className="developers-item"> <h2>Pietro Polinari Cavassin</h2> - <p>Laboratório de Dados Educacionais / C3SL</p> - </Grid> - <Grid className="developers-item"> - <h2>Victor Picussa <br/> (2019 - 2020)</h2> - <p>Laboratório de Dados Educacionais / C3SL</p> + <p>UFPR/ Graduando em Computação</p> </Grid> </Grid> </Grid> + <Grid className='specialdata-container'> + <h1>Equipe de Dados Especiais- Free Geospatial Laboratory</h1> + <h1>Docente Coordenadora</h1> + <Grid className='specialdata-item'> + <h2>Prof. Silvana Phillippi Camboim</h2> + <p>Programa de Pós-Graduação em Geodésia</p> + </Grid> + </Grid> + <Grid className="design-container"> <h1>Design</h1> <h2>Giulia Morgan Riva</h2> </Grid> + <Grid className="development-container"> + <h1>Ex-integrantes</h1> + <Grid className="developers-container"> + <Grid className="developers-item"> + <h2>Fernando Claudecir Erd</h2> + <p>[C3SL/UFPR]</p> + </Grid> + <Grid className="developers-item"> + <h2>João Pedro Picolo</h2> + <p>[C3SL/UFPR]</p> + </Grid> + <Grid className="developers-item"> + <h2>João Victor Winandy Ponaco</h2> + <p>[C3SL/UFPR]</p> + </Grid> + <Grid className="developers-item"> + <h2>Miguel Angelo Neumann Salerno</h2> + <p>[C3SL/UFPR]</p> + </Grid> + <Grid className="developers-item"> + <h2>Victor Picussa</h2> + <p>[C3SL/UFPR]</p> + </Grid> + </Grid> + </Grid> + </Grid> </Grid> ); diff --git a/src/components/SideTableComponent.js b/src/components/SideTableComponent.js index 8ad8a5d2e94ad8321b7395dc4c7489833d63859e..b30897c1428f00760b80d3cb4aa45e0129580dd8 100644 --- a/src/components/SideTableComponent.js +++ b/src/components/SideTableComponent.js @@ -24,6 +24,10 @@ import { Grid } from '@material-ui/core'; import attention from '../img/attention.svg'; import reload from '../img/reload.svg'; +import sortingArrow from '../img/sorting-arrow.svg'; +import downWhiteArrow from '../img/down-arrow-white.svg'; + +import { useSortBy, useTable } from 'react-table' import Consult from './Consult'; import '../css/SideTableComponent.scss'; @@ -43,6 +47,7 @@ function SideTableComponent(props) { const [formattedData, setformattedData] = useState([]); const [selectedFilters, setSelectedFilters] = useState([]); const [downloadFile, setdownloadFile] = useState([]); + const [formattedTableData, setFormattedTableData] = useState([]); useEffect(() => { const chartYearFilters = { @@ -119,8 +124,7 @@ function SideTableComponent(props) { percentage: course.percentage } }) - - return newData + return newData; } useEffect(() => { @@ -132,14 +136,61 @@ function SideTableComponent(props) { const lastLine = { name: 'Total', - total: formattedData.reduce((total, item) => total + item.total, 0).toLocaleString('pt-BR'), - percentage: formattedData.reduce((total, item) => total + item.percentage, 0).toFixed(0), + total: formattedData.reduce((total, item) => total + item.total, 0)?.toLocaleString('pt-BR'), + percentage: formattedData.reduce((total, item) => total + item.percentage, 0)?.toLocaleString('pt-BR'), } setdownloadFile(CSV([...formattedData, lastLine])) } + }, [formattedData]) + + const localeOptions = { maximumFractionDigits: 2 } + + useEffect(() => { + setFormattedTableData(formattedData.map((course) => { + return { + name: course.name, + total: course.total?.toLocaleString('pt-BR'), + percentage: course.percentage?.toLocaleString('pt-BR', localeOptions) + } + })) + // eslint-disable-next-line react-hooks/exhaustive-deps }, [formattedData]) + const data = React.useMemo(() => + formattedTableData, + [formattedTableData] + ) + + const columns = React.useMemo( + () => [ + { + Header: 'Curso', + accessor: 'name', + Footer: 'Total', + }, + { + Header: 'Qtde', + accessor: 'total', + Footer: formattedData.reduce((total, item) => total + item.total, 0)?.toLocaleString('pt-BR'), + }, + { + Header: '%', + accessor: 'percentage', + Footer: formattedData.reduce((total, item) => total + item.percentage, 0)?.toLocaleString('pt-BR'), + }, + ], + [formattedData] + ) + const { + getTableProps, + getTableBodyProps, + headerGroups, + footerGroups, + rows, + prepareRow, + } = useTable({ columns,data }, useSortBy) + return ( <> { loadingData ? @@ -151,73 +202,117 @@ function SideTableComponent(props) { /> </Grid> : - <div className={`side-table-container ${contrastSet ? "high-contrast-side-table" : ""}`}> - <div className="table-content-container"> - <h3>{chartInfo.title}</h3> - <h4>{`${location} - ${chartInfo.years[0]}`}</h4> - { - selectedFilters === '' ? null : - <h4>{selectedFilters}</h4> - } - { - chartData.length === 0 ? - <div className="no-data-container"> - <img className="attention-icon" alt="Atenção" src={attention} /> - <h2> - Ops, parece que não possuímos dados desta - localidade ou filtros específicos - </h2> - <h3> - <u>Tente mudar a localidade ou filtros escolhidos</u> <br /> ou - </h3> - <button className="reload-page" onClick={() => window.location.reload()}> - <img className="reload-icon" src={reload} alt="Reload" /> - Recarregar página - </button> - </div> - : - <> - <a - href={`data:text/csv;charset=utf-8,` + encodeURI(downloadFile)} - download="tabela.csv" - className="download-button" - > - Baixar - </a> - <div className="table-container"> - <div className="table-overflow-container"> - <table cellSpacing="0" cellPadding="0"> - <thead> - <tr> - <th>Curso</th> - <th>Qtde</th> - <th>%</th> - </tr> - </thead> - <tbody> - { formattedData.map((course, index) => { - return ( - <tr key={index} className={`${index % 2 !== 0 ? 'tr-alt' : ''}`}> - <td>{course.name}</td> - <td>{course.total.toLocaleString('pt-BR')}</td> - <td>{course.percentage}</td> + <div className={`side-table-container ${contrastSet ? "high-contrast-side-table" : ""}`}> + <div className="table-content-container"> + <h3>{chartInfo.title}</h3> + <h4>{`${location} - ${chartInfo.years[0]}`}</h4> + { + selectedFilters !== '' && + <h4>{ selectedFilters }</h4> + } + { + chartData.length === 0 ? + <div className="no-data-container"> + <img className="attention-icon" alt="Atenção" src={attention} /> + <h2> + Ops, parece que não possuímos dados desta + localidade ou filtros específicos + </h2> + <h3> + <u>Tente mudar a localidade ou filtros escolhidos</u> <br /> ou + </h3> + <button className="reload-page" onClick={() => window.location.reload()}> + <img className="reload-icon" src={reload} alt="Reload" /> + Recarregar página + </button> + </div> + : + <> + <a + href={`data:text/csv;charset=utf-8,` + encodeURI(downloadFile)} + download="tabela.csv" + className="download-button" + > + Baixar + </a> + <div className="table-container"> + <div className="table-overflow-container"> + <table {...getTableProps()} cellSpacing="0" cellPadding="0"> + <thead> + { + headerGroups.map(headerGroup => ( + <tr {...headerGroup.getHeaderGroupProps()}> + { + headerGroup.headers.map(column => ( + <th {...column.getHeaderProps(column.getSortByToggleProps({ title: 'Ordernar' }))}> + <div className='header-container'> + {column.render('Header')} + </div> + <span> + { column.isSorted ? column.isSortedDesc + ? + <img + className='sided-arrow' + src={downWhiteArrow} + alt="Flecha para baixo" + /> + : + <img + className='sided-arrow up' + src={downWhiteArrow} + alt="Flecha para cima" + /> + : <img + src={sortingArrow} + alt="Flecha para baixo e para cima" + />} + </span> + </th> + )) + } </tr> - ) - })} + )) + } + </thead> + <tbody {...getTableBodyProps()}> { - <tr className='tr-total'> - <td>Total</td> - <td>{formattedData.reduce((total, item) => total + item.total, 0).toLocaleString('pt-BR')}</td> - <td>{formattedData.reduce((total, item) => total + item.percentage, 0).toFixed(0)}</td> - </tr> + rows.map((row, index) => { + prepareRow(row) + return ( + <tr {...row.getRowProps()} className={`${index % 2 !== 0 ? 'tr-alt' : ''}`}> + { + row.cells.map(cell => { + return ( + <td {...cell.getCellProps()}> + { cell.render('Cell') } + </td> + ) + }) + } + </tr> + ) + }) } - </tbody> - </table> + </tbody> + <tfoot> + { + footerGroups.map(group => ( + <tr {...group.getFooterGroupProps()}> + { + group.headers.map(column => ( + <td {...column.getFooterProps()}>{column.render('Footer')}</td> + )) + } + </tr> + )) + } + </tfoot> + </table> + </div> </div> - </div> - </> - } - <p>{chartInfo.notes}</p> + </> + } + <p className="box-note">{chartInfo.notes}</p> </div> </div> } diff --git a/src/components/TutorialModalComponent.js b/src/components/TutorialModalComponent.js index 8e78b2109cb613c390816a0b84b12105c2fc88df..3b1358b49eec470b914d3e142ace954c747ea034 100644 --- a/src/components/TutorialModalComponent.js +++ b/src/components/TutorialModalComponent.js @@ -57,7 +57,7 @@ function TutorialModalComponent(props) { return ( <div> <Modal // slide 1 - className={`modal-tutorial ${contrastSet ? "high-contrast" : ""}`} + className={`modal-tutorial ${contrastSet ? "high-contrast-tutorial" : ""}`} overlayClassName="modal-overlay" isOpen={slides[0] && props.open0} onRequestClose={() => closeModal(props.openFunction)} @@ -69,17 +69,13 @@ function TutorialModalComponent(props) { </div> <div className="title-tutorial">Bem-vindo(a) ao MAPFOR</div> - <div className="img-container"> - <img className="img" src={aboutImg} alt="about"/> - </div> + <img className="img" src={aboutImg} alt="about"/> <div className="subtitle-tutorial"> O MAPFOR é uma plataforma online com painel de indicadores e mapas com - informações sobre a formação dos professores da educação básica do Paraná - </div> - <div className="subtitle-tutorial"> + informações sobre a formação dos professores da educação básica do Paraná. <br /> Veja a seguir uma pequena apresentação para iniciar sua consulta. São - apenas três passos e leva só um minutinho + apenas três passos e leva só um minutinho. </div> <div className="button-container"> @@ -94,7 +90,7 @@ function TutorialModalComponent(props) { </Modal> <Modal // slide 2 - className={`modal-tutorial ${contrastSet ? "high-contrast" : ""}`} + className={`modal-tutorial ${contrastSet ? "high-contrast-tutorial" : ""}`} overlayClassName="modal-overlay" isOpen={slides[1] && props.open0} onRequestClose={() => closeModal(props.openFunction)} @@ -109,17 +105,13 @@ function TutorialModalComponent(props) { A plataforma permite que você escolha a localidade que deseja consultar - pode escolher entre dados apenas do estado ou expandir para uma mesorregião, microrregião, para um município ou até uma escola ou instituição de ensino - superior (ies) - </div> - <div className="subtitle-tutorial"> + superior (ies). <br /> Para selecionar a localidade escolha diretamente pelo mapa (1) ou clique nas caixas de seleção acima do mapa (2). Você também pode refinar sua consulta, escolhendo entre diversos filtros específicos do indicador consultado (3). </div> - <div className="img-container"> - <img className="img" src={tutorial1} alt="tutorial"/> - </div> + <img className="img" src={tutorial1} alt="tutorial"/> <div className="button-container"> <button onClick={menosSlide} className="button-cancel"> @@ -133,7 +125,7 @@ function TutorialModalComponent(props) { </Modal> <Modal // slide 3 - className={`modal-tutorial ${contrastSet ? "high-contrast" : ""}`} + className={`modal-tutorial ${contrastSet ? "high-contrast-tutorial" : ""}`} overlayClassName="modal-overlay" isOpen={slides[2] && props.open0} onRequestClose={() => closeModal(props.openFunction)} @@ -147,12 +139,10 @@ function TutorialModalComponent(props) { <div className="subtitle-tutorial"> Abaixo do mapa você acessa os gráficos e tabelas (1) com os resultados de sua consulta (2). Em cada um destes a plataforma apresenta um botão de - download dos dados, com opções de formato .cvs, .png ou .svg (3) + download dos dados, com opções de formato .cvs, .png ou .svg (3). </div> - <div className="img-container"> - <img className="img" src={tutorial2} alt="tutorial"/> - </div> + <img className="img" src={tutorial2} alt="tutorial"/> <div className="button-container"> <button onClick={menosSlide} className="button-cancel"> @@ -166,7 +156,7 @@ function TutorialModalComponent(props) { </Modal> <Modal // slide 4 - className={`modal-tutorial ${contrastSet ? "high-contrast" : ""}`} + className={`modal-tutorial ${contrastSet ? "high-contrast-tutorial" : ""}`} overlayClassName='modal-overlay' isOpen={slides[3] && props.open0} onRequestClose={() => closeModal(props.openFunction)} @@ -182,9 +172,7 @@ function TutorialModalComponent(props) { (3). As possibilidades e os resultados são diversos, aproveite! </div> - <div className="img-container"> - <img className="img" src={tutorial3} alt="tutorial"/> - </div> + <img className="img" src={tutorial3} alt="tutorial"/> <div className='button-container'> <button onClick={menosSlide} className="button-cancel"> @@ -200,5 +188,4 @@ function TutorialModalComponent(props) { ) } - export default TutorialModalComponent; \ No newline at end of file diff --git a/src/css/BottomTableComponent.scss b/src/css/BottomTableComponent.scss index 097f6d0ff70bf930766127364ff834541e26a170..9613f1dfa4b4354c576049f0888cceb436c69022 100644 --- a/src/css/BottomTableComponent.scss +++ b/src/css/BottomTableComponent.scss @@ -74,6 +74,8 @@ border-radius: 10px; overflow: hidden; margin-top: 20px; + text-align: center; + .table-overflow-container { max-height: 440px; @@ -87,13 +89,31 @@ position: sticky; top: 0; - th { - color: #fff; - padding: 10px; - font-size: 14px; - font-weight: 600; + tr { + + th { + color: #fff; + padding: 10px; + font-size: 14px; + font-weight: 600; + + span { + img { + height: 32px; + } + + .sided-arrow { + width: 15px; + } + .up { + transform: rotate(180deg); + } + } + + } } + th + th { border-left: 1px solid #fff; } @@ -106,21 +126,6 @@ background: #f2f3f8; } - .tr-total { - background: #7a60a6; - opacity: 0.8; - color: #fff; - font-weight: bold; - - td + td { - border-left: 1px solid #fff; - } - } - - td:first-child { - text-align: left; - } - td { text-align: center; padding: 10px; @@ -131,13 +136,31 @@ border-left: 1px solid #7a60a6; } } + + tfoot { + background: #7a60a6; + opacity: 0.8; + color: #fff; + font-weight: bold; + + tr { + color: #fff; + padding: 10px; + font-size: 14px; + font-weight: 600; + } + + td + td { + padding: 10px; + border-left: 1px solid #fff; + } + } } } } .download-button { - padding: 2px 8px; - background-color: #7a60a6; + padding: 5px 5px 0 5px; color: #fff; text-decoration: none; font-family: 'Nunito'; @@ -248,4 +271,10 @@ padding-right: 20px; width: 79vw; } +} + +@media (max-width: 400px) { + .bottom-table-container { + width: auto; + } } \ No newline at end of file diff --git a/src/css/Charts/BarChartComponent.scss b/src/css/Charts/BarChartComponent.scss index b41f9f4d392e25388a7704d347cc5cc0ebe750f8..5551ef6cb9525d739ef9935f1a2c21451057e058 100644 --- a/src/css/Charts/BarChartComponent.scss +++ b/src/css/Charts/BarChartComponent.scss @@ -101,11 +101,20 @@ justify-content: center; align-items: center; + span { + font-size: 20px; + } + + div { + font-size: 20px; + } + .apexcharts-legend-text { width: 250px; text-align: left; margin-left: 10px; } + } } diff --git a/src/css/Charts/PieChartComponent.scss b/src/css/Charts/PieChartComponent.scss index f23c0a78bc63bc6e7092c37f67f1b62e84d74137..b751f9ab393e39fee03481696e043ae19e21ea71 100644 --- a/src/css/Charts/PieChartComponent.scss +++ b/src/css/Charts/PieChartComponent.scss @@ -1,184 +1,181 @@ .pie-chart-content-container { - border-radius: 10px; - box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); + border-radius: 10px; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); + height: 100%; + font-family: "Montserrat"; + background: #fff; + // background-color: blue; + // display: flex; + // justify-content: space-between; + + .spinner-grid-pie { + height: 650px; + width: 340px; + display: flex; + align-items: center; + justify-content: center; + } + + .data-content-container { + padding: 20px; + box-sizing: border-box; height: 100%; - font-family: 'Montserrat'; - background: #fff; - // background-color: blue; - // display: flex; - // justify-content: space-between; - - .spinner-grid-pie { - height: 650px; - width: 340px; - display: flex; - align-items: center; - justify-content: center; - } - - .data-content-container { - padding: 20px; - box-sizing: border-box; - height: 100%; - display: flex; - flex-direction: column; - - .top-pie-container { - font-family: 'Nunito'; - - height: inherit; - display: flex; - flex-direction: column; - justify-content: space-evenly; - - h3 { - margin: 0; - color: #3c3c3b; - text-align: center; - font-weight: 600; - line-height: 30px; + display: flex; + flex-direction: column; + + .top-pie-container { + font-family: "Nunito"; + + height: inherit; + display: flex; + flex-direction: column; + justify-content: space-evenly; + + h3 { + margin: 0; + color: #3c3c3b; + text-align: center; + font-weight: 600; + line-height: 26px; + } + + h4 { + margin: 8px 0 4px 0; + text-align: center; + font-weight: 400; + color: #3c3c3b; + } + + .pie-chart-container { + .no-data-container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 50px; + + .attention-icon { + height: 80px; + width: 80px; + } + + h2, + h3 { + text-align: center; + font-size: 16px; + line-height: 24px; + font-family: "Montserrat"; + font-style: normal; + font-weight: 400; + } + + .reload-page { + margin-top: 10px; + padding: 6px 12px 8px 12px; + background-color: #fecb3b; + color: #fff; + font-family: "Nunito"; + font-size: 18px; + font-weight: bold; + border: 0; + border-radius: 10px; + transition: filter 0.2s; + cursor: pointer; + + &:hover { + filter: brightness(0.9); } - h4 { - margin: 8px 0 4px 0; - text-align: center; - font-weight: 400; - color: #3c3c3b; + .reload-icon { + margin-right: 10px; + vertical-align: middle; + padding: 0; } + } + } + } + + p { + font-family: "Montserrat"; + margin: 0; + font-size: 11px; + color: #5a5a5a; + } + + // the apexcharts css below is hardcoded for the + // pie chart responsivity to work properly + .pie-chart-container .apexcharts-canvas { + .apexcharts-legend { + flex-direction: column; + align-items: center; + justify-content: center; + + .apexcharts-legend-series { + width: 100%; + } + } - .pie-chart-container { - .no-data-container { - display: flex; - flex-direction: column; - align-items: center; - margin-top: 50px; - - .attention-icon { - height: 80px; - width: 80px; - } - - h2, h3 { - text-align: center; - font-size: 16px; - line-height: 24px; - font-family: 'Montserrat'; - font-style: normal; - font-weight: 400; - } - - .reload-page { - margin-top: 10px; - padding: 6px 12px 8px 12px; - background-color: #fecb3b; - color: #fff; - font-family: 'Nunito'; - font-size: 18px; - font-weight: bold; - border: 0; - border-radius: 10px; - transition: filter 0.2s; - cursor: pointer; - - &:hover { - filter: brightness(0.9); - } - - .reload-icon { - margin-right: 10px; - vertical-align: middle; - padding: 0; - } - } - } - } + .apexcharts-tooltip { + max-width: 200px; + white-space: unset; - p { - font-family: 'Montserrat'; - margin: 0; - font-size: 11px; - color: #5a5a5a; - } + .apexcharts-active { + padding-bottom: 0; + } - // the apexcharts css below is hardcoded for the - // pie chart responsivity to work properly - .pie-chart-container .apexcharts-canvas { - .apexcharts-legend { - align-items: center; - - .apexcharts-legend-series { - width: 100%; - } - } - - .apexcharts-tooltip { - max-width: 200px; - white-space: unset; - - .apexcharts-active { - padding-bottom: 0; - } - - .apexcharts-tooltip-series-group .apexcharts-tooltip-text { - text-align: center; - } - } - } + .apexcharts-tooltip-series-group .apexcharts-tooltip-text { + text-align: center; + } } + } } + } } .high-contrast-pie-chart { - box-shadow: 0 0 0 2px #fff; - background: #000; + box-shadow: 0 0 0 2px #fff; + background: #000; - .data-content-container .top-pie-container h3, - .data-content-container .top-pie-container h4, - .data-content-container p { - color: #fff; - } + .data-content-container .top-pie-container h3, + .data-content-container .top-pie-container h4, + .data-content-container p { + color: #fff; + } - .data-content-container .pie-chart-container .no-data-container { - color: #fff; - - .attention-icon { - filter: brightness(0) - saturate(100%) - invert(92%) - sepia(36%) - saturate(1268%) - hue-rotate(350deg) - brightness(109%) - contrast(106%); - } + .data-content-container .pie-chart-container .no-data-container { + color: #fff; - .reload-page { - background-color: #ffff00 !important; - color: #000 !important; + .attention-icon { + filter: brightness(0) saturate(100%) invert(92%) sepia(36%) + saturate(1268%) hue-rotate(350deg) brightness(109%) contrast(106%); + } - .reload-icon { - filter: brightness(0); - } - } + .reload-page { + background-color: #ffff00 !important; + color: #000 !important; + + .reload-icon { + filter: brightness(0); + } } + } } @media (max-width: 1500px) { - .pie-chart-content-container .data-content-container { - .top-pie-container { - h3 { - font-size: 18px; - } - - h4 { - font-size: 16px; - margin-top: 5px; - } - } + .pie-chart-content-container .data-content-container { + .top-pie-container { + h3 { + font-size: 18px; + } + + h4 { + font-size: 16px; + margin-top: 5px; + } + } - p { - margin-top: 20px; - text-align: center; - } + p { + margin-top: 20px; + text-align: center; } + } } diff --git a/src/css/ContatoComponent.scss b/src/css/ContatoComponent.scss index edaa9bc40681a257be4bea2d510e986f925d686a..d67e2cc008ae7b161224e2e554c6266d08041d10 100644 --- a/src/css/ContatoComponent.scss +++ b/src/css/ContatoComponent.scss @@ -27,8 +27,13 @@ } span { + font-size: 12px; color: #808080; } + + a { + font-size: 12px; + } } .contact-fields { @@ -108,8 +113,10 @@ } .submit-button { - width: 110px; + // width: 110px; padding: 12px; + padding-right: 27px; + padding-left: 27px; margin-right: 20px; background: #29bdef; color: #fff; diff --git a/src/css/Dropdown/ExpansionFiltersComponent.scss b/src/css/Dropdown/ExpansionFiltersComponent.scss index 85cd5c45b5ad344e7b837e67b81f35f485b3645f..c7957315e2c27d120f23fbae302178e5f9c83a85 100644 --- a/src/css/Dropdown/ExpansionFiltersComponent.scss +++ b/src/css/Dropdown/ExpansionFiltersComponent.scss @@ -1,61 +1,78 @@ .expansion-panel-open { - font-family: 'Montserrat'; - - .container-checkbox .item-container { - border-bottom: 1px solid #bfbfbf; - - .expansion-panel-closed { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - margin: 0 30px; - padding: 10px 0; - cursor: pointer; - - p { - margin: 0; - color: #808080; - font-size: 14px; - } - - img { - height: 20px; - padding: 10px; - } - - .arrow-open { - transform: rotate(270deg); - } - - .arrow-closed { - transform: rotate(90deg); - } - } + font-family: "Montserrat"; + + .container-checkbox .item-container { + border-bottom: 1px solid #bfbfbf; + max-width: 500px; + + .expansion-panel-closed { + display: flex; + flex-direction: row; + justify-content: space-between; + + align-items: center; + margin: 0 0; + padding: 10px 30px; + cursor: pointer; + width: 85%; - .dropdown-filters { - display: flex; - flex-direction: column; - justify-content: center; - margin-bottom: 20px; - - .sub-item-form { - margin-left: 30px; - - .sub-item-label { - margin: 0; - font-family: 'Montserrat'; - font-size: 16px; - color: #404040; - } - } + p { + margin: 0; + color: #808080; + font-size: 14px; + } + + img { + height: 20px; + padding: 10px; + } + + .arrow-open { + transform: rotate(270deg); + } + + .arrow-closed { + transform: rotate(90deg); + } + } + + .dropdown-filters { + display: flex; + flex-direction: column; + justify-content: center; + margin-bottom: 20px; + row-gap: 10px; + + .sub-item-form { + margin-left: 30px; + + .sub-item-label { + line-height: 24px; + margin: 10px; + font-family: "Montserrat"; + font-size: 16px; + color: #404040; } + } } + } } .high-contrast-expansion-panel .container-checkbox .item-container { - .expansion-panel-closed p, - .dropdown-filters .sub-item-form .sub-item-label { - color: #fff; - } + .expansion-panel-closed p, + .dropdown-filters .sub-item-form .sub-item-label { + color: #fff; + } } + +@media (max-width: 1600px) { + .expansion-panel-open .container-checkbox { + max-width: 300px; + } +} + +@media (max-width: 1200px) { + .expansion-panel-open .container-checkbox { + max-width: inherit; + } +} \ No newline at end of file diff --git a/src/css/Dropdown/FiltersGroupComponent.scss b/src/css/Dropdown/FiltersGroupComponent.scss index 67d543f338026af6ace998b8f9954055a13e8a71..557e588f63ea64a4022e17e0947bc5d3ae43da07 100644 --- a/src/css/Dropdown/FiltersGroupComponent.scss +++ b/src/css/Dropdown/FiltersGroupComponent.scss @@ -1,36 +1,51 @@ .filters-container { - background: #fff; - padding: 30px 0; - border-radius: 10px; - font-family: 'Montserrat'; - box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); - - h3 { - margin-top: 0; - text-align: center; - font-weight: 600; - color: #7a60a6; - } + background: #fff; + padding: 30px 0; + border-radius: 10px; + font-family: "Montserrat"; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); + box-sizing: border-box; + + h3 { + margin: 0; + padding: 10px; + text-align: center; + font-weight: 600; + color: #7a60a6; + } } .high-contrast-filters { - background: #000; - box-shadow: 0 0 0 2px #fff; + background: #000; + box-shadow: 0 0 0 2px #fff; - h3 { - color: #fff; - } + h3 { + color: #fff; + } } @media (max-width: 1200px) { - .filters-container { - min-width: 340px; - } + .filters-container { + min-width: 340px; + } +} + +@media (max-width: 780px) { + .filters-container { + min-width: 370px; + } +} + +@media (max-width: 730px) { + .filters-container { + margin-left: 10px; + } } @media (max-width: 680px) { - .filters-container { - max-width: 500px; - margin: 0 auto; - } -} \ No newline at end of file + .filters-container { + min-width: 0 !important; + + margin: 0 auto; + } +} diff --git a/src/css/Dropdown/FixedFiltersComponent.scss b/src/css/Dropdown/FixedFiltersComponent.scss index 1bd075260b56b896849ebe8b387f741f63ffc1ec..ce3790ec06911be36f9d3bec0da341363f33e241 100644 --- a/src/css/Dropdown/FixedFiltersComponent.scss +++ b/src/css/Dropdown/FixedFiltersComponent.scss @@ -1,46 +1,46 @@ .fixed-filters-container { - display: grid; - grid-template-columns: repeat(5, 1fr); - grid-column-gap: 10px; + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-gap: 15px; } .high-contrast-fixed-filters { - background: #000; + background: #000; } @media (max-width: 1790px) { - .fixed-filters-container { - grid-template-columns: repeat(4, 1fr); - grid-row-gap: 10px; - } + .fixed-filters-container { + grid-template-columns: repeat(4, 1fr); + grid-row-gap: 10px; + } } @media (max-width: 1600px) { - .fixed-filters-container { - grid-template-columns: repeat(3, 1fr); - } + .fixed-filters-container { + grid-template-columns: repeat(3, 1fr); + } } @media (max-width: 1400px) { - .fixed-filters-container { - grid-template-columns: repeat(2, 1fr); - } + .fixed-filters-container { + grid-template-columns: repeat(2, 1fr); + } } @media (max-width: 1200px) { - .fixed-filters-container { - grid-template-columns: repeat(3, 1fr); - } + .fixed-filters-container { + grid-template-columns: repeat(3, 1fr); + } } @media (max-width: 900px) { - .fixed-filters-container { - grid-template-columns: repeat(2, 1fr); - } + .fixed-filters-container { + grid-template-columns: repeat(2, 1fr); + } } @media (max-width: 630px) { - .fixed-filters-container { - grid-template-columns: 1fr; - } + .fixed-filters-container { + grid-template-columns: 1fr; + } } diff --git a/src/css/Dropdown/IndicatorsComponent.scss b/src/css/Dropdown/IndicatorsComponent.scss index a20dfd1d9d6dc144b33efe74f63bc73ae40d3352..ce1e8978c2469bcedbf5cb14af14b443066992e6 100644 --- a/src/css/Dropdown/IndicatorsComponent.scss +++ b/src/css/Dropdown/IndicatorsComponent.scss @@ -1,19 +1,44 @@ .indicators-container { - font-family: 'Nunito'; - - .group-title { - font-size: 32px; - line-height: 38px; - font-weight: 600; - color: #3c3c3b; - margin-top: 10px; + font-family: "Nunito"; + + .group-title { + font-size: 32px; + line-height: 38px; + font-weight: 600; + color: #3c3c3b; + margin-top: 10px; + padding-right: 10px; + } + + .title { + font-size: 24px; + line-height: 30px; + color: #7a60a6; + margin-bottom: 10px; + } + + .technical-sheet { + display: flex; + width: max-content; + padding: 10px 20px; + margin-bottom: 40px; + background-color: #7a60a6; + color: #fff; + text-decoration: none; + font-family: "Nunito"; + font-size: 18px; + font-weight: bold; + border: 0; + border-radius: 10px; + transition: filter 0.2s; + + &:hover { + filter: brightness(0.9); } - .title { - font-size: 24px; - line-height: 30px; - color: #7a60a6; - margin-bottom: 10px; + .sheet-icon { + margin-right: 5px; + padding: 0; } .technical-sheet { @@ -41,88 +66,64 @@ } } - .arrows-container { - width: max-content; - margin-top: 40px; - margin-bottom: 40px; - border-radius: 10px; - box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); - overflow: hidden; - - button { - border: 0; - cursor: pointer; - background: #fff; - padding: 8px 20px 5px 20px; - transition: filter 0.2s; - - &:hover { - filter: brightness(0.9); - } - - img { - height: 24px; - } - } - - .button-left { - border-radius: 10px 0 0 10px; - border-right: 2px solid #bfbfbf; + .button-left { + border-radius: 10px 0 0 10px; + border-right: 2px solid #bfbfbf; - img { - transform: rotate(180deg); - } - } + img { + transform: rotate(180deg); + } + } - .button-right { - border-radius: 0 10px 10px 0; - } + .button-right { + border-radius: 0 10px 10px 0; } + } } .high-contrast-indicators { - .group-title, - .title { - color: #fff; + .group-title, + .title { + color: #fff; + } + + .technical-sheet { + background-color: #000; + border: 2px solid #ffff00; + color: #ffff00; + transition: background-color 0.2s; + + &:hover { + background-color: #ffff00; + color: #000; + + .sheet-icon { + filter: brightness(0); + } } + } - .technical-sheet { - background-color: #000; - border: 2px solid #ffff00; - color: #ffff00; - transition: background-color 0.2s; + .arrows-container { + button { + background: #000; + box-shadow: none; + border: 2px solid #ffff00; + transition: background-color 0.2s; - &:hover { - background-color: #ffff00; - color: #000; + &:hover { + background-color: #ffff00; + transition: filter 0.2s; - .sheet-icon { - filter: brightness(0); - } + img { + filter: brightness(0.1); } + } } - .arrows-container { - button { - background: #000; - box-shadow: none; - border: 2px solid #ffff00; - transition: background-color 0.2s; - - &:hover { - background-color: #ffff00; - transition: filter 0.2s; - - img { - filter: brightness(0.1); - } - } - } - - .button-left { - border-right: 2px solid #ffff00; - } + .button-left { + border-right: 2px solid #ffff00; } + } } @media (max-width: 1200px) { @@ -132,10 +133,23 @@ } } -@media (max-width: 900px) { - .indicators-container { - max-width: 400px; - } +@media (max-width: 940px) { + .indicators-container { + max-width: 400px; + margin-right: 10px; + } +} + +@media (max-width: 830px) { + .indicators-container { + max-width: 350px; + } +} + +@media (max-width: 780px) { + .indicators-container { + max-width: 300px; + } } @media (max-width: 680px) { @@ -143,4 +157,4 @@ max-width: 100%; margin-right: 0; } -} \ No newline at end of file +} diff --git a/src/css/ExpandableGroupComponent.scss b/src/css/ExpandableGroupComponent.scss index c95449098a106a871a410b7fdd0effe09a1a0a09..3d17e5c31cf4dc7e05c99a46d2f3492f6d6b14d7 100644 --- a/src/css/ExpandableGroupComponent.scss +++ b/src/css/ExpandableGroupComponent.scss @@ -80,6 +80,12 @@ padding-left: 20px; } + .box-note:hover span{ + display: block; + opacity: 1; + z-index: 99; + } + &:first-child { margin-bottom: 30px; } diff --git a/src/css/FaixaComponent.scss b/src/css/FaixaComponent.scss index 001e89c11532fc23b51445b6d6245be67cfa2f65..3e4cdc280f0ccaec83a29479f450bc90ce0fcf93 100644 --- a/src/css/FaixaComponent.scss +++ b/src/css/FaixaComponent.scss @@ -41,10 +41,12 @@ align-items: center; p { + font-size: 10px; margin: 0 8px 0 0; } a { + font-size: 10px; text-decoration: none; margin-right: 8px; color: #bfbfbf; @@ -76,13 +78,39 @@ } } - .links-container a { - text-decoration: none; + .font-size-button { + display: flex; + align-items: center; + margin: 0; + padding: 0; + border: 0; + background: transparent; + cursor: pointer; + font-family: inherit; + font-size: 10px; + font-weight: 700; color: #bfbfbf; margin-right: 20px; - &:last-child { - margin-right: 0; + img { + line-height: 10px; + margin-left: 4px; + height: 10px; + } + } + + .links-container { + display: flex; + flex-direction: row; + align-items: center; + a { + text-decoration: none; + color: #bfbfbf; + margin-right: 20px; + font-size: 10px; + &:last-child { + margin-right: 0; + } } } } @@ -131,19 +159,23 @@ height: 100%; background: #fff; cursor: pointer; - font-size: 18px; font-weight: 700; font-family: inherit; color: #7a60a6; transition: filter 0.2s; + span { + font-size: 18px; + } + &:hover { filter: brightness(0.9); } .arrow { - margin-left: 10px; - height: 10px; + margin-left: 15px; + position: relative; + padding-bottom: 1%; } .up { @@ -309,7 +341,7 @@ } } -@media (max-width: 1100px) { +@media (max-width: 1150px) { .faixa-container .content-container { padding: 0 20px; @@ -347,10 +379,35 @@ } } -@media (max-width: 450px) { +@media (max-width: 670px) { .faixa-container { - .access-container .access-tools .access-tools-items { - display: none; + .access-container { + justify-content: center; + + .access-tools { + flex-direction: column; + + + .access-tools-items { + margin-bottom: 5px; + + p { + margin: 0; + } + + .contrast-button { + margin: 0 0 0 10px; + } + } + + .contrast-button { + margin: 0; + } + + .links-container { + margin-top: 5px; + } + } } .content-container .opened-menu { diff --git a/src/css/FooterComponent.scss b/src/css/FooterComponent.scss index d5db94b3621dbf1ffd625f91cd84606ecb04c65f..7aa4a51daeb704fc487f2d050b9b2097a4c038df 100644 --- a/src/css/FooterComponent.scss +++ b/src/css/FooterComponent.scss @@ -7,9 +7,9 @@ .line-gradient { position: absolute; width: 100%; - height: 0.5%; + height: 0.6%; background: linear-gradient(90deg, #D963A1 0%, #7A60A6 35.42%, #51709F 67.71%, #29BDEF 100%); - } + } .content-container { display: flex; @@ -21,15 +21,16 @@ font-family: 'Nunito'; .links-container { - height: 70px; display: grid; grid-template-columns: 1fr 1fr; - grid-column-gap: 30px; + column-gap: 30px; + grid-template-rows: 3fr; + row-gap: 5px; .link { text-decoration: none; color: #404040; - line-height: 15px; + line-height: 20px; font-size: 11px; font-weight: 600; diff --git a/src/css/HomePageComponent.scss b/src/css/HomePageComponent.scss index ef5bf0c69d30292584bc5f47e30f9e4d567f5765..d8fd68499bd152d5f2eb8558ca7be140187defc0 100644 --- a/src/css/HomePageComponent.scss +++ b/src/css/HomePageComponent.scss @@ -1,164 +1,173 @@ -@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap'); -@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); +@import url("https://fonts.googleapis.com/css?family=Nunito&display=swap"); +@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap"); .home-container { - text-align: center; - background-color: #fff; - background-image: url("../img/color-background.svg"); - background-repeat: no-repeat; - background-size: cover; - min-height: calc(100vh - 200px); - cursor: default; - - .title-container { - margin: 0 auto; - - .text-home { - max-width: 800px; - font-family: 'Nunito'; - font-weight: bold; - font-size: 50px; - margin-bottom: 100px; - } + text-align: center; + background-color: #fff; + background-image: url("../img/color-background.svg"); + background-repeat: no-repeat; + background-size: cover; + min-height: calc(100vh - 200px); + cursor: default; + + .title-container { + margin: 0 auto; + + .text-home { + max-width: 800px; + font-family: "Nunito"; + font-weight: bold; + font-size: 50px; + margin-bottom: 100px; } + } + + .grid-square { + font-family: "Nunito"; + + .center-container { + margin: 0 auto; + display: flex; + padding: 0 20px 0 20px; + + * { + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + .box-square { + flex: 1; + background-color: #f2f3f8; + max-width: 500px; + height: auto; + border-radius: 20px; + margin-bottom: 110px; + align-items: center; + justify-items: center; + margin-top: 50px; - .grid-square { - font-family: 'Nunito'; + i { + background: #f2f3f8; + border-radius: 50%; + display: inline-block; + width: 80px; + height: 80px; + box-shadow: 0 0 1em rgba(0, 0, 0, 0.5); + margin-top: -46px; + + .icon { + width: 72px; + height: 72px; + margin-top: 4px; + } + } - .center-container { - margin: 0 auto; + .content-container { + display: flex; + height: 90%; + width: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + + .box-text { + position: relative; + padding: 0 100px; + font-size: 28px; + color: #151828; + } + + .button-box { + position: relative; + font-size: 16px; + padding: 12px 20px 6px 20px; + border-radius: 10px; + font-weight: bold; + color: #fff; + transition: filter 0.2s; + margin-bottom: 10%; - * { - -webkit-box-sizing: border-box; - box-sizing: border-box; + &:hover { + filter: brightness(0.9); } + } - .box-square { - background-color: #f2f3f8; - width: 500px; - height: 280px; - border-radius: 20px; - margin-bottom: 70px; - - i { - background: #f2f3f8; - border-radius:50%; - display:inline-block; - width: 80px; - height: 80px; - box-shadow: 0 0 1em rgba(0, 0, 0, 0.5); - margin-top: -46px; - - .icon { - width: 72px; - height: 72px; - margin-top: 4px; - } - } - - .content-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100%; - - .box-text { - padding: 0 100px; - font-size: 28px; - color: #151828; - } - - .button-box { - font-size: 16px; - padding: 10px 20px 6px 20px; - border-radius: 10px; - font-weight: bold; - color: #fff; - margin-bottom: 80px; - transition: filter 0.2s; - - &:hover { - filter: brightness(0.9); - } - } - - .pink { - background-color: #d963a1; - } - - .purple { - background-color: #7a60a6; - } - - .blue { - background-color: #29bdef; - } - } - } + .pink { + background-color: #d963a1; + } + + .purple { + background-color: #7a60a6; + } + + .blue { + background-color: #29bdef; + } } + } } + } } .high-contrast-home { - background-image: none; - background: #000; + background-image: none; + background: #000; - .title-container .text-home { - color: #fff; - } + .title-container .text-home { + color: #fff; + } - .grid-square .center-container .box-square { - background-color: #000; - border: 2px solid #fff; + .grid-square .center-container .box-square { + background-color: #000; + border: 2px solid #fff; - i { - background: #000; - } + i { + background: #000; + } - .content-container { - .box-text { - color: #fff; - } + .content-container { + .box-text { + color: #fff; + } - .button-box { - color: #ffff00; - background-color: #000; - border: 2px solid #ffff00; - transition: background-color 0.2s; + .button-box { + color: #ffff00; + background-color: #000; + border: 2px solid #ffff00; + transition: background-color 0.2s; - &:hover { - background-color: #ffff00; - color: #000; - } - } + &:hover { + background-color: #ffff00; + color: #000; } + } } + } } @media (max-width: 768px) { - .home-container .grid-square .center-container { - width: 80%; + .home-container .grid-square .center-container { + width: 80%; - .box-square{ - width: 90%; - margin: 40px auto; + .box-square { + width: 90%; + margin: 40px auto; - .content-container .box-text { - font-size: 22px; - } - } + .content-container .box-text { + font-size: 22px; + } } + } - .home-container .title-container .text-home { - font-size: 32px; - padding: 0 50px; - margin-bottom: 50px; - } + .home-container .title-container .text-home { + font-size: 32px; + padding: 0 50px; + margin-bottom: 50px; + } } @media (max-width: 540px) { - .home-container .grid-square .center-container { - width: 100%; - } -} \ No newline at end of file + .home-container .grid-square .center-container { + width: 100%; + } +} diff --git a/src/css/Map/LegendComponent.scss b/src/css/Map/LegendComponent.scss index 9382ca536ee313377979d6827b57cfc755d10eb5..926e2022d6676bf34d457efdd44ffd9e5ebcf83c 100644 --- a/src/css/Map/LegendComponent.scss +++ b/src/css/Map/LegendComponent.scss @@ -11,6 +11,7 @@ max-width: 200px; padding: 0; margin: 0; + font-size: 24px; } } @@ -20,6 +21,7 @@ padding: 12px; max-width: 130px; font-family: 'Montserrat'; + font-size: 12px; color: #3c3c3b; text-align: center; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); @@ -28,6 +30,7 @@ .legend-title { margin: 0; font-weight: 600; + font-size: 12px; } } diff --git a/src/css/Map/MapComponent.scss b/src/css/Map/MapComponent.scss index d74fd597a7975c5a3d8501efce13f37af51536ee..80bbe9404433a05b4d1f3afec11b055a5163536b 100644 --- a/src/css/Map/MapComponent.scss +++ b/src/css/Map/MapComponent.scss @@ -34,10 +34,20 @@ background: #fff; p { + font-size: 11px; margin: 0; padding: 0; } + + a { + font-size: 11px; + } } + + .leaflet-control-attribution > a { + font-size: 11px; + } + } .note-container { @@ -169,7 +179,7 @@ .map .note-container { height: 95px; width: 130px; - margin-top: -105px; + margin-top: -104px; } } diff --git a/src/css/ModalComponents.scss b/src/css/ModalComponents.scss index 4f86ccf9193f32fbc4d7b66dec54a2e5be5216c0..a1a1dc999e09f96fcc2edb9ae6058fa69bbaebba 100644 --- a/src/css/ModalComponents.scss +++ b/src/css/ModalComponents.scss @@ -1,180 +1,285 @@ .modal { - background-color: #fff; - color: #3c3c3b; - border-radius: 20px; - text-align: center; - font-family: 'Nunito'; - padding: 20px; - width: 80%; - cursor: default; + background-color: #fff; + color: #3c3c3b; + border-radius: 20px; + text-align: center; + font-family: "Nunito"; + padding: 20px; + width: 80%; + height: auto; + cursor: default; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 20; - .modal-header-container { - display: flex; - flex-direction: column; - align-items: flex-end; - - button { - height: 40px; - width: 40px; - border: 0; - background: transparent; - transition: filter 0.2s; - cursor: pointer; - - &:hover { - filter: brightness(0.8); - } - - img { - vertical-align: middle; - } + .modal-header-container { + display: flex; + flex-direction: column; + align-items: flex-end; + height: 15vh; + width: 98%; + + button { + height: 40px; + width: 40px; + border: 0; + background: transparent; + transition: filter 0.2s; + cursor: pointer; + + &:hover { + filter: brightness(0.8); + } + + img { + vertical-align: middle; + height: 3vh; + } + } + } + + .icon { + height: 10vh !important; + margin: 0 auto; + } + + .title { + font-size: 2.2vh !important; + font-weight: 600; + } + + .subtitle { + font-size: 2vh !important; + font-weight: 400; + margin-bottom: 30px; + } + + .indicators { + width: 100%; + height: 100%; + display: grid; + grid-template-columns: 1fr; + gap: 10px; + + a { + text-decoration: none; + color: #3c3c3b; + background: #f2f3f8; + border-radius: 10px; + text-align: left; + transition: filter 0.2s; + + .item { + padding: 5%; + + h3 { + font-size: 2vh; + line-height: 120%; + font-weight: 600; + margin: 0; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; } + } + + &:hover { + filter: brightness(0.9); + } } + } + + .arrow { + height: 2vh; + width: 2vw; + margin-left: 40px; + } +} + +.modal-overlay { + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + background-color: rgba(0, 0, 0, 0.3); + z-index: 20; +} +.high-contrast { + background-color: #000; + + &.modal { + border: 2px solid #fff; + + .modal-header-container button { + filter: brightness(5); + + &:hover { + border: 2px solid #fff; + } + } + + .title, + .subtitle { + color: #fff; + } + + .indicators a { + border: 2px solid #fff; + color: #ffff00; + background: #000; + transition: background-color 0.2s; + + &:hover { + background-color: #ffff00; + color: #000; + transition: filter 0.2s; + + img { + -webkit-filter: brightness(0.1); + filter: brightness(0.1); + } + } + } + } +} + +@media (min-width: 460px) { + .modal { .icon { - height: 55px; - margin: 0 auto; + height: 82px; } .title { - font-size: 18px; - font-weight: 600; + font-size: 27px; } .subtitle { - font-size: 16px; - font-weight: 400; - margin-bottom: 30px; + font-size: 18px; } .indicators { - width: 100%; - display: grid; - grid-template-columns: 1fr; - gap: 10px; - - a { - text-decoration: none; - color: #3c3c3b; - background: #f2f3f8; - border-radius: 10px; - text-align: left; - transition: filter 0.2s; - - .item { - padding: 20px; - - h3 { - font-size: 18px; - line-height: 21px; - font-weight: 600; - margin: 0; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - } - } - - &:hover { - filter: brightness(0.9); - } - } + grid-template-columns: 1fr 1fr; } + } +} - .arrow { - height: 24px; - width: 12px; - margin-left: 40px; +@media (min-width: 1080px) { + .modal { + width: 100vh; + + .icon { + margin: 0 auto; + height: 110px; } -} -.modal-overlay { - position: fixed; - top: 0; - bottom: 0; - right: 0; - left: 0; - display: flex; - align-items: center; - justify-content: center; - background-color: rgba(0, 0, 0, 0.3); + .title { + font-size: 36px; + } + + .subtitle { + font-size: 21px; + } + + .modal-header-container button img { + margin: 0 auto; + } + } } -.high-contrast { - background-color: #000; +@media (orientation: landscape) and (max-width: 1079px) { + .modal { + padding: 1.5%; - &.modal { - border: 2px solid #fff; + .title { + font-size: 2vw !important; + font-weight: 600; + margin: 2% auto 0 auto; + } - .modal-header-container button { - filter: brightness(5); + .subtitle { + font-size: 1.8vw !important; + font-weight: 400; + margin-bottom: 2%; + } - &:hover { - border: 2px solid #fff; - } - } + .modal-header-container { + flex-direction: row-reverse; + align-items: flex-start; + height: auto; + align-items: center; + justify-content: center; - .title, .subtitle { - color: #fff; - } + .icon { + padding-top: 1%; + padding-left: 5%; + height: 7vw !important; + } - .indicators a { - border: 2px solid #fff; - color: #ffff00; - background: #000; - transition: background-color 0.2s; - - &:hover { - background-color: #ffff00; - color: #000; - transition: filter 0.2s; - - img { - -webkit-filter: brightness(0.1); - filter: brightness(0.1); - } - } - } + button img { + height: 2vw !important; + } } -} + .indicators { + gap: 5px; -@media (min-width: 600px) { - .modal { - .icon{ - height: 82px; + a { + .item { + h3 { + font-size: 1.5vw; + } } + } + } + } +} - .title { - font-size: 27px; - } +@media (min-width: 1921px) { + .modal { + border-radius: 30px; + width: 80%; + height: auto; - .subtitle { - font-size: 18px; - } + .modal-header-container { + button { + padding: 1% 2% 0 0; - .indicators { - grid-template-columns: 1fr 1fr; + img { + height: 3vh; } + } } -} -@media (min-width: 1080px) { - .modal { - width: 100vh; - margin-top: -200px; + .indicators { + width: 100%; + height: 100%; + display: grid; + grid-template-columns: 1fr; + gap: 10px; - .icon{ - height: 110px; - } + a { + border-radius: 30px; + .item { + padding: 2.5%; - .title { - font-size: 36px; + h3 { + line-height: 2vh; + } } + } + } - .subtitle { - font-size: 21px; - } + .arrow { + height: 2.5vh; + width: 2.5vw; } -} \ No newline at end of file + } +} diff --git a/src/css/PageComponent.scss b/src/css/PageComponent.scss index da6aecc83e67fccfa76a09a1b624b3061a8e8516..6cd1ea596a2b9385ccc01dd8f23b29f0bd5274f2 100644 --- a/src/css/PageComponent.scss +++ b/src/css/PageComponent.scss @@ -20,6 +20,7 @@ padding: 30px; width: 100%; + .sidebar-container { width: 400px; margin-right: 30px; @@ -59,54 +60,54 @@ } .high-contrast-page { - background: #000; + background: #000; } @media (max-width: 1790px) { - .page-container .content-container .data-container { - max-width: 1200px; - } + .page-container .content-container .data-container { + max-width: 1200px; + } } @media (max-width: 1690px) { - .page-container .content-container .data-container { - max-width: 1100px; - } + .page-container .content-container .data-container { + max-width: 1100px; + } } @media (max-width: 1600px) { - .page-container .content-container { - .sidebar-container { - width: 300px; - } + .page-container .content-container { + .sidebar-container { + width: 300px; + } - .data-container { - max-width: 1100px; - } + .data-container { + max-width: 1100px; } + } } @media (max-width: 1500px) { - .page-container .content-container .data-container { - width: 100%; - max-width: 1000px; + .page-container .content-container .data-container { + width: 100%; + max-width: 1000px; - .middle-container { - flex-direction: column; + .middle-container { + flex-direction: column; - .side-chart-container { - margin-left: 0; - margin-top: 30px; - width: 100%; - } - } + .side-chart-container { + margin-left: 0; + margin-top: 30px; + width: 100%; + } } + } } @media (max-width: 1400px) { - .page-container .content-container .data-container { - max-width: 800px; - } + .page-container .content-container .data-container { + max-width: 800px; + } } @media (max-width: 1200px) { @@ -125,16 +126,16 @@ } } - .data-container { - max-width: 100%; - width: 100%; + .data-container { + max-width: 100%; + width: 100%; - .middle-container, - .bottom-container { - width: 99.5%; - } - } + .middle-container, + .bottom-container { + width: 99.5%; + } } + } } @media (max-width: 680px) { diff --git a/src/css/ReturnComponent.scss b/src/css/ReturnComponent.scss index 5d8daeaa8e83f1639e972c888e9ad5d2934c8cca..73c409377ac278ac32716fd84c55debe0c70ed2a 100644 --- a/src/css/ReturnComponent.scss +++ b/src/css/ReturnComponent.scss @@ -6,7 +6,7 @@ box-sizing: border-box; top: 30px; - width: 120px; + width: fit-content; margin-top: 30px; padding: 10px 20px; border: 0; @@ -26,6 +26,10 @@ &:hover { filter: brightness(0.9); } + + img { + margin-right: 20px; + } } .high-contrast-return { @@ -59,9 +63,5 @@ .return-button { width: 100%; justify-content: center; - - img { - margin-right: 15px; - } } } \ No newline at end of file diff --git a/src/css/SideTableComponent.scss b/src/css/SideTableComponent.scss index 7ac1314062658ae388fdadf25e23bac7e61d5d5d..6c07f80b8a6d09e48b38c808166024f41aaea752 100644 --- a/src/css/SideTableComponent.scss +++ b/src/css/SideTableComponent.scss @@ -1,5 +1,5 @@ .side-table-container { - height: 100%; + min-height: 100%; background: #fff; border-radius: 10px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); @@ -12,6 +12,78 @@ position: relative; text-align: center; + table { + width: 100%; + + thead { + background: #7a60a6; + position: sticky; + top: 0; + + th { + color: #fff; + padding: 10px; + font-size: 14px; + font-weight: 600; + + span { + img { + height: 32px; + } + + .sided-arrow { + width: 15px; + } + .up { + transform: rotate(180deg); + } + } + } + + th + th { + border-left: 1px solid #fff; + } + } + + tbody { + background: #fff; + + .tr-alt { + background: #f2f3f8; + } + + td { + text-align: center; + padding: 10px; + font-size: 14px; + } + + td + td { + border-left: 1px solid #7a60a6; + } + + } + + tfoot { + background: #7a60a6; + opacity: 0.8; + color: #fff; + font-weight: bold; + + tr { + color: #fff; + padding: 10px; + font-size: 14px; + font-weight: 600; + } + + td + td { + padding: 10px; + border-left: 1px solid #fff; + } + } + } + h3 { margin: 0; color: #3c3c3b; @@ -75,64 +147,14 @@ } .table-container { - max-height: 410px; + max-height: 450px; border-radius: 10px; overflow: hidden; - margin-top: 10px; + margin-top: 15px; .table-overflow-container { - max-height: 410px; + max-height: 450px; overflow-y: auto; - - table { - width: 100%; - - thead { - background: #7a60a6; - position: sticky; - top: 0; - - th { - color: #fff; - padding: 10px; - font-size: 14px; - font-weight: 600; - } - - th + th { - border-left: 1px solid #fff; - } - } - - tbody { - background: #fff; - - .tr-alt { - background: #f2f3f8; - } - - td { - text-align: center; - padding: 10px; - font-size: 14px; - } - - td + td { - border-left: 1px solid #7a60a6; - } - - .tr-total { - background: #7a60a6; - opacity: 0.8; - color: #fff; - font-weight: bold; - - td + td { - border-left: 1px solid #fff; - } - } - } - } } } @@ -154,10 +176,10 @@ } p { - position: absolute; text-align: left; bottom: 0; margin: 30px 0 0 0; + align-self: flex-end; padding-right: 20px; font-size: 11px; line-height: 14px; @@ -242,6 +264,16 @@ color: #ffff00; } } + + tfoot { + tr { + background: #000; + + td { + color: #ffff00; + } + } + } } } } diff --git a/src/css/SiteMapComponent.scss b/src/css/SiteMapComponent.scss index d2c6adbe04704fa4cb23645e115acfb3f494ba97..806d35d236861bf179bacf2cfdb76fc5adc18b79 100644 --- a/src/css/SiteMapComponent.scss +++ b/src/css/SiteMapComponent.scss @@ -55,13 +55,9 @@ color: #3c3c3b; } - ul { - list-style: none; - - li { - line-height: 30px; - color: #3c3c3b; - } + ul li { + line-height: 30px; + color: #3c3c3b; } } @@ -84,13 +80,9 @@ border-bottom: 2px solid #7a60a6; } - ul { - list-style: none; - - li { - line-height: 30px; - color: #3c3c3b; - } + ul li { + line-height: 30px; + color: #3c3c3b; } } } diff --git a/src/css/SobreComponent.scss b/src/css/SobreComponent.scss index e8da03b3ed7e6375ae1e03da2b3ab97d43c7975d..1b71ab387294017055040affbee54eae4d435ddc 100644 --- a/src/css/SobreComponent.scss +++ b/src/css/SobreComponent.scss @@ -1,378 +1,404 @@ .about-body { - background-color: #fff; - color: #404040; - font-family: 'Nunito'; - cursor: default; + background-color: #fff; + color: #404040; + font-family: "Nunito"; + cursor: default; - .content-container { - padding: 50px 50px 0 50px; - max-width: 1200px; - margin: 0 auto; + h1 { + font-size: 32px; + } - .link-container { - font-size: 12px; + h2 { + font-size: 24px; + } - .link { - text-decoration: none; - color: #808080; + .content-container { + padding: 50px 50px 0 50px; + max-width: 1200px; + margin: 0 auto; - &:visited { - color: #808080; - } - } + .link-container { + font-size: 12px; - span { - color: #808080; - } + .link { + text-decoration: none; + color: #808080; + + &:visited { + color: #808080; + } + } + + span { + color: #808080; + } + + a { + font-size: 12px; + } + } + + .item-container { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + text-align: center; + + .about-img { + margin-left: 50px; + height: 280px; + width: 100%; + } + + .about-text { + max-width: 490px; + } + + .text-container { + line-height: 30px; + + h1, + h2 { + color: #7a60a6; + margin-top: 50px; + } + + p { + font-size: 18px; + font-family: "Montserrat"; + margin-top: 0; } - .item-container { + .objective-item-container { + display: grid; + grid-template-rows: 1fr 1fr; + grid-template-columns: 1fr 1fr; + grid-column-gap: 50px; + grid-row-gap: 40px; + text-align: left; + + .objective-item { display: flex; flex-direction: row; justify-content: space-between; align-items: center; - text-align: center; - .about-img { - margin-left: 50px; - height: 280px; - width: 100%; + p { + margin: 0; + line-height: 28px; } - .about-text { - max-width: 490px; + img { + width: 100px; + height: 100px; + margin-right: 25px; } + } + } + } + } - .text-container { - line-height: 30px; + .public-container { + text-align: center; + margin: 80px 0; - h1, h2 { - color: #7a60a6; - margin-top: 50px; - } + h1 { + color: #7a60a6; + } - p { - font-size: 18px; - font-family: 'Montserrat'; - margin-top: 0; - } + img { + max-width: 900px; + height: 100%; + width: 100%; + } + } - .objective-item-container { - display: grid; - grid-template-rows: 1fr 1fr; - grid-template-columns: 1fr 1fr; - grid-column-gap: 50px; - grid-row-gap: 40px; - text-align: left; - - .objective-item { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - - p { - margin: 0; - line-height: 28px; - } - - img { - width: 100px; - height: 100px; - margin-right: 25px; - } - } - } - } - } + .development-container { + margin-bottom: 80px; - .public-container { - text-align: center; - margin: 80px 0; + h1 { + text-align: center; + color: #7a60a6; + margin-bottom: 40px; + } - h1 { - color: #7a60a6; - } + .development-logo-container { + display: flex; + flex-direction: row; + justify-content: space-evenly; - img { - max-width: 900px; - height: 100%; - width: 100%; - } + a img { + height: 72px; } + } + } - .development-container { - margin-bottom: 80px; + .api-container { + max-width: 800px; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 2fr; + grid-column-gap: 25px; + + h1 { + color: #7a60a6; + text-align: right; + margin: 0; + } + + p { + font-family: Montserrat; + font-size: 16px; + margin: 0; + + a { + color: #d963a1; + } + } + } - h1 { - text-align: center; - color: #7a60a6; - margin-bottom: 40px; - } + .consult-container { + text-align: center; - .development-logo-container { - display: flex; - flex-direction: row; - justify-content: space-evenly; + h1 { + color: #7a60a6; + padding: 0 200px; + margin: 80px 0; + } - a img { - height: 72px; - } - } - } + .grid-square { + justify-content: center; + padding-bottom: 15px; + justify-content: space-evenly; + column-gap: 20px; + row-gap: 100px; + + .center-container { + margin-bottom: 0 auto; + display: flex; + margin-bottom: 20px; + + * { + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + .box-square { + + flex: 1; + background-color: #f2f3f8; + min-width: 300px; + width: 19ch; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 20px; - .api-container { - max-width: 800px; - margin: 0 auto; - display: grid; - grid-template-columns: 1fr 2fr; - grid-column-gap: 25px; - - h1 { - color: #7a60a6; - text-align: right; - margin: 0; + i { + background: #f2f3f8; + border-radius: 50%; + box-shadow: 0 0 1em rgba(0, 0, 0, 0.5); + margin-top: -20%; + display: flex; + align-items: center; + justify-content: center; + scale: 80%; + + .icon { + scale: 90%; + } } - p { - font-family: Montserrat; + .content-container { + flex: 1; + padding: 0 20px; + margin-top: -5%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + .box-text { + font-size: 24px; + color: #151828; + } + + .button-box { font-size: 16px; - margin: 0; + padding: 10px 20px; + border-radius: 10px; + font-weight: bold; + color: #fff; + margin-bottom: 40px; + transition: filter 0.2s; + position: relative; - a { - color: #d963a1; + &:hover { + filter: brightness(0.9); } - } - } + } - .consult-container { - text-align: center; + .pink { + background-color: #d963a1; + } - h1 { - color: #7a60a6; - padding: 0 200px; - margin: 80px 0; - } - - .grid-square .center-container { - margin: 0 auto 70px auto; - - &:last-child { - margin-bottom: 0; - } - - * { - -webkit-box-sizing: border-box; - box-sizing: border-box; - } + .purple { + background-color: #7a60a6; + } - .box-square { - background-color: #f2f3f8; - width: 300px; - height: 280px; - border-radius: 20px; - - i { - background: #f2f3f8; - border-radius:50%; - display:inline-block; - width: 80px; - height: 80px; - box-shadow: 0 0 1em rgba(0, 0, 0, 0.5); - margin-top: -46px; - - .icon { - width: 72px; - height: 72px; - margin-top: 4px; - } - } - - .content-container { - padding: 0 20px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100%; - - .box-text { - font-size: 24px; - color: #151828; - } - - .button-box { - font-size: 16px; - padding: 10px 20px; - border-radius: 10px; - font-weight: bold; - color: #fff; - margin-bottom: 80px; - transition: filter 0.2s; - - &:hover { - filter: brightness(0.9); - } - } - - .pink { - background-color: #d963a1; - } - - .purple { - background-color: #7a60a6; - } - - .blue { - background-color: #29bdef; - } - } - } + .blue { + background-color: #29bdef; + } } + } } + } } + } } .high-contrast-about { - background-color: #000; - color: #fff; + background-color: #000; + color: #fff; - .content-container { - .link-container .link { - color: #ffff00; + .content-container { + .link-container .link { + color: #ffff00; - &:visited { - color: #ffff00; - } - } + &:visited { + color: #ffff00; + } + } - .item-container .text-container h1, - .item-container .text-container h2, - .public-container h1, - .development-container h1, - .api-container h1, - .consult-container h1 { - color: #fff; - } + .item-container .text-container h1, + .item-container .text-container h2, + .public-container h1, + .development-container h1, + .api-container h1, + .consult-container h1 { + color: #fff; + } - .api-container p a { - color: #ffff00; + .api-container p a { + color: #ffff00; - &:visited { - color: #ffff00; - } - } + &:visited { + color: #ffff00; + } + } - .consult-container .grid-square .center-container .box-square { - background-color: #000; - border: 2px solid #fff; + .consult-container .grid-square .center-container .box-square { + background-color: #000; + border: 2px solid #fff; - i { - background-color: #000; - } + i { + background-color: #000; + } - .content-container { - .box-text { - color: #fff; - } + .content-container { + .box-text { + color: #fff; + } - .button-box { - background-color: #000; - color: #ffff00; - transition: background-color 0.2s; + .button-box { + background-color: #000; + color: #ffff00; + transition: background-color 0.2s; - &:hover { - background-color: #ffff00; - color: #000; - } - } - } + &:hover { + background-color: #ffff00; + color: #000; + } } + } } + } } @media (max-width: 1200px) { - .about-body .content-container .item-container { - flex-direction: column; - justify-content: center; + .about-body .content-container .item-container { + flex-direction: column; + justify-content: center; - .about-text { - max-width: none; - } + .about-text { + max-width: none; + } - .about-img { - margin: 20px 0 0 0; - } + .about-img { + margin: 20px 0 0 0; } + } } @media (max-width: 1100px) { - .about-body .content-container { - .development-container .development-logo-container { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr 1fr; - grid-row-gap: 50px; - text-align: center; - } + .about-body .content-container { + .development-container .development-logo-container { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + grid-row-gap: 50px; + text-align: center; + } - .consult-container h1 { - padding: 0; - margin-bottom: 100px; - } + .consult-container h1 { + padding: 0; + margin-bottom: 100px; } + } } @media (max-width: 1000px) { - .about-body .content-container { - padding: 50px; - } + .about-body .content-container { + padding: 50px; + } } @media (max-width: 950px) { - .about-body .content-container { - .item-container .text-container .objective-item-container { - grid-template-rows: 1fr; - grid-template-columns: 1fr; - } + .about-body .content-container { + .item-container .text-container .objective-item-container { + grid-template-rows: 1fr; + grid-template-columns: 1fr; + } - .public-container { - margin: 40px 0; - } + .public-container { + margin: 40px 0; } + } } @media (max-width: 650px) { - .about-body .content-container { - .item-container .about-img { - margin: 0; - height: auto; - } + .about-body .content-container { + .item-container .about-img { + margin: 0; + height: auto; + } - .development-container .development-logo-container { - grid-template-columns: 1fr; - grid-template-rows: 1fr; - grid-row-gap: 30px; - } + .development-container .development-logo-container { + grid-template-columns: 1fr; + grid-template-rows: 1fr; + grid-row-gap: 30px; } + } } @media (max-width: 450px) { - .about-body .content-container { - padding-left: 20px; - padding-right: 20px; + .about-body .content-container { + padding-left: 20px; + padding-right: 20px; - .link-container { - margin-left: 30px; - } + .link-container { + margin-left: 30px; + } - .item-container .text-container .objective-item-container .objective-item { - flex-direction: column; - text-align: center; + .item-container .text-container .objective-item-container .objective-item { + flex-direction: column; + text-align: center; - img { - margin: 0 0 25px 0; - } - } + img { + margin: 0 0 25px 0; + } } -} \ No newline at end of file + } +} diff --git a/src/css/TeamComponent.scss b/src/css/TeamComponent.scss index 515a8a32507fe736809f86d4674404a40caa98eb..72db0c92346f42b5f2ee1effea04ed88cb8a26c7 100644 --- a/src/css/TeamComponent.scss +++ b/src/css/TeamComponent.scss @@ -1,482 +1,531 @@ .team-body { - background: #fff; - font-family: 'Nunito'; - padding: 50px; - cursor: default; - - .content-container { - max-width: 1200px; - margin: 0 auto; - color: #3c3c3b; - - .link-container { - font-size: 12px; - - .link { - text-decoration: none; - color: #808080; - - &:visited { - color: #808080; - } - } + background: #fff; + font-family: "Nunito"; + padding: 50px; + cursor: default; - span { - color: #808080; - } - } + .content-container { + max-width: 1200px; + margin: 0 auto; + color: #3c3c3b; - .prograd-container { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - margin-bottom: 50px; - - .prograd-text { - max-width: 420px; - - .prograd { - margin-bottom: 50px; - - h1 { - color: #7a60a6; - } - - p { - font-family: 'Montserrat'; - } - } - - .coordination { - h1 { - color: #29bdef; - } - - h2 { - margin-bottom: 5px; - font-family: 'Montserrat'; - font-size: 16px; - } - - p { - margin-top: 0; - font-family: 'Montserrat'; - font-size: 14px; - } - } - } + .link-container { + font-size: 12px; - .img-team-1 { - height: 425px; - width: 100%; - margin-left: 50px; - } + .link { + text-decoration: none; + color: #808080; + + &:visited { + color: #808080; } + } - .teachers-container { - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: 50px; + span { + color: #808080; + } - h1 { - color: #7a60a6; - } + a { + font-size: 12px; + } + } - .teachers { - display: flex; - flex-direction: row; - align-items: center; - - .teacher-item { - text-align: center; - font-family: 'Montserrat'; - padding: 0 15px; - - h2 { - margin-bottom: 5px; - font-size: 16px; - } - - p { - margin-top: 0; - font-size: 14px; - } - } - } + .prograd-container { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-bottom: 50px; + + .prograd-text { + max-width: 420px; + + .prograd { + margin-bottom: 50px; + + h1 { + color: #7a60a6; + } + + p { + font-family: "Montserrat"; + } } - .analysis-container { - display: flex; - flex-direction: row; - justify-content: space-evenly; - align-items: center; - margin-bottom: 50px; + .coordination { + h1 { + color: #29bdef; + } + + h2 { + margin-bottom: 5px; + font-family: "Montserrat"; + font-size: 16px; + } + + p { + margin-top: 0; + font-family: "Montserrat"; + font-size: 14px; + } + } + } + + .img-team-1 { + height: 425px; + width: 100%; + margin-left: 50px; + } + } + + .teachers-container { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 50px; + + h1 { + color: #7a60a6; + } + + .teachers { + display: flex; + flex-direction: row; + align-items: center; + + .teacher-item { + text-align: center; + font-family: "Montserrat"; + padding: 0 15px; + + h2 { + margin-bottom: 5px; + font-size: 16px; + } + + p { + margin-top: 0; + font-size: 14px; + } + } + } + } + + .analysis-container { + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + margin-bottom: 50px; + .img-team-2 { + height: 470px; + width: 100%; + margin-right: 50px; + max-width: 530px; + } + + .data-container { + .educational-data { + margin-bottom: 50px; + + h1 { + color: #29bdef; + } + + .educational-data-text .educational-data-item { + font-family: "Montserrat"; - .img-team-2 { - height: 470px; - width: 100%; - margin-right: 50px; - max-width: 530px; + h2 { + margin-bottom: 5px; + font-size: 16px; } - .data-container { - .educational-data { - margin-bottom: 50px; - - h1 { - color: #29bdef; - } - - .educational-data-text .educational-data-item { - font-family: 'Montserrat'; - - h2 { - margin-bottom: 5px; - font-size: 16px; - } - - p { - margin: 0 0 30px 0; - font-size: 14px; - } - } - } - - .spacial-data { - - h1 { - color: #7a60a6; - } - - .spacial-data-item { - font-family: 'Montserrat'; - - h2 { - margin-bottom: 5px; - font-size: 16px; - } - - p { - margin: 0; - font-size: 14px; - } - } - } + p { + margin: 0 0 30px 0; + font-size: 14px; } + } } - .development-container { - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: 50px; - text-align: center; + .spacial-data { + h1 { + color: #7a60a6; + } - h1 { - color: #29bdef; + .spacial-data-item { + font-family: "Montserrat"; + + h2 { + margin-bottom: 5px; + font-size: 16px; } - .developers-container { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-row-gap: 20px; - align-items: center; - - .developers-item { - font-family: 'Montserrat'; - padding: 0 50px; - - h2 { - margin-bottom: 5px; - font-size: 16px; - } - - p { - margin: 0; - font-size: 14px; - } - } + p { + margin: 0; + font-size: 14px; } + } } + } + } - .design-container { - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: 50px; + .development-container { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 50px; + text-align: center; + + h1 { + color: #29bdef; + } + + .coordenators-container { + display: grid; + grid-template-columns: 1fr 1fr; + grid-row-gap: 20px; + align-items: center; + + .coordenators-item { + font-family: "Montserrat"; + padding: 0 50px; + + h2 { + margin-bottom: 5px; + font-size: 16px; + } + + p { + margin: 0; + font-size: 14px; + } + } + } + - h1 { - color: #7a60a6; - } + .developers-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-row-gap: 20px; + align-items: center; - h2 { - font-family: 'Montserrat'; - font-size: 16px; - margin-top: 0; - } + .developers-item { + font-family: "Montserrat"; + padding: 0 50px; + + h2 { + margin-bottom: 5px; + font-size: 16px; + } + + p { + margin: 0; + font-size: 14px; + } } + } } -} -.high-contrast-team { - background: #000; + .specialdata-container { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 50px; - .content-container { - .link-container { - .link { - color: #ffff00; + h1 { + color:#7a60a6; + } - &:visited { - color: #ffff00; - } - } + .specialdata-item { + text-align: center; + font-family: "Montserrat"; - span { - color: #ffff00; - } + h2 { + margin-bottom: 5px; + font-size: 16px; } - .prograd-container .prograd-text .prograd h1, - .prograd-container .prograd-text .prograd p, - .prograd-container .prograd-text .coordination h1, - .prograd-container .prograd-text .coordination h2, - .prograd-container .prograd-text .coordination p, - .teachers-container h1, - .teachers-container h2, - .teachers-container p, - .analysis-container .data-container .educational-data h1, - .analysis-container .data-container .educational-data h2, - .analysis-container .data-container .educational-data p, - .analysis-container .data-container .spacial-data h1, - .analysis-container .data-container .spacial-data h2, - .analysis-container .data-container .spacial-data p, - .development-container h1, - .development-container h2, - .development-container p, - .design-container h1, - .design-container h2 { - color: #fff; + p { + margin: 0; + font-size: 14px; } + } } + + .design-container { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 50px; + + h1 { + color: #7a60a6; + } + h2 { + font-family: "Montserrat"; + font-size: 16px; + margin-top: 0; + } + } + } } -@media (max-width: 1100px) { - .team-body .content-container { - .prograd-container { - flex-direction: column; - margin: 0; +.high-contrast-team { + background: #000; - .prograd-text { - display: flex; - flex-direction: row; - justify-content: space-evenly; - align-items: center; - max-width: none; - margin-bottom: 20px; - - .prograd { - margin: 0; - max-width: 45%; - - h1 { - font-size: 28px; - } - } - - .coordination h1 { - margin-top: 0; - font-size: 28px; - } - } + .content-container { + .link-container { + .link { + color: #ffff00; - .img-team-1 { - height: 375px; - margin-left: 0; - } + &:visited { + color: #ffff00; } + } - .teachers-container { - h1 { - font-size: 28px; - } - - .teachers { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-row-gap: 20px; + span { + color: #ffff00; + } + } - .teacher-item { - padding: 0 30px; - } - } - } + .prograd-container .prograd-text .prograd h1, + .prograd-container .prograd-text .prograd p, + .prograd-container .prograd-text .coordination h1, + .prograd-container .prograd-text .coordination h2, + .prograd-container .prograd-text .coordination p, + .teachers-container h1, + .teachers-container h2, + .teachers-container p, + .analysis-container .data-container .educational-data h1, + .analysis-container .data-container .educational-data h2, + .analysis-container .data-container .educational-data p, + .analysis-container .data-container .spacial-data h1, + .analysis-container .data-container .spacial-data h2, + .analysis-container .data-container .spacial-data p, + .development-container h1, + .development-container h2, + .development-container p, + .design-container h1, + .design-container h2 { + color: #fff; + } + } +} - .analysis-container .data-container .educational-data h1, - .analysis-container .data-container .spacial-data h1 { +@media (max-width: 1100px) { + .team-body .content-container { + .prograd-container { + flex-direction: column; + margin: 0; + + .prograd-text { + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + max-width: none; + margin-bottom: 20px; + + .prograd { + margin: 0; + max-width: 45%; + + h1 { font-size: 28px; + } } - .development-container { - h1 { - font-size: 28px; - } - - .developers-container { - grid-template-columns: 1fr 1fr 1fr; - } + .coordination h1 { + margin-top: 0; + font-size: 28px; } + } - .design-container h1 { - font-size: 28px; - } + .img-team-1 { + height: 375px; + margin-left: 0; + } } -} -@media (max-width: 860px) { - .team-body .content-container { - .prograd-container .prograd-text { - flex-direction: column; - text-align: center; + .teachers-container { + h1 { + font-size: 28px; + } - .prograd { - max-width: none; - } + .teachers { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-row-gap: 20px; - .coordination h1 { - margin-top: 20px; - } + .teacher-item { + padding: 0 30px; } + } + } - .analysis-container { - flex-direction: column-reverse; - margin: 0; + .analysis-container .data-container .educational-data h1, + .analysis-container .data-container .spacial-data h1 { + font-size: 28px; + } - .data-container { - text-align: center; - margin-bottom: 70px; + .development-container { + h1 { + font-size: 28px; + } - .educational-data { - margin: 0; + .developers-container { + grid-template-columns: 1fr 1fr 1fr; + } + } - .educational-data-text { - display: grid; - grid-template-columns: 1fr 1fr; - grid-column-gap: 30px; - align-items: center; + .design-container h1 { + font-size: 28px; + } + } +} - .educational-data-item { - padding: 0 20px; - } - } - } - } +@media (max-width: 860px) { + .team-body .content-container { + .prograd-container .prograd-text { + flex-direction: column; + text-align: center; + + .prograd { + max-width: none; + } + + .coordination h1 { + margin-top: 20px; + } + } - .img-team-2 { - margin: 0; - height: 430px; - } - } + .analysis-container { + flex-direction: column-reverse; + margin: 0; - .teachers-container .teachers { - grid-template-columns: 1fr 1fr; - } + .data-container { + text-align: center; + margin-bottom: 70px; + + .educational-data { + margin: 0; - .development-container .developers-container { + .educational-data-text { + display: grid; grid-template-columns: 1fr 1fr; + grid-column-gap: 30px; + align-items: center; - .developers-item { - padding: 0 70px; + .educational-data-item { + padding: 0 20px; } + } } + } + + .img-team-2 { + margin: 0; + height: 430px; + } + } + + .teachers-container .teachers { + grid-template-columns: 1fr 1fr; + } + + .development-container .developers-container { + grid-template-columns: 1fr 1fr; + + .developers-item { + padding: 0 70px; + } } + } } @media (max-width: 690px) { - .team-body .content-container { - .development-container .developers-container { - grid-template-columns: 1fr; + .team-body .content-container { + .development-container .developers-container { + grid-template-columns: 1fr; - .developers-item { - padding: 0; - } - } + .developers-item { + padding: 0; + } } + } } @media (max-width: 600px) { - .team-body .content-container { - .teachers-container { - margin: 0; + .team-body .content-container { + .teachers-container { + margin: 0; - .teachers { - grid-template-columns: 1fr; - } - } + .teachers { + grid-template-columns: 1fr; + } + } - .analysis-container { - .data-container .educational-data .educational-data-text { - grid-template-columns: 1fr; - } + .analysis-container { + .data-container .educational-data .educational-data-text { + grid-template-columns: 1fr; + } - .img-team-2 { - height: 385px; - } - } + .img-team-2 { + height: 385px; + } } + } } @media (max-width: 450px) { - .team-body .content-container { - .prograd-container { - margin-top: 30px; - - .prograd-text .prograd h1, - .prograd-text .coordination h1 { - font-size: 24px; - padding: 0 10px; - } - - .img-team-1 { - height: 250px; - } - } + .team-body .content-container { + .prograd-container { + margin-top: 30px; + + .prograd-text .prograd h1, + .prograd-text .coordination h1 { + font-size: 24px; + padding: 0 10px; + } + + .img-team-1 { + height: 250px; + } + } - .teachers-container { - h1 { - font-size: 24px; - } + .teachers-container { + h1 { + font-size: 24px; + } - .teachers .teacher-item { - padding: 0; - } - } + .teachers .teacher-item { + padding: 0; + } + } - .analysis-container { - .img-team-2 { - height: 300px; - } + .analysis-container { + .img-team-2 { + height: 300px; + } - .data-container .educational-data h1, - .data-container .spacial-data h1 { - font-size: 24px; - } - } + .data-container .educational-data h1, + .data-container .spacial-data h1 { + font-size: 24px; + } + } - .development-container { - h1 { - font-size: 24px; - } + .development-container { + h1 { + font-size: 24px; + } - .developers-container .developers-item { - padding: 0; - } - } + .developers-container .developers-item { + padding: 0; + } + } - .design-container h1 { - font-size: 24px; - } + .design-container h1 { + font-size: 24px; } + } } - diff --git a/src/css/TutorialModalComponent.scss b/src/css/TutorialModalComponent.scss index 828cc81bb34d677bebff326b467b1811e562b090..3fce18e5a12af8fbe77d9d0ab8f099324a18934d 100644 --- a/src/css/TutorialModalComponent.scss +++ b/src/css/TutorialModalComponent.scss @@ -3,8 +3,8 @@ color: #3c3c3c; border-radius: 20px; text-align: center; - font-family: 'Nunito'; padding: 20px; + font-family: 'Nunito'; width: 80%; height: 80%; cursor: default; @@ -35,209 +35,116 @@ } } - .img-container .img { - width: 100%; - max-width: 900px; + .title-tutorial { + font-size: 36px; } - .title-tutorial { - font-size: 28px; + .img { + width:100%; + height: calc(100% - 250px); + max-width: 900px; + margin: 0 auto; } .subtitle-tutorial { - font-size: 18px; - margin: 0 50px 0 50px; + font-size: 24px; + padding: 0 100px; } .button-container { display: flex; justify-content: space-between; align-items: center; + margin-top: 10px; - .button-cancel { + button { cursor: pointer; - color: #7a60a6; font-family: 'Nunito'; font-size: 18px; - background-color: #fff; border: solid 2px #7a60a6; border-radius: 10px; + padding: 5px 10px; + width: 140px; + + &:hover { + filter: brightness(0.8); + } + } + + .button-cancel { + color: #7a60a6; + background-color: #fff; } .img-button { height: 8px; width: 64px; + margin: 0 10px; } .button-continue { - font-family: 'Nunito'; - cursor: pointer; color: #fff; - font-size: 18px; background-color: #7a60a6; - border: solid 2px #7a60a6; - border-radius: 10px; } } } -.high-contrast { +.high-contrast-tutorial { background: #000; + box-shadow: 0 0 0 2px #fff; + + .modal-header-container button img { + filter: brightness(0) + saturate(100%) + invert(92%) + sepia(36%) + saturate(1268%) + hue-rotate(350deg) + brightness(109%) + contrast(106%); + } - &.modal-tutorial { - border: 2px solid #fff; - - .modal-header-container button { - filter: brightness(5); - - &.hover{ - border: 2px solid #fff; - } - } - - .title-tutorial, .subtitle-tutorial { - color: #fff; - } + .title-tutorial, + .subtitle-tutorial { + color: #fff; + } - .button-container { - .button-cancel { - border: 2px solid #ffff00; - color: #ffff00; - background-color: #000; - } + .button-container { + .button-cancel { + background: #000; + border: 2px solid #ffff00; + color: #ffff00; + transition: background-color 0.2s; - .button-continue { - border: 2px solid #ffff00; + &:hover { background-color: #ffff00; color: #000; } } - } -} -@media (min-width: 360px) { - .modal-tutorial { - .modal-header-container .button { - height: 20px; - width: 20px; - } - - .title-tutorial { - font-size: 24px; - } - - .subtitle-tutorial { - margin: 0 20px 0 20px; - } - - .button-container { - .img-button { - height: 6px; - width: 48px; - } - - .button-cancel { - font-size: 14px; - padding: 3px; - border-width: 2px; - width: 15vh; - } - - .button-continue { - font-size: 14px; - padding: 3px; - border-width: 2px; - width: 15vh; - } + .button-continue { + background: #ffff00; + border: 2px solid #ffff00; + color: #000; + transition: background-color 0.2s; } } } -@media (min-width: 600px){ - .modal-tutorial { - .modal-header-container .button { - height: 30px; - width: 30px; - } - - .title-tutorial { - font-size: 24px; - } - - .subtitle-tutorial { - margin: 0 30px 0 30px; - } - - .button-container { - .img-button { - height: 8px; - width: 64px; - } - - .button-cancel { - font-size: 18px; - padding: 5px; - border-width: 3px; - width: 20vh; - } - - .button-continue { - font-size: 18px; - padding: 5px; - border-width: 3px; - width: 20vh; - } - } +@media (max-width: 1290px) { + .modal-tutorial .subtitle-tutorial { + font-size: 18px; } } -@media (min-width: 950px) { - .modal-tutorial { - .modal-header-container .button { - height: 40px; - width: 40px; - } - - .title-tutorial { - font-size: 28px; - } - - .subtitle-tutorial { - font-size: 18px; - margin: 0 50px 0 50px; - } +@media (max-width: 700px) { + .modal-tutorial .subtitle-tutorial { + padding: 0; } } -@media (min-width: 1400px) { - .modal-tutorial { - .title-tutorial { - font-size: 36px; - } - - .subtitle-tutorial { - font-size: 24px; - margin: 0 50px 0 50px; - } - - .button-container { - .img-button { - height: 16px; - width: 128px; - } - - .button-cancel { - font-size: 24px; - padding: 4px; - border-width: 4px; - width: 20vh; - } - .button-continue { - font-size: 24px; - padding: 4px; - border-width: 4px; - width: 20vh; - } - } +@media (max-height: 700px) { + .modal-tutorial .subtitle-tutorial { + font-size: 14px; } } \ No newline at end of file diff --git a/src/data/files/termo-de-uso.pdf b/src/data/files/termo-de-uso.pdf index e4dd086c00f480e100f999ca6db5894211211aa3..62bed55c0b6bcacead1d20cf8152bd5a40b99d52 100644 Binary files a/src/data/files/termo-de-uso.pdf and b/src/data/files/termo-de-uso.pdf differ diff --git a/src/data/groups.js b/src/data/groups.js index 88770bdda00afd6676472dc5001e7b27d33d8ad7..411f735192313e323e7da8aefdb7d28cc8888b80 100644 --- a/src/data/groups.js +++ b/src/data/groups.js @@ -40,8 +40,8 @@ const groups = { route: ['disciplines'], dim: 'discipline', type: 'bar', - years: [2019, 2019], - notes: ["Fonte: Elaborado pelo Laboratório de Dados Educacionais a partir dos Microdados do Censo da Educação Básica/INEP 2019."], + years: [2020, 2020], + notes: ["Fonte: Elaborado pelo Laboratório de Dados Educacionais a partir dos Microdados do Censo da Educação Básica/INEP 2020."], education: 'basic', disciplines: true, extraFilters: { state: { value: 41 } }, @@ -51,8 +51,8 @@ const groups = { route: 'disciplines', dim: 'discipline', type: 'bar', - years: [2012, 2019], - notes: ['Fonte: Elaborado pelo Laboratório de Dados Educacionais a partir dos Microdados do Censo da Educação Básica/INEP 2019.'], + years: [2012, 2020], + notes: ['Fonte: Elaborado pelo Laboratório de Dados Educacionais a partir dos Microdados do Censo da Educação Básica/INEP 2020.'], education: 'basic', extraFilters: { state: { value: 41 } }, }, @@ -63,8 +63,8 @@ const groups = { route: 'disciplines', dim: 'discipline', type: 'bar', - years: [2019, 2019], - notes: ['Fonte: Elaborado pelo Laboratório de Dados Educacionais a partir dos Microdados do Censo da Educação Básica/INEP 2019.'], + years: [2020, 2020], + notes: ['Fonte: Elaborado pelo Laboratório de Dados Educacionais a partir dos Microdados do Censo da Educação Básica/INEP 2020.'], education: 'basic', extraFilters: { state: { value: 41 } }, }, @@ -366,8 +366,8 @@ const groups = { route: ['disciplines'], dim: 'discipline', type: 'bar', - years: [2019, 2019], - notes: ["Fonte: Elaborado pelo Laboratório de Dados Educacionais a partir dos Microdados do Censo da Educação Básica/INEP 2019."], + years: [2020, 2020], + notes: ["Fonte: Elaborado pelo Laboratório de Dados Educacionais a partir dos Microdados do Censo da Educação Básica/INEP 2020."], education: 'basic', disciplines: true, extraFilters: { state: { value: 41 } }, @@ -377,8 +377,8 @@ const groups = { route: 'disciplines', dim: 'discipline', type: 'bar', - years: [2012, 2019], - notes: ['Fonte: Elaborado pelo Laboratório de Dados Educacionais a partir dos Microdados do Censo da Educação Básica/INEP 2019.'], + years: [2012, 2020], + notes: ['Fonte: Elaborado pelo Laboratório de Dados Educacionais a partir dos Microdados do Censo da Educação Básica/INEP 2020.'], education: 'basic', extraFilters: { state: { value: 41 } }, }, @@ -389,8 +389,8 @@ const groups = { route: 'disciplines', dim: 'discipline', type: 'bar', - years: [2019, 2019], - notes: ['Fonte: Elaborado pelo Laboratório de Dados Educacionais a partir dos Microdados do Censo da Educação Básica/INEP 2019.'], + years: [2020, 2020], + notes: ['Fonte: Elaborado pelo Laboratório de Dados Educacionais a partir dos Microdados do Censo da Educação Básica/INEP 2020.'], education: 'basic', extraFilters: { state: { value: 41 } }, }, diff --git a/src/data/indicadores.js b/src/data/indicadores.js index 53f0c8c7dad52c39e7db85f826d0c6e78631215a..ffe6f58bcd59853e6999ad0d97acd5396e18e207 100644 --- a/src/data/indicadores.js +++ b/src/data/indicadores.js @@ -25,8 +25,8 @@ const indicadores = { group_route: 'formacao_docente', title: 'Adequação da formação docente por disciplina ministrada', legendTitle: 'Percentual de disciplinas cujos docentes têm formação adequada', - mapNote: 'Fonte: Elaborado pelo Laboratório de Dados Educacionais com Base no Censo da Educação Básica/INEP 2019.', - fixedFilters: { min_year: { value: 2019 }, max_year: { value: 2019 }, state: { value: 41 } }, + mapNote: 'Fonte: Elaborado pelo Laboratório de Dados Educacionais com Base no Censo da Educação Básica/INEP 2020.', + fixedFilters: { min_year: { value: 2020 }, max_year: { value: 2020 }, state: { value: 41 } }, color: 'percent', percentKey: 'suitable', percentValues: [1], @@ -158,8 +158,8 @@ const indicadores = { group_route: 'formacao_docente', title: 'Demanda de docências de professores com formação adequada', legendTitle: 'Demanda de docências de professores com formação adequada', - mapNote: 'Fonte: Elaborado pelo Laboratório de Dados Educacionais com Base no Censo da Educação Básica/INEP 2019.', - fixedFilters: { min_year: { value: 2019 }, max_year: { value: 2019 }, state: { value: 41 } }, + mapNote: 'Fonte: Elaborado pelo Laboratório de Dados Educacionais com Base no Censo da Educação Básica/INEP 2020.', + fixedFilters: { min_year: { value: 2020 }, max_year: { value: 2020 }, state: { value: 41 } }, color: 'interval', percentKey: 'suitable', percentValues: [1], diff --git "a/src/img/Bot\303\265es brancoDownloadButton.svg" "b/src/img/Bot\303\265es brancoDownloadButton.svg" new file mode 100644 index 0000000000000000000000000000000000000000..6f4e6002424ccf884047efab85c5549af0dbc686 --- /dev/null +++ "b/src/img/Bot\303\265es brancoDownloadButton.svg" @@ -0,0 +1,5 @@ +<svg width="107" height="36" viewBox="0 0 107 36" fill="none" xmlns="http://www.w3.org/2000/svg"> +<rect width="107" height="36" rx="10" fill="white"/> +<path d="M24 18L28 22M28 22L32 18M28 22L28 10M20 18L20 26L36 26L36 18" stroke="#808080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M51.952 17.192C52.6027 17.3733 53.104 17.6987 53.456 18.168C53.8187 18.6373 54 19.224 54 19.928C54 20.8987 53.664 21.656 52.992 22.2C52.3307 22.7333 51.4027 23 50.208 23H46.128C45.872 23 45.6693 22.9307 45.52 22.792C45.3813 22.6427 45.312 22.4453 45.312 22.2V12.52C45.312 12.2747 45.3813 12.0827 45.52 11.944C45.6693 11.7947 45.872 11.72 46.128 11.72H50.032C51.1947 11.72 52.1013 11.9813 52.752 12.504C53.4133 13.016 53.744 13.736 53.744 14.664C53.744 15.2613 53.584 15.7787 53.264 16.216C52.9547 16.6533 52.5173 16.9787 51.952 17.192ZM46.928 16.6H49.776C51.3547 16.6 52.144 16.0027 52.144 14.808C52.144 14.2107 51.9467 13.768 51.552 13.48C51.168 13.192 50.576 13.048 49.776 13.048H46.928V16.6ZM50.032 21.672C50.8533 21.672 51.456 21.5227 51.84 21.224C52.224 20.9253 52.416 20.4613 52.416 19.832C52.416 19.192 52.2187 18.7173 51.824 18.408C51.44 18.088 50.8427 17.928 50.032 17.928H46.928V21.672H50.032ZM59.2438 15C60.2784 15 61.0464 15.2613 61.5478 15.784C62.0598 16.3067 62.3158 17.1013 62.3158 18.168V22.312C62.3158 22.5573 62.2464 22.7493 62.1078 22.888C61.9691 23.016 61.7771 23.08 61.5318 23.08C61.2971 23.08 61.1104 23.0107 60.9718 22.872C60.8331 22.7333 60.7638 22.5467 60.7638 22.312V21.72C60.5611 22.168 60.2571 22.5147 59.8518 22.76C59.4571 22.9947 58.9931 23.112 58.4598 23.112C57.9478 23.112 57.4784 23.0107 57.0518 22.808C56.6251 22.5947 56.2891 22.3013 56.0438 21.928C55.8091 21.5547 55.6918 21.1387 55.6918 20.68C55.6918 20.1147 55.8358 19.672 56.1238 19.352C56.4224 19.0213 56.9078 18.7867 57.5798 18.648C58.2624 18.5093 59.1958 18.44 60.3798 18.44H60.7478V17.976C60.7478 17.3787 60.6251 16.9467 60.3798 16.68C60.1344 16.4133 59.7398 16.28 59.1958 16.28C58.8224 16.28 58.4704 16.328 58.1398 16.424C57.8091 16.52 57.4464 16.6587 57.0518 16.84C56.7638 17 56.5611 17.08 56.4438 17.08C56.2838 17.08 56.1504 17.0213 56.0438 16.904C55.9478 16.7867 55.8997 16.6373 55.8997 16.456C55.8997 16.296 55.9424 16.1573 56.0278 16.04C56.1238 15.912 56.2731 15.7893 56.4758 15.672C56.8491 15.4693 57.2864 15.3093 57.7878 15.192C58.2891 15.064 58.7744 15 59.2438 15ZM58.7478 21.912C59.3344 21.912 59.8144 21.7147 60.1878 21.32C60.5611 20.9147 60.7478 20.3973 60.7478 19.768V19.352H60.4598C59.6278 19.352 58.9878 19.3893 58.5398 19.464C58.0918 19.5387 57.7718 19.6667 57.5798 19.848C57.3878 20.0187 57.2918 20.2693 57.2918 20.6C57.2918 20.984 57.4304 21.2987 57.7078 21.544C57.9851 21.7893 58.3318 21.912 58.7478 21.912ZM65.3423 23.08C65.1076 23.08 64.9103 23.016 64.7503 22.888C64.6009 22.76 64.5263 22.568 64.5263 22.312V15.816C64.5263 15.56 64.6009 15.368 64.7503 15.24C64.9103 15.1013 65.1076 15.032 65.3423 15.032C65.5769 15.032 65.7689 15.1013 65.9183 15.24C66.0676 15.368 66.1423 15.56 66.1423 15.816V22.312C66.1423 22.568 66.0676 22.76 65.9183 22.888C65.7689 23.016 65.5769 23.08 65.3423 23.08ZM65.3423 13.464C65.0329 13.464 64.7876 13.3787 64.6063 13.208C64.4249 13.0373 64.3343 12.8133 64.3343 12.536C64.3343 12.2587 64.4249 12.04 64.6063 11.88C64.7876 11.7093 65.0329 11.624 65.3423 11.624C65.6409 11.624 65.8809 11.7093 66.0623 11.88C66.2543 12.04 66.3503 12.2587 66.3503 12.536C66.3503 12.8133 66.2596 13.0373 66.0783 13.208C65.8969 13.3787 65.6516 13.464 65.3423 13.464ZM74.9773 21.784C75.1373 21.944 75.2173 22.1307 75.2173 22.344C75.2173 22.5467 75.1426 22.7227 74.9933 22.872C74.8546 23.0107 74.6839 23.08 74.4813 23.08C74.2786 23.08 74.0919 22.9893 73.9213 22.808L71.4733 20.056L69.0413 22.808C68.8706 22.9893 68.6839 23.08 68.4813 23.08C68.2786 23.08 68.1026 23.0053 67.9533 22.856C67.8146 22.7067 67.7453 22.5307 67.7453 22.328C67.7453 22.1253 67.8199 21.944 67.9693 21.784L70.4973 19L68.0973 16.328C67.9373 16.1467 67.8573 15.9653 67.8573 15.784C67.8573 15.5813 67.9319 15.4107 68.0813 15.272C68.2306 15.1227 68.4013 15.048 68.5933 15.048C68.7959 15.048 68.9826 15.1387 69.1533 15.32L71.4733 17.944L73.7933 15.32C73.9639 15.1387 74.1559 15.048 74.3693 15.048C74.5613 15.048 74.7319 15.1227 74.8813 15.272C75.0306 15.4107 75.1053 15.5813 75.1053 15.784C75.1053 15.9867 75.0253 16.168 74.8653 16.328L72.4653 19L74.9773 21.784ZM80.0406 15C81.0753 15 81.8433 15.2613 82.3446 15.784C82.8566 16.3067 83.1126 17.1013 83.1126 18.168V22.312C83.1126 22.5573 83.0433 22.7493 82.9046 22.888C82.766 23.016 82.574 23.08 82.3286 23.08C82.094 23.08 81.9073 23.0107 81.7686 22.872C81.63 22.7333 81.5606 22.5467 81.5606 22.312V21.72C81.358 22.168 81.054 22.5147 80.6486 22.76C80.254 22.9947 79.79 23.112 79.2566 23.112C78.7446 23.112 78.2753 23.0107 77.8486 22.808C77.422 22.5947 77.086 22.3013 76.8406 21.928C76.606 21.5547 76.4886 21.1387 76.4886 20.68C76.4886 20.1147 76.6326 19.672 76.9206 19.352C77.2193 19.0213 77.7046 18.7867 78.3766 18.648C79.0593 18.5093 79.9926 18.44 81.1766 18.44H81.5446V17.976C81.5446 17.3787 81.422 16.9467 81.1766 16.68C80.9313 16.4133 80.5366 16.28 79.9926 16.28C79.6193 16.28 79.2673 16.328 78.9366 16.424C78.606 16.52 78.2433 16.6587 77.8486 16.84C77.5606 17 77.358 17.08 77.2406 17.08C77.0806 17.08 76.9473 17.0213 76.8406 16.904C76.7446 16.7867 76.6966 16.6373 76.6966 16.456C76.6966 16.296 76.7393 16.1573 76.8246 16.04C76.9206 15.912 77.07 15.7893 77.2726 15.672C77.646 15.4693 78.0833 15.3093 78.5846 15.192C79.086 15.064 79.5713 15 80.0406 15ZM79.5446 21.912C80.1313 21.912 80.6113 21.7147 80.9846 21.32C81.358 20.9147 81.5446 20.3973 81.5446 19.768V19.352H81.2566C80.4246 19.352 79.7846 19.3893 79.3366 19.464C78.8886 19.5387 78.5686 19.6667 78.3766 19.848C78.1846 20.0187 78.0886 20.2693 78.0886 20.6C78.0886 20.984 78.2273 21.2987 78.5046 21.544C78.782 21.7893 79.1286 21.912 79.5446 21.912ZM89.4191 15.032C89.9311 15 90.1871 15.2187 90.1871 15.688C90.1871 15.9227 90.1285 16.0987 90.0111 16.216C89.8938 16.3333 89.6911 16.4027 89.4031 16.424L88.9231 16.472C88.2511 16.536 87.7498 16.7707 87.4191 17.176C87.0991 17.5813 86.9391 18.072 86.9391 18.648V22.312C86.9391 22.568 86.8645 22.76 86.7151 22.888C86.5658 23.016 86.3738 23.08 86.1391 23.08C85.9045 23.08 85.7071 23.016 85.5471 22.888C85.3978 22.76 85.3231 22.568 85.3231 22.312V15.8C85.3231 15.5547 85.3978 15.368 85.5471 15.24C85.7071 15.1013 85.9045 15.032 86.1391 15.032C86.3525 15.032 86.5285 15.1013 86.6671 15.24C86.8165 15.368 86.8911 15.5493 86.8911 15.784V16.552C87.1045 16.0827 87.4138 15.7253 87.8191 15.48C88.2245 15.2347 88.6831 15.0907 89.1951 15.048L89.4191 15.032Z" fill="#808080"/> +</svg> diff --git a/src/img/download-icon.svg b/src/img/download-icon.svg new file mode 100644 index 0000000000000000000000000000000000000000..cdfcfc8f659dc85c428c590bc2859a8afbbe5fe6 --- /dev/null +++ b/src/img/download-icon.svg @@ -0,0 +1,3 @@ +<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M5 9L9 13M9 13L13 9M9 13L9 1M1 9L1 17L17 17L17 9" stroke="#808080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +</svg> diff --git a/src/img/sorting-arrow.svg b/src/img/sorting-arrow.svg new file mode 100644 index 0000000000000000000000000000000000000000..617de8f4ca660315d54fe3432d2889d96a15eca0 --- /dev/null +++ b/src/img/sorting-arrow.svg @@ -0,0 +1,4 @@ +<svg width="17" height="32" viewBox="0 0 17 32" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M2.2002 11L8.2002 5L14.2002 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M2.2002 21L8.2002 27L14.2002 21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> +</svg>