melhorias de design (#25)

melhora a navegação mobile do site
covid19br · Apr 28, 2020 · cfa4f66 · cfa4f66
1 parent f197e97
commit cfa4f66
Show file tree

Hide file tree

Showing 11 changed files with 209 additions and 154 deletions.
diff --git a/css/custom.css b/css/custom.css
@@ -17,7 +17,7 @@ body {
     z-index: 1020;
 }
 
-/* TYPE */ 
+/* NAVBAR: TYPE */ 
 #navbarDropdown {
     font-family: 'Poppins', sans-serif;
     font-size: .9rem;
@@ -31,17 +31,17 @@ body {
     text-align: center;
 }
 
-/* TYPE: MENU RESTING */
+/* NAVBAR: MENU RESTING */
 .navbar-light .navbar-nav .nav-link {
     color: rgba(0,0,0,.7);
 }
 
-/* TYPE: MENU FOCUS */
+/* NAVBAR: MENU FOCUS */
 .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
     color: rgba(0,0,0,.9);
 }
 
-/* TYPE: MENU ACTIVE */
+/* NAVBAR: MENU ACTIVE */
 .destaque {
     color: #007bff;
     font-size: .9rem;
@@ -85,7 +85,7 @@ body {
 }
 
 .navbar-brand {
-    margin-right: auto!important; /*Fixes logo on the rigth*/
+    margin-right: auto!important; /*Fixes logo on the right*/
 }
 
 .navbar-light .navbar-toggler {
@@ -96,7 +96,7 @@ body {
     .navbar-logo {
         height: 33px!important;
     }
-    .nav-link {
+    .destaque {
         padding: .5rem 0.25rem!important;
     }
 }
@@ -119,16 +119,23 @@ body {
     }
 }
 
-/* PAGE TITLE & UPDATE DATE */
+/* GLOBAL: PAGE TITLE & UPDATE DATE */
 .main-title {
-    margin-left: 1.3rem;
+    margin-left: 0.2rem;
+}
+
+@media (min-width: 576px) { 
+    .main-title {
+        margin-left: 1.3rem;
+    }
 }
 .display {
     font-size: 3rem;
     font-weight: 300;
     line-height: 1.2;
     display: inline-block;
 }
+
 /* Extra small devices (portrait phones, less than 576px) */
 @media (max-width: 767.98px) {
     .display {
@@ -163,7 +170,7 @@ body {
 
 /* BUTTON */
 .btn {
-    margin-top: .25rem;
+    margin-top: .5rem;
 }
 
 /* CARDS */
@@ -179,6 +186,15 @@ body {
     margin: 1rem!important;
 }
 
+@media (max-width: 767.98px){
+    .card-columns {
+        margin: 1rem .5rem!important;
+    }
+    .card {
+        padding: 1.25rem 1rem;
+    }
+}
+
 @media (min-width: 1200px) {
     .one {
         column-count: 1!important;
@@ -228,6 +244,14 @@ body {
         padding-left: 0;
     }
 }
+@media (max-width: 767.98px) {
+    .three-one {
+        margin: 1rem!important;
+    }
+    .four-one {
+        margin: 1rem!important;
+    }
+}
 
 /* TOC: Auto margin for pages w/ toc */
 @media (max-width: 1199.98px) {
@@ -246,11 +270,11 @@ a.text-reset:hover {
 }
 .card.menu:hover {
     border-color: #007bff!important;
-    background-color: #f9f9f9;
+    background-color: #fdfdfd;
     transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 }
 .card.selected {
-    border-color: #007bff!important;
+    border-color: #7abaff!important;
 }
 .card-body {
     padding: 0!important;
@@ -331,6 +355,21 @@ a.text-reset:hover {
     }
 }
 
+/* CARD HERO */
+.card-hero {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: start;
+    align-items: center;
+}
+
+/* CARD TYPE */
+.text-justify {
+    margin-top: 1rem;
+    margin-bottom: 0;
+}
+
+/* BADGES */
 .badge-gray {
     color: #fff;
     background-color: #6c757d;
@@ -340,6 +379,8 @@ a.text-reset:hover {
     color: #fff;
     background-color: #6610f2;
 }
+
+/* CHART LEGEND */
 .card-chartLegend {
     display: -ms-flexbox!important;
     display: flex!important;

diff --git a/css/toc.css b/css/toc.css
@@ -71,10 +71,16 @@
   }
 
   .toc-title {
-    margin: 1rem 0 0 1.42rem;
+    margin: 1rem 0 0 .28rem;
     color: #212529;
   }
 
+  @media (min-width: 576px) {
+    .toc-title {
+      margin: 1rem 0 0 1.42rem;
+    }
+  }
+
   h5{ padding-top: 100px!important; margin-top: -100px!important; }
   h6{ padding-top: 100px!important; margin-top: -100px!important; }
 
@@ -85,6 +91,7 @@
   @media (max-width: 767.98px) {
     .return {
       display: inline;
+      margin: 0 0 0 .3rem;
     }
     .card-title {
         display: inline;

diff --git a/img/icon_arrow_up.svg b/img/icon_arrow_up.svg
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
     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.4" rel="stylesheet">
+  <link href="./css/custom.css?ver=1.5" rel="stylesheet">
 
   <!-- Favicons -->
   <link rel="apple-touch-icon" href="https://covid19br.github.io/img/favicons/apple-touch-icon.png" sizes="180x180">
@@ -66,7 +66,7 @@
     <!-- DESTAQUE -->
     <div class="nav-item destaque" data-toggle="collapse" data-target="#navbarSupportedContent"
       aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <a class="nav-link" href="#">
+      <a href="#">
         Visão Geral
       </a>
     </div>
@@ -120,7 +120,8 @@ <h1 class="display" id="page-title">Visão Geral</h1><small class="page-title-up
     <!-- NEW.CARD -->
 
     <!-- PERGUNTAS.CARD -->
-    <div class="card">
+    <a href="./perguntas.html" class="text-reset">
+    <div class="card menu">
       <div class="card-body">
 
         <!-- CARD.HEADER -->
@@ -129,72 +130,53 @@ <h1 class="display" id="page-title">Visão Geral</h1><small class="page-title-up
             class="card-icon">
           <!-- CARD.TITLE.ICON -->
           <div class="media-body">
-            <a href="./perguntas.html" class="text-reset">
-              <h5 class="card-title">Perguntas</h5> <!-- CARD.TITLE.TEXT -->
-            </a>
+            <h5 class="card-title">Perguntas</h5> <!-- CARD.TITLE.TEXT -->
             <p class="card-text">Respostas da nossa equipe para algumas das principais perguntas sobre COVID-19</p>
             <!-- CARD.TITLE.DESCRIPTION -->
           </div>
         </div>
-
-        <!-- CARD.BUTTON -->
-        <a href="./perguntas.html"><button class="btn btn-primary mt-3" type="button">
-            Veja dúvidas frequentes
-          </button></a>
       </div>
     </div>
+    </a>
 
     <!-- NEW.CARD -->
 
     <!-- DETALHADA.CARD -->
-    <div class="card">
+    <a href="./progressao.html#br" class="text-reset">
+    <div class="card menu">
       <div class="card-body">
         <!-- CARD.HEADER -->
         <div class="media">
           <img src="./img/icon_graph.svg" width=48px alt="Ícone que representa um gráfico" class="card-icon">
           <!-- CARD.TITLE.ICON -->
           <div class="media-body">
-            <a href="./progressao.html#br" class="text-reset">
-              <h5 class="card-title">Visão Detalhada</h5> <!-- CARD.TITLE.TEXT -->
-            </a>
+            <h5 class="card-title">Visão Detalhada</h5> <!-- CARD.TITLE.TEXT -->
             <p class="card-text">Investigue as análises do Observatório em detalhes e filtre os dados por estados do
               Brasil</p> <!-- CARD.TITLE.DESCRIPTION -->
           </div>
         </div>
-
-        <!-- CARD.BUTTON -->
-        <a href="./progressao.html#br"><button class="btn btn-primary mt-3" type="button">
-            Confira os dados estaduais
-          </button></a>
-
       </div>
     </div>
-
+    </a>
     <!-- NEW.CARD -->
 
     <!-- MIDIA.CARD -->
-    <div class="card">
+    <a href="./midia.html" class="text-reset">
+    <div class="card menu">
       <div class="card-body">
         <!-- CARD.HEADER -->
         <div class="media">
           <img src="./img/icon_news.svg" width=48px alt="Ícone que representa um gráfico" class="card-icon">
           <!-- CARD.TITLE.ICON -->
           <div class="media-body">
-            <a href="./midia.html" class="text-reset">
-              <h5 class="card-title">Análise do Noticiário</h5> <!-- CARD.TITLE.TEXT -->
-            </a>
+            <h5 class="card-title">Análise do Noticiário</h5> <!-- CARD.TITLE.TEXT -->
             <p class="card-text">Confira as aparições do Observatório na mídia e nossas análises diárias dos notíciarios
               no Brasil</p> <!-- CARD.TITLE.DESCRIPTION -->
           </div>
         </div>
-
-        <!-- CARD.BUTTON -->
-        <a href="./midia.html"><button class="btn btn-primary mt-3" type="button">
-            Clique para ler
-          </button></a>
-
       </div>
     </div>
+    </a>
 
   </div>
 
@@ -276,7 +258,10 @@ <h5 class="card-title">Dinâmicas de contágio 2</h5> <!-- CARD.TITLE.TEXT -->
         <p class="text-justify">
           Neste relatório, associamos dados da rede de fluxos rodoviários e da demografia das microrregiões paulistas
           com os casos confirmados de COVID-19 atualizados em 04/04/2020 para gerar informações estratégicas sobre a
-          propagação geográfica da pandemia de SARS-CoV-2 no Estado de São Paulo. Identificamos microrregiões que podem
+          propagação geográfica da pandemia de SARS-CoV-2 no Estado de São Paulo.
+        </p>
+        <p class="text-justify">
+          Identificamos microrregiões que podem
           atuar como núcleos propagadores da epidemia ou que têm alta vulnerabilidade a receber pessoas infectadas.
           Desta forma, atualizamos a identificação das microrregiões mais vulneráveis à propagação geográfica da
           pandemia do novo coronavírus (SARS-CoV-2) no estado de SP.
@@ -303,7 +288,7 @@ <h5 class="card-title">Dinâmicas de contágio 2</h5> <!-- CARD.TITLE.TEXT -->
         <div class="media">
           <img src="./img/icon_virus.svg" width=48px alt="Desenho do coronavírus" class="card-icon">
           <!-- CARD.TITLE.ICON -->
-          <div class="media-body">
+          <div class="media-body mb-2">
             <a href="./progressao.html#br" class="text-reset"> 
               <h5 class="card-title">Avanço da doença</h5> <!-- CARD.TITLE.TEXT -->
             </a>
@@ -312,9 +297,6 @@ <h5 class="card-title">Avanço da doença</h5> <!-- CARD.TITLE.TEXT -->
           </div>
         </div>
 
-        <!-- CARD.DATE -->
-        <p class="card-date"><small class="updateDate">Última atualização: </small></p>
-
         <!-- CARD.GGPLOT -->
         <a href="./progressao.html#br">
           <img src=./web/plot.forecast.exp.br.svg class="placeholder_svg" width="100%">