From 85ef96e7dcc2a5ad0176d77585598750bdcc4866 Mon Sep 17 00:00:00 2001 From: badain Date: Thu, 7 May 2020 00:04:53 -0300 Subject: [PATCH] =?UTF-8?q?[site]=20melhorias=20na=20apresenta=C3=A7=C3=A3?= =?UTF-8?q?o=20dos=20dados?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Melhorias na apresentação dos dados: 1) Legendas: · Melhora as regras de centralização; · Melhora identificação da classe de legenda; · Adiciona paletas de cores pré-fabricadas para legendas e texto inline colorblind safe. 2) Gráficos · Aumenta o tamanho disponível para os gráficos em celulares: .chart-fix --- css/custom.css | 170 +++++++++++++++++++++++++++++++++-------------- index.html | 8 +-- informacoes.html | 10 +-- leitos.html | 10 +-- midia.html | 10 +-- municipios.html | 18 ++--- perguntas.html | 10 +-- progressao.html | 26 ++++---- sobre.html | 10 +-- 9 files changed, 170 insertions(+), 102 deletions(-) diff --git a/css/custom.css b/css/custom.css index 5ba805179b6..af85eb20dd0 100644 --- a/css/custom.css +++ b/css/custom.css @@ -491,89 +491,150 @@ a.text-reset:hover { } /* GLOBAL: CHART LEGENDS */ -.card-chartLegend { - display: -ms-flexbox!important; - display: flex!important; - -ms-flex-pack: center!important; - justify-content: center!important; - padding-top: .5rem!important; - padding-bottom: 0!important; +.card-legend { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + padding-top: .5rem; + padding-bottom: 0; } -.chartLegendSquare { +.legend-square { font-family: 'Poppins', sans-serif; font-size: 0.85rem; font-weight: 500; - margin-right: 1.5rem!important; - margin-bottom: 1rem; - display: -ms-flexbox!important; - display: flex!important; - -ms-flex-item-align: center!important; - align-self: center!important; + margin-right: 1rem; + display: -ms-flexbox; + display: flex; + -ms-flex-item-align: center; + align-self: center; } -.chartLegendSquare:before { +.legend-square:last-child { + margin: 0; +} +/* legenda: square */ +.legend-square:before { content: ""; width: 20px; height: 20px; - margin: 0 0.5rem 0 0; + margin: 0 0.3rem 0 0; border-radius: 4px; } - -.chartLegendSquare#legendBlack:before { +/* legenda: square colors */ +/* wong */ +.legend-square#wong_black:before { background-color: #000; } - -.chartLegendSquare#legendGrey:before { - background-color: #9d9fa6; +.legend-square#wong_orange:before { + background-color: #e69f00; } - -.chartLegendSquare#legendBlue:before { - background-color: #007bff; +.legend-square#wong_yellow:before { + background-color: #F0E442; } - -.chartLegendSquare#legendBlueLight:before { - background-color: #55a1f2; +.legend-square#wong_red:before { + background-color: #D55E00; } - -.chartLegendSquare#legendBlueDark:before { - background-color: #0050a6; +.legend-square#wong_pink:before { + background-color: #CC79A7; } - -.chartLegendSquare#legendPurple:before { - background-color: #6f42c1; +.legend-square#wong_green:before { + background-color: #009E73; } - -.chartLegendSquare#legendPink:before { - background-color: #e83e8c; +.legend-square#wong_darkblue:before { + background-color: #0072B2; } - -.chartLegendSquare#legendRed:before { - background-color: #dc3545; +.legend-square#wong_lightblue:before { + background-color: #56B4E9; } - -.chartLegendSquare#legendOrange:before { - background-color: #fd7e14; +/* ibm */ +.legend-square#ibm_ultramarine:before { + background-color: #648fff; } - -.chartLegendSquare#legendYellow:before { - background-color: #ffc107; +.legend-square#ibm_indigo:before { + background-color: #785ef0; } - -.chartLegendSquare#legendGreen:before { - background-color: #28a745; +.legend-square#ibm_magenta:before { + background-color: #dc267f; } - -.chartLegendSquare#legendTeal:before { - background-color: #20c997; +.legend-square#ibm_orange:before { + background-color: #fe6100; +} +.legend-square#ibm_gold:before { + background-color: #ffb000; +} +/* legacy */ +.legend-square#legendBlack:before { + background-color: #000; +} +.legend-square#legendBlue:before { + background-color: #007bff; } +/* texto da legenda */ .legenda { text-align: center; margin: 0 .5rem; color: #6c757d; } +/* inline text color */ +/* wong */ +.wong_black { + color: #000; +} +.wong_orange { + color: #e69f00; +} +.wong_yellow { + color: #F0E442; +} +.wong_red { + color: #D55E00; +} +.wong_pink { + color: #CC79A7; +} +.wong_green { + color: #009E73; +} +.wong_darkblue { + color: #0072B2; +} +.wong_lightblue { + color: #56B4E9; +} +/* ibm */ +.ibm_ultramarine { + color: #648fff; +} +.ibm_indigo { + color: #785ef0; +} +.ibm_magenta { + color: #dc267f; +} +.ibm_orange { + color: #fe6100; +} +.ibm_gold { + color: #ffb000; +} +.ibm_gold_dark { + color: #BC8538; +} +/* legacy */ +.legendBlack { + color: #000; +} +.legendGrey { + color: #6c757d; +} +.legendBlue { + color: #007bff; +} + /* GLOBAL: CHARTS */ #htmlwidget_container { position: static!important; @@ -589,6 +650,13 @@ iframe { height: 350px; } +@media (max-width: 575.98px) { +.chart-fix { + padding: 1.25rem 0 !important; + margin: 0.5rem -0.25rem !important; +} +} + /* GLOBAL: TOAST MESSAGES */ .toast-wrap { width:100%; diff --git a/index.html b/index.html index f9ea3d9e519..820d5026f1c 100644 --- a/index.html +++ b/index.html @@ -7,14 +7,14 @@ - Observatório COVID-19 BR + Observatório Covid-19 BR - + @@ -27,14 +27,14 @@ - + - + diff --git a/informacoes.html b/informacoes.html index 0cf7454ac4f..e2d42fb09c7 100644 --- a/informacoes.html +++ b/informacoes.html @@ -6,8 +6,8 @@ - Informações · Observatório COVID-19 BR + content="O Observatório Covid-19 BR é uma iniciativa independente com o desejo de disseminar informações de qualidade sobre o coronavírus, baseada em dados científicos atualizados."> + Informações · Observatório Covid-19 BR - + @@ -29,14 +29,14 @@ - + - + diff --git a/leitos.html b/leitos.html index e2f9b76d2e7..124d7987305 100644 --- a/leitos.html +++ b/leitos.html @@ -6,15 +6,15 @@ - Leitos · Observatório COVID-19 BR + content="O Observatório Covid-19 BR é uma iniciativa independente com o desejo de disseminar informações de qualidade sobre o coronavírus, baseada em dados científicos atualizados."> + Leitos · Observatório Covid-19 BR - + @@ -27,14 +27,14 @@ - + - + diff --git a/midia.html b/midia.html index 8436acc5481..270a635d6bd 100644 --- a/midia.html +++ b/midia.html @@ -6,15 +6,15 @@ - Reportagens · Observatório COVID-19 BR + content="O Observatório Covid-19 BR é uma iniciativa independente com o desejo de disseminar informações de qualidade sobre o coronavírus, baseada em dados científicos atualizados."> + Reportagens · Observatório Covid-19 BR - + @@ -27,14 +27,14 @@ - + - + diff --git a/municipios.html b/municipios.html index ea8878dc5b3..37a3c269823 100644 --- a/municipios.html +++ b/municipios.html @@ -6,15 +6,15 @@ - Municípios · Observatório COVID-19 BR + content="O Observatório Covid-19 BR é uma iniciativa independente com o desejo de disseminar informações de qualidade sobre o coronavírus, baseada em dados científicos atualizados."> + Municípios · Observatório Covid-19 BR - + @@ -27,14 +27,14 @@ - + - + @@ -289,7 +289,7 @@
Casos graves de COVID-19 em -
+
Velocidade de propagação em -
+
Taxa de infecção em
-
+
Sobre os dados no município de <
- +
diff --git a/perguntas.html b/perguntas.html index 53cf60ef96b..a868006076b 100644 --- a/perguntas.html +++ b/perguntas.html @@ -6,15 +6,15 @@ - Perguntas · Observatório COVID-19 BR + content="O Observatório Covid-19 BR é uma iniciativa independente com o desejo de disseminar informações de qualidade sobre o coronavírus, baseada em dados científicos atualizados."> + Perguntas · Observatório Covid-19 BR - + @@ -27,14 +27,14 @@ - + - + diff --git a/progressao.html b/progressao.html index 8da19cd21c9..34393d3747d 100644 --- a/progressao.html +++ b/progressao.html @@ -6,15 +6,15 @@ - Avanço · Observatório COVID-19 BR + content="O Observatório Covid-19 BR é uma iniciativa independente com o desejo de disseminar informações de qualidade sobre o coronavírus, baseada em dados científicos atualizados."> + Avanço · Observatório Covid-19 BR - + @@ -27,14 +27,14 @@ - + - + @@ -157,7 +157,7 @@

Brasil

-
+
@@ -169,9 +169,9 @@

Brasil

-
- Casos Confirmados - Previsão +
+ Casos Confirmados + Previsão
@@ -193,7 +193,7 @@
Avanço da doença

- Pontos pretos indicam o número de casos confirmados notificados + Pontos pretos indicam o número de casos confirmados notificados por dia.

@@ -204,9 +204,9 @@
Avanço da doença

- Pontos em azul são a previsão para os próximos 5 dias (entre + Pontos em azul são a previsão para os próximos 5 dias (entre e casos em ), se a taxa de - crescimento continuar a mesma dos últimos 5 dias. Em cinza é o intervalo de confiança dessa previsão. + crescimento continuar a mesma dos últimos 5 dias. Em cinza é o intervalo de confiança dessa previsão.

@@ -224,7 +224,7 @@
Avanço da doença

Porque quando o crescimento é exponencial as incertezas também crescem exponencialmente. Por isso a região - cinza, que expressa a incerteza da previsão, aumenta de largura com o tempo. + cinza, que expressa a incerteza da previsão, aumenta de largura com o tempo. E mesmo pequenas mudanças na taxa que aconteçam hoje ou amanhã vão causar enormes variações no futuro.

diff --git a/sobre.html b/sobre.html index 78603161a92..1fb481567dc 100644 --- a/sobre.html +++ b/sobre.html @@ -6,15 +6,15 @@ - Sobre · Observatório COVID-19 BR + content="O Observatório Covid-19 BR é uma iniciativa independente com o desejo de disseminar informações de qualidade sobre o coronavírus, baseada em dados científicos atualizados."> + Sobre · Observatório Covid-19 BR - + @@ -28,14 +28,14 @@ - + - +