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 79ad836adccca680402f6cf1d70fefd051d1a166..00867022e624a16dde8957b6817f7646f104d24c 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,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..3622f8cceace2c61f1c8d106785780ef415747a3 100644
--- a/src/components/BottomTableComponent.js
+++ b/src/components/BottomTableComponent.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/BottomTableComponent.scss';
@@ -45,6 +49,7 @@ function BottomTableComponent(props) {
const [selectedFilters, setSelectedFilters] = useState([]);
const [downloadFile, setdownloadFile] = useState([]);
const [totalTableData, setTotalTableData] = useState({});
+ const [formattedTableData, setFormattedTableData] = useState([]);
useEffect(() => {
const chartYearFilters = {
@@ -317,6 +322,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 ?
@@ -364,152 +475,82 @@ function BottomTableComponent(props) {
</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/PieChartComponent.js b/src/components/Charts/PieChartComponent.js
index f09eee4879e94767075a4eda7a36c623de6db63d..4bd51b541bef0e5081f6ad5178bf521bba1263a3 100644
--- a/src/components/Charts/PieChartComponent.js
+++ b/src/components/Charts/PieChartComponent.js
@@ -329,7 +329,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/MapComponent.js b/src/components/Map/MapComponent.js
index 7ab54b15cff4601ea5b363142b7504276cfcd694..b8570323940bec04cd9f6e1f727c55a3a08e5538 100644
--- a/src/components/Map/MapComponent.js
+++ b/src/components/Map/MapComponent.js
@@ -544,7 +544,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/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 121cdf4e54504e0aaec354f98e74ae09682817d5..7ace0888e504413648abc53a24184eaaa30b3f79 100644
--- a/src/components/Pages/TeamComponent.js
+++ b/src/components/Pages/TeamComponent.js
@@ -134,6 +134,10 @@ function TeamComponent(){
<h2>Henrique Varella Ehrenfried</h2>
<p>Laboratório de Dados Educacionais / C3SL</p>
</Grid>
+ <Grid className="developers-item">
+ <h2>João Pedro Kieras Oliveira</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>
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..0a7c1c536bcd9e1825e90c6c9be65908774d30dd 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,6 +136,25 @@
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;
+ }
+ }
}
}
}
@@ -248,4 +272,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/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..4321e6f87be9a1d706897bb91250a05c8da72634 100644
--- a/src/css/TeamComponent.scss
+++ b/src/css/TeamComponent.scss
@@ -1,482 +1,483 @@
.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;
- .analysis-container {
- display: flex;
- flex-direction: row;
- justify-content: space-evenly;
- align-items: center;
- margin-bottom: 50px;
+ .prograd-text {
+ max-width: 420px;
- .img-team-2 {
- height: 470px;
- width: 100%;
- margin-right: 50px;
- max-width: 530px;
- }
+ .prograd {
+ margin-bottom: 50px;
- .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;
- }
- }
- }
- }
+ h1 {
+ color: #7a60a6;
+ }
+
+ p {
+ font-family: "Montserrat";
+ }
}
- .development-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-bottom: 50px;
- text-align: center;
+ .coordination {
+ h1 {
+ color: #29bdef;
+ }
+
+ h2 {
+ margin-bottom: 5px;
+ font-family: "Montserrat";
+ font-size: 16px;
+ }
+
+ p {
+ margin-top: 0;
+ font-family: "Montserrat";
+ font-size: 14px;
+ }
+ }
+ }
- h1 {
- color: #29bdef;
- }
+ .img-team-1 {
+ height: 425px;
+ width: 100%;
+ margin-left: 50px;
+ }
+ }
- .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;
- }
- }
- }
+ .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";
- .design-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-bottom: 50px;
-
- h1 {
- color: #7a60a6;
+ h2 {
+ margin-bottom: 5px;
+ font-size: 16px;
}
- h2 {
- font-family: 'Montserrat';
- font-size: 16px;
- margin-top: 0;
+ p {
+ margin: 0 0 30px 0;
+ font-size: 14px;
}
+ }
}
- }
-}
-.high-contrast-team {
- background: #000;
+ .spacial-data {
+ h1 {
+ color: #7a60a6;
+ }
- .content-container {
- .link-container {
- .link {
- color: #ffff00;
+ .spacial-data-item {
+ font-family: "Montserrat";
- &:visited {
- color: #ffff00;
- }
+ h2 {
+ margin-bottom: 5px;
+ font-size: 16px;
}
- span {
- color: #ffff00;
+ p {
+ margin: 0;
+ font-size: 14px;
}
+ }
}
+ }
+ }
- .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;
+ .development-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 50px;
+ text-align: center;
+
+ h1 {
+ color: #29bdef;
+ }
+
+ .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;
+ }
}
+ }
+ }
+
+ .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/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>