Skip to content

Commit

Permalink
[site] melhorias na apresentação dos dados
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@badain
badain committed May 7, 2020
1 parent 0f0fc04 commit 85ef96e
Show file tree
Hide file tree
Showing 9 changed files with 170 additions and 102 deletions.
170 changes: 119 additions & 51 deletions css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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%;
Expand Down
8 changes: 4 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
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.">
<title>Observatório COVID-19 BR</title>
<title>Observatório Covid-19 BR</title>

<!-- Bootstrap CSS via BootstrapCDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
<!-- Poppins Font -->
<link href="./css/custom.css?ver=1.68" rel="stylesheet">
<link href="./css/custom.css?ver=1.69" rel="stylesheet">

<!-- Favicons -->
<link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">
Expand All @@ -27,14 +27,14 @@

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Observatório COVID-19 BR">
<meta name="twitter:title" content="Observatório Covid-19 BR">
<meta name="twitter:description"
content="Grupo de cientistas brasileiros com um objetivo: espalhar ciência e conter o vírus!">
<meta name="twitter:image" content="https://covid19br.github.io/img/favicons/observatorio-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://covid19br.github.io">
<meta property="og:title" content="Observatório COVID-19 BR">
<meta property="og:title" content="Observatório Covid-19 BR">
<meta property="og:description"
content="Grupo de cientistas brasileiros com um objetivo: espalhar ciência e conter o vírus!">
<meta property="og:type" content="website">
Expand Down
10 changes: 5 additions & 5 deletions informacoes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
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.">
<title>Informações · Observatório COVID-19 BR</title>
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.">
<title>Informações · Observatório Covid-19 BR</title>

<!-- Bootstrap CSS via BootstrapCDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"
Expand All @@ -16,7 +16,7 @@
<link rel="stylesheet" href="./css/toc.css?ver=1.15" />
<!-- Poppins Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
<link href="./css/custom.css?ver=1.68" rel="stylesheet">
<link href="./css/custom.css?ver=1.69" rel="stylesheet">

<!-- Favicons -->
<link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">
Expand All @@ -29,14 +29,14 @@

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Observatório COVID-19 BR">
<meta name="twitter:title" content="Observatório Covid-19 BR">
<meta name="twitter:description"
content="Grupo de cientistas brasileiros com um objetivo: espalhar ciência e conter o vírus!">
<meta name="twitter:image" content="https://covid19br.github.io/img/favicons/observatorio-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://covid19br.github.io">
<meta property="og:title" content="Observatório COVID-19 BR">
<meta property="og:title" content="Observatório Covid-19 BR">
<meta property="og:description"
content="Grupo de cientistas brasileiros com um objetivo: espalhar ciência e conter o vírus!">
<meta property="og:type" content="website">
Expand Down
10 changes: 5 additions & 5 deletions leitos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
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.">
<title>Leitos · Observatório COVID-19 BR</title>
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.">
<title>Leitos · Observatório Covid-19 BR</title>

<!-- Bootstrap CSS via BootstrapCDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
<!-- Poppins Font -->
<link href="./css/custom.css?ver=1.68" rel="stylesheet">
<link href="./css/custom.css?ver=1.69" rel="stylesheet">

<!-- Favicons -->
<link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">
Expand All @@ -27,14 +27,14 @@

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Observatório COVID-19 BR">
<meta name="twitter:title" content="Observatório Covid-19 BR">
<meta name="twitter:description"
content="Grupo de cientistas brasileiros com um objetivo: espalhar ciência e conter o vírus!">
<meta name="twitter:image" content="https://covid19br.github.io/img/favicons/observatorio-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://covid19br.github.io">
<meta property="og:title" content="Observatório COVID-19 BR">
<meta property="og:title" content="Observatório Covid-19 BR">
<meta property="og:description"
content="Grupo de cientistas brasileiros com um objetivo: espalhar ciência e conter o vírus!">
<meta property="og:type" content="website">
Expand Down
10 changes: 5 additions & 5 deletions midia.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description"
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.">
<title>Reportagens · Observatório COVID-19 BR</title>
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.">
<title>Reportagens · Observatório Covid-19 BR</title>

<!-- Bootstrap CSS via BootstrapCDN -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
<!-- Poppins Font -->
<link href="./css/custom.css?ver=1.68" rel="stylesheet">
<link href="./css/custom.css?ver=1.69" rel="stylesheet">

<!-- Favicons -->
<link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">
Expand All @@ -27,14 +27,14 @@

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Observatório COVID-19 BR">
<meta name="twitter:title" content="Observatório Covid-19 BR">
<meta name="twitter:description"
content="Grupo de cientistas brasileiros com um objetivo: espalhar ciência e conter o vírus!">
<meta name="twitter:image" content="https://covid19br.github.io/img/favicons/observatorio-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://covid19br.github.io">
<meta property="og:title" content="Observatório COVID-19 BR">
<meta property="og:title" content="Observatório Covid-19 BR">
<meta property="og:description"
content="Grupo de cientistas brasileiros com um objetivo: espalhar ciência e conter o vírus!">
<meta property="og:type" content="website">
Expand Down
Loading

1 comment on commit 85ef96e

@badain
Copy link
Collaborator Author

@badain badain commented on 85ef96e May 7, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(#25)

Please sign in to comment.