From 04acd79cad85c1ee6cfa09f2ed5f74292530dc6f Mon Sep 17 00:00:00 2001 From: Fernando Andrade Date: Sat, 9 May 2020 21:44:18 -0300 Subject: [PATCH 1/5] Altera a estrutura dos links do dashboard Coloca um estrutura de lista e adiciona regras no CSS para deixar todos os links em uma linha no mobile e uma margem abaixo para as tela maiores. --- covid19/templates/dashboard.html | 16 ++++++++++++---- static/css/application.css | 27 +++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 4 deletions(-) diff --git a/covid19/templates/dashboard.html b/covid19/templates/dashboard.html index 4ba9e6c8..4dc812a6 100644 --- a/covid19/templates/dashboard.html +++ b/covid19/templates/dashboard.html @@ -18,22 +18,30 @@

ESPECIAL COVID-19 - Dados por Município

{% include 'covid19-text.html' %} -
- +
  • Sobre o projeto +
    • +
  • Dados completos +
    • +
  • Documentação da API +
    • +
  • Quem está usando - +
    • +
  • Apoie o projeto -
    • + +
    diff --git a/static/css/application.css b/static/css/application.css index 02f5345b..ab2c6c17 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -164,3 +164,30 @@ h1, h2, h3, h4, h5, h6 { strong { font-weight: bold !important; } em { font-style: italic !important; } + + +#dashboard-menu { + margin-bottom: 30px; + overflow: auto; + white-space: nowrap; +} + +#dashboard-menu li { + display: inline-block; + margin: 0 8px; +} + +#dashboard-menu li:first-child { + margin-left: 0; +} + +@media only screen and (min-width: 601px) { + #dashboard-menu { + display: flex; + flex-wrap: wrap; + justify-content: center; + } + #dashboard-menu li { + margin-bottom: 15px; + } +} \ No newline at end of file From e4c6bf7d1c26bdfcc7d8629b16cb48ac3c07441a Mon Sep 17 00:00:00 2001 From: Fernando Andrade Date: Sat, 9 May 2020 23:00:34 -0300 Subject: [PATCH 2/5] =?UTF-8?q?Fix=20sele=C3=A7=C3=A3o=20de=20estados=20qu?= =?UTF-8?q?ebrando?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Altera html para lista de estados e adiciona CSS para correção da visualização no mobile e também no desktop. --- covid19/static/css/covid19-map.css | 31 ++++++++++++++++++++++++++---- covid19/templates/dashboard.html | 6 ++---- 2 files changed, 29 insertions(+), 8 deletions(-) diff --git a/covid19/static/css/covid19-map.css b/covid19/static/css/covid19-map.css index 2896fbac..8cd5d031 100644 --- a/covid19/static/css/covid19-map.css +++ b/covid19/static/css/covid19-map.css @@ -70,11 +70,34 @@ .state-option { font-size: 1em; - padding: 0 1em; + padding: 0 0.75em; } -@media screen and (max-width: 1280px) { + +#dashboard-state-selector nav { + height: auto; + margin: 30px 0 15px 0; +} +#dashboard-state-selector nav ul { + overflow: auto; + display: flex; + flex-direction: row; + flex-wrap: nowrap; +} + +@media screen and (min-width: 601px) { + #dashboard-state-selector nav ul { + flex-wrap: wrap; + } +} + +@media screen and (min-width: 992px) { .state-option { - font-size: 1em; - padding: 0 0.25em; + padding: 0 0.33em; } } + +@media screen and (min-width: 1200px) { + .state-option { + padding: 0 0.537em; + } +} \ No newline at end of file diff --git a/covid19/templates/dashboard.html b/covid19/templates/dashboard.html index 4dc812a6..1b6fb5f6 100644 --- a/covid19/templates/dashboard.html +++ b/covid19/templates/dashboard.html @@ -66,9 +66,8 @@

    ESPECIAL COVID-19 - Dados por Município

    -
    -
    From bf0df3d433a278c55a3f9a925059d498ea5ede53 Mon Sep 17 00:00:00 2001 From: Fernando Andrade Date: Sun, 10 May 2020 00:46:32 -0300 Subject: [PATCH 3/5] Fix tabela cortada e sem scroll horizontal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Altera configurações do DataTable para permiti scroll horizontal e ajusta o CSS para a tabla. --- covid19/static/css/covid19-map.css | 12 ++++++++++++ covid19/static/js/covid19-table.js | 1 + 2 files changed, 13 insertions(+) diff --git a/covid19/static/css/covid19-map.css b/covid19/static/css/covid19-map.css index 8cd5d031..af134b62 100644 --- a/covid19/static/css/covid19-map.css +++ b/covid19/static/css/covid19-map.css @@ -66,6 +66,7 @@ } #table-col { padding: 0 0 0 0; + overflow: auto; } .state-option { @@ -100,4 +101,15 @@ .state-option { padding: 0 0.537em; } +} + +div.dataTables_wrapper { + width: 800px; + margin: 0 auto; +} + +@media only screen and (min-width: 601px) { + div.dataTables_wrapper { + width: auto; + } } \ No newline at end of file diff --git a/covid19/static/js/covid19-table.js b/covid19/static/js/covid19-table.js index 07cc0adc..e1a7925a 100644 --- a/covid19/static/js/covid19-table.js +++ b/covid19/static/js/covid19-table.js @@ -28,6 +28,7 @@ jQuery(document).ready(function() { "autoWidth": false, "columns": columns, "scrollY": "650px", + "scrollX": true, "scrollCollapse": true, "paging": false, "searching": true, From 0ae56af7ff14e2679a90be3b8dc99317dab7759c Mon Sep 17 00:00:00 2001 From: Fernando Andrade Date: Sun, 10 May 2020 00:54:29 -0300 Subject: [PATCH 4/5] Ajuste CSS para permite o scroll da tabela --- covid19/static/css/covid19-map.css | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/covid19/static/css/covid19-map.css b/covid19/static/css/covid19-map.css index af134b62..11b4ea3a 100644 --- a/covid19/static/css/covid19-map.css +++ b/covid19/static/css/covid19-map.css @@ -104,12 +104,6 @@ } div.dataTables_wrapper { - width: 800px; + min-width: 800px; margin: 0 auto; -} - -@media only screen and (min-width: 601px) { - div.dataTables_wrapper { - width: auto; - } } \ No newline at end of file From 7f0c423ef643148d6ffb01c759d3e6eb4823242c Mon Sep 17 00:00:00 2001 From: Fernando Andrade Date: Sun, 10 May 2020 20:53:46 -0300 Subject: [PATCH 5/5] Ajuste CSS para o mapa MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ajuste no CSS para remover o scroll horizontal da página por causa da larguara do mapa. --- covid19/static/css/covid19-map.css | 1 + 1 file changed, 1 insertion(+) diff --git a/covid19/static/css/covid19-map.css b/covid19/static/css/covid19-map.css index 11b4ea3a..8be9484a 100644 --- a/covid19/static/css/covid19-map.css +++ b/covid19/static/css/covid19-map.css @@ -63,6 +63,7 @@ #map-col { padding: 0 2px 0 0; + overflow: auto; } #table-col { padding: 0 0 0 0;