From 091bd1bdc224f5bf12f2592237f817905e0e58d0 Mon Sep 17 00:00:00 2001
From: Luis Aleixo <luis.aleixo@cern.ch>
Date: Thu, 16 Dec 2021 11:37:11 +0100
Subject: [PATCH] Remove ExpertApp from mobile and tablet screen sizes

---
 cara/apps/static/css/style.css     | 30 +++++++++++++++---------------
 cara/apps/templates/index.html.j2  |  7 +++----
 cara/apps/templates/layout.html.j2 | 26 ++++++++++++++++----------
 3 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/cara/apps/static/css/style.css b/cara/apps/static/css/style.css
index 7e701ebc..022b4ca6 100644
--- a/cara/apps/static/css/style.css
+++ b/cara/apps/static/css/style.css
@@ -234,6 +234,10 @@ footer img {
     width: 25%;
   }
 
+  #mobile_calculator_option {
+    display: none;
+  }
+
   #nat_vent_image {
     height: 15em;
   }
@@ -246,7 +250,7 @@ footer img {
     height: 6em;
     margin: 1%;
   }
-  #mobile-app-buttons {
+  #calculator_app_button {
     display: none!important;
   }
   .feedback {
@@ -286,6 +290,9 @@ footer img {
   .nav-link {
     padding: .5rem .5rem!important;
   }
+  #apps_dropdown {
+    display: none;
+  }
   #report_version {
     font-size: .5rem;
   }
@@ -302,13 +309,6 @@ footer img {
   #mobile_link {
     display: inline!important;
   }
-  #desktop_logo {
-    display: none!important;
-  }
-  
-  #mobile_logo {
-    display: block!important;
-  }
   .feedback {
     float:right; 
     font-size:.75rem; 
@@ -328,16 +328,16 @@ footer img {
 
 } */
 
-/* Large (lg) devices (desktops, 992px and up) */
-@media (max-width: 992px) { 
-  #download-pdf {
+/* Large (lg) devices (tablets) */
+@media (max-width: 64em) { 
+  .expert_app_button {
     display: none;
   }
-  #link_reproduce_results {
-    display: none;
+  #desktop_logo {
+    display: none!important;
   }
-  #mobile_link {
-    display: inline!important;
+  #mobile_logo {
+    display: block!important;
   }
 }
 
diff --git a/cara/apps/templates/index.html.j2 b/cara/apps/templates/index.html.j2
index 30ed7f07..f589e476 100644
--- a/cara/apps/templates/index.html.j2
+++ b/cara/apps/templates/index.html.j2
@@ -11,12 +11,11 @@
 </header>
    
 <div class="container container--padding">
-  <div class="d-flex flex-row mb-3 justify-content-around" id="mobile-app-buttons">
+  <div class="d-flex mb-3 justify-content-center" id="calculator_app_button">
     <div><a href="{{ calculator_prefix }}" role="button" class="btn btn-outline-primary"><div class="d-flex d-row"><i class="icon-calculator"></i><span class="pl-1">Calculator</div></a></div>
-    <div><a href="https://cara.web.cern.ch/expert-app" role="button" class="btn btn-outline-secondary"><div class="d-flex d-row"><i class="icon-expert"></i><span class="pl-1">Expert (beta)</div></a></div>
   </div>
   <div class="split">
-    <div class="col-sm-8 pl-0">
+    <div class="col-lg-8 col-md-7 pl-0">
       <h2 class="paragraph-title">Introduction</h2><br>
       <div>
           <p>
@@ -43,7 +42,7 @@
       <br>
       <div class="pr-3"><a href="{{ calculator_prefix }}" role="button" class="btn btn-lg btn-outline-primary"><div class="d-flex d-row"><i class="icon-calculator"></i><span class="pl-2">Calculator</div></a></div>
       <br>
-      <div><a href="https://cara.web.cern.ch/expert-app" role="button" class="btn btn-lg btn-outline-secondary"><div class="d-flex d-row"><i class="icon-expert"></i><span class="pl-2">Expert (beta)</div></a></div>
+      <div class="expert_app_button"><a href="https://cara.web.cern.ch/expert-app" role="button" class="btn btn-lg btn-outline-secondary"><div class="d-flex d-row"><i class="icon-expert"></i><span class="pl-2">Expert (beta)</div></a></div>
     </div>
     <hr width="95%">
   </div>
diff --git a/cara/apps/templates/layout.html.j2 b/cara/apps/templates/layout.html.j2
index 15020daa..d9559be3 100644
--- a/cara/apps/templates/layout.html.j2
+++ b/cara/apps/templates/layout.html.j2
@@ -35,16 +35,22 @@
       <div class="collapse navbar-collapse" id="navbarResponsive">
         <ul class="navbar-nav ml-auto">
           <li class="nav-link"><a href="/" class="{{ "header-navbar nav-link active" if "home/" == active_page else "header-navbar nav-link" }}">HOME</a></li>
-          <li class="nav-item dropdown p-2">
-            <a class="nav-link dropdown-toggle {{ "header-navbar nav-link active" if "calculator/" in active_page else "header-navbar nav-link" }}" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              APPS
-            </a>
-            <ul class="dropdown-menu dropwown-navbar-colors" style="min-width: 14rem;" aria-labelledby="navbarDropdown">
-              <li><a href="{{ calculator_prefix }}" class="{{ "header-navbar nav-link active" if "calculator/" == active_page else "header-navbar nav-link" }}">CARA CALCULATOR</a></li>
-              <li><a href="{{ calculator_prefix }}/user-guide" style="margin-left: 4rem" class="{{ "header-navbar nav-link active" if "user-guide" in active_page else "header-navbar nav-link" }}">USER GUIDE</a></li>
-              <li><a href="/expert-app" class="{{ "header-navbar nav-link active" if "/expert-app" == active_page else "header-navbar nav-link" }}">EXPERT APP (BETA)</a></li>
-            </ul>
-          </li>
+          <div id="apps_dropdown">
+            <li class="nav-item dropdown p-2">
+              <a class="nav-link dropdown-toggle {{ "header-navbar nav-link active" if "calculator/" in active_page else "header-navbar nav-link" }}" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                APPS
+              </a>
+              <ul class="dropdown-menu dropwown-navbar-colors" style="min-width: 14rem;" aria-labelledby="navbarDropdown">
+                <li><a href="{{ calculator_prefix }}" class="{{ "header-navbar nav-link active" if "calculator/" == active_page else "header-navbar nav-link" }}">CARA CALCULATOR</a></li>
+                <li><a href="{{ calculator_prefix }}/user-guide" style="margin-left: 4rem" class="{{ "header-navbar nav-link active" if "user-guide" in active_page else "header-navbar nav-link" }}">USER GUIDE</a></li>
+                <li class="expert_app_button"><a href="/expert-app" class="{{ "header-navbar nav-link active" if "/expert-app" == active_page else "header-navbar nav-link" }}">EXPERT APP (BETA)</a></li>
+              </ul>
+            </li>
+          </div>
+          <div id="mobile_calculator_option">
+            <li class="nav-link"><a href="{{ calculator_prefix }}" class="{{ "header-navbar nav-link active" if "calculator/" == active_page else "header-navbar nav-link" }}">CARA CALCULATOR</a></li>
+            <li class="nav-link"><a href="{{ calculator_prefix }}/user-guide" class="{{ "header-navbar nav-link active" if "user-guide" in active_page else "header-navbar nav-link" }}">USER GUIDE</a></li>
+          </div>
           <li class="nav-link"><a href="https://hse.cern/covid-19-information" class="header-navbar nav-link">COVID INFORMATION</a></li>
           <li class="nav-link"><a href="/about" class="{{ "header-navbar nav-link active" if "about" == active_page else "header-navbar nav-link" }}">ABOUT</a></li>
             {% if user.is_authenticated() %}