From 34ab697284e9a4cc76bd6f3fb3cd81331a36928b Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Fri, 15 Oct 2021 15:32:44 +0200
Subject: [PATCH] guide and calculator as dropwdown list fixes #203

---
 .../calculator/templates/calculator.form.html.j2   |  4 ----
 cara/apps/static/css/style.css                     | 12 ++++++++++++
 cara/apps/templates/layout.html.j2                 | 14 +++++++++++---
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/cara/apps/calculator/templates/calculator.form.html.j2 b/cara/apps/calculator/templates/calculator.form.html.j2
index 6626dd25..16a34522 100644
--- a/cara/apps/calculator/templates/calculator.form.html.j2
+++ b/cara/apps/calculator/templates/calculator.form.html.j2
@@ -436,10 +436,6 @@ v{{ calculator_version }} <span style="float:right; font-weight:bold">Please sen
 </section>
 
 <div class="center">
-  <button class="btn btn-primary bigButton">
-    <a href="{{ calculator_prefix }}/user-guide" class="{{ "nav-link active" if "user-guide" in active_page else "nav-link" }}">User guide</a>
-  </button>
-  &nbsp;&nbsp;
   <button type='submit' class="btn btn-primary bigButton" id="generate_report">
       Generate report
   </button>
diff --git a/cara/apps/static/css/style.css b/cara/apps/static/css/style.css
index 2b8bb197..e25f90ad 100644
--- a/cara/apps/static/css/style.css
+++ b/cara/apps/static/css/style.css
@@ -35,6 +35,11 @@ body {
   font-size: 1.1rem;
 }
 
+.dropwown-navbar-colors {
+  background: rgb(42, 52, 66); 
+  border-color: rgb(42, 52, 66);
+}
+
 /*============= NAVIGATION =============*/
 
 .navbar-brand img {
@@ -195,6 +200,13 @@ footer img {
   .logo {
     float: left;
   }
+
+  .navbar .nav-item .dropdown-menu{ display: none; }
+  
+  .navbar .nav-item:hover .dropdown-menu{ display: block; }
+  
+  .navbar .nav-item .dropdown-menu{ margin-top:0; }
+
 }
 /* Devices under 768px (md) */
 /* @media (max-width: 767.98px) {
diff --git a/cara/apps/templates/layout.html.j2 b/cara/apps/templates/layout.html.j2
index 131c5497..887ffdee 100644
--- a/cara/apps/templates/layout.html.j2
+++ b/cara/apps/templates/layout.html.j2
@@ -37,10 +37,18 @@
       <div class="collapse navbar-collapse" id="navbarResponsive">
         <ul class="navbar-nav ml-auto">
           <li class="nav-link"><a href="/" class="{{ "nav-link active" if "home/" == active_page else "nav-link" }}">HOME</a></li>
-          <li class="nav-link"><a href="{{ calculator_prefix }}" class="{{ "nav-link active" if "calculator/" == active_page else "nav-link" }}">COVID CALCULATOR</a></li>
-          <li class="nav-link"><a href="/expert-app" class="{{ "nav-link active" if "/expert-app" == active_page else "nav-link" }}">EXPERT APP (BETA)</a></li>
+          <li class="nav-item dropdown pt-2 pl-0">
+            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              COVID CALCULATOR
+            </a>
+            <div class="dropdown-menu dropwown-navbar-colors" aria-labelledby="navbarDropdown">
+              <a href="{{ calculator_prefix }}" class="{{ "nav-link active" if "calculator/" == active_page else "nav-link" }}">COVID CALCULATOR</a>
+              <a href="{{ calculator_prefix }}/user-guide" class="{{ "nav-link active" if "user-guide" in active_page else "nav-link" }}">USER GUIDE</a>
+            </div>
+          </li>
           <li class="nav-link"><a href="https://hse.cern/covid-19-information" class="nav-link">COVID INFORMATION</a></li>
-          <li class="nav-link"><a href="/about" class="{{ "active" if "about" == active_page else "nav-link" }}">ABOUT</a></li>
+          <li class="nav-link"><a href="/expert-app" class="{{ "nav-link active" if "/expert-app" == active_page else "nav-link" }}">EXPERT APP (BETA)</a></li>
+          <li class="nav-link"><a href="/about" class="{{ "nav-link active" if "about" == active_page else "nav-link" }}">ABOUT</a></li>
         </ul>
       </div>
     </div>