add mobile tabs and rework css classes

app/static/css/header.css

@@ -98,6 +98,11 @@ header {
     border: 0px !important;
 }
 
+.autocomplete-mobile{
+    display: -webkit-box;
+    width: 100%;
+}
+
 .desktop-header-logo {
     height: 1.65em;
 }
@@ -107,81 +112,93 @@ header {
     flex: 1
 }
 
-.desktop-tab-div {
-    border-radius: 0 0 8px 8px;
-    box-shadow: 0 2px 3px rgba(32, 33, 36, 0.18);
-    margin-bottom: 10px;
-    overflow: hidden;
-}
-
-.desktop-tab-div-2 {
-    border-top: 1px solid #dadce0;
-    height: 39px;
-    overflow: hidden;
-}
-
-.desktop-tab-div-3 {
-    height: 51px;
-    overflow-scrolling: touch;
-    overflow-x: auto;
-    overflow-y: hidden;
-}
-
-.header {
-    height: 39px;
-    display: box;
-    display: flex;
-    display: flex;
-    width: 100%;
-}
-
-.desktop-header-tab {
-    box-pack: justify;
-    font-size: 12px;
-    line-height: 37px;
-    justify-content: space-between;
-    justify-content: space-between;
-}
-
-span.desktop-tab-span {
-    border-bottom: 2px solid #4285f4;
-    color: #4285f4;
-    font-weight: bold;
-}
-
-.desktop-header-tab a, .desktop-header-tab span {
-    color: #70757a;
-    display: block;
-    flex: none;
-    padding: 0 16px;
-    text-align: center;
-    text-transform: uppercase;
-}
-
-.desktop-header-tab a, .desktop-header-tab span {
-    color: #70757a;
-    display: block;
-    flex: none;
-    padding: 0 16px;
-    text-align: center;
-    text-transform: uppercase;
-}
-
 a {
     color: #1967D2;
     text-decoration: none;
     tap-highlight-color: rgba(0, 0, 0, .10);
 }
 
-.header input {
+.header-tab-div {
+    border-radius: 0 0 8px 8px;
+    box-shadow: 0 2px 3px rgba(32, 33, 36, 0.18);
+    margin-bottom: 10px;
+    overflow: hidden;
+}
+
+.header-tab-div-2 {
+    border-top: 1px solid #dadce0;
+    height: 39px;
+    overflow: hidden;
+}
+
+.header-tab-div-3 {
+    height: 51px;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.desktop-header {
+    height: 39px;
+    display: box;
+    display: flex;
+    width: 100%;
+}
+
+.header-tab {
+    box-pack: justify;
+    font-size: 12px;
+    line-height: 37px;
+    justify-content: space-between;
+}
+
+.desktop-header a, .desktop-header span {
+    color: #70757a;
+    display: block;
+    flex: none;
+    padding: 0 16px;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+span.header-tab-span {
+    border-bottom: 2px solid #4285f4;
+    color: #4285f4;
+    font-weight: bold;
+}
+
+.mobile-header {
+    height: 39px;
+    display: box;
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    margin-left: 12px;
+}
+
+.mobile-header a, .mobile-header span {
+    color: #70757a;
+    text-decoration: none;
+    display: inline-block;
+    /* padding: 8px 12px 8px 12px; */
+}
+
+span.mobile-tab-span {
+    border-bottom: 2px solid #202124;
+    color: #202124;
+    height: 26px;
+    /* margin: 0 12px; */
+    /* padding: 0; */
+}
+
+.desktop-header input {
     margin: 2px 4px 2px 8px;
 }
 
-a.desktop-tab-a:visited {
+a.header-tab-a:visited {
     color: #70757a;
 }
 
-.desktop-tab-div-end {
+.header-tab-div-end {
     border-left: 1px solid rgba(0, 0, 0, 0.12);
 }
   

app/templates/header.html

@@ -10,7 +10,7 @@
                     </div>
                 </a>
                 <div class="H0PQec mobile-input-div">
-                    <div class="sbc esbc autocomplete">
+                    <div class="autocomplete-mobile esbc autocomplete">
                         <input
                                 id="search-bar"
                                 class="mobile-search-bar"
@@ -31,6 +31,25 @@
                 </div>
             </form>
         </div>
+      <div>
+        <div class="header-tab-div">
+            <div class="header-tab-div-2">
+                <div class="header-tab-div-3">
+                    <div class="mobile-header header-tab">
+                        {% for tab_id, tab_content in tabs.items() %}
+                            {% if tab_content['selected'] %}
+                                <span class="mobile-tab-span">{{ tab_content['name'] }}</span>
+                            {% else %}
+                                <a class="header-tab-a" href="{{ tab_content['href'] }}">{{ tab_content['name'] }}</a>
+                            {% endif %}
+                        {% endfor %}
+                        <div class="header-tab-div-end"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="" id="s">
+      </div>
     </header>
 {% else %}
     <header>
@@ -68,18 +87,18 @@
         </div>
     </header>
     <div>
-      <div class="desktop-tab-div">
+      <div class="header-tab-div">
-          <div class="desktop-tab-div-2">
+          <div class="header-tab-div-2">
-              <div class="desktop-tab-div-3">
+              <div class="header-tab-div-3">
-                  <div class="header desktop-header-tab">
+                  <div class="desktop-header header-tab">
                       {% for tab_id, tab_content in tabs.items() %}
                           {% if tab_content['selected'] %}
-                              <span class="desktop-tab-span">{{ tab_content['name'] }}</span>
+                              <span class="header-tab-span">{{ tab_content['name'] }}</span>
                           {% else %}
-                              <a class="desktop-tab-a" href="{{ tab_content['href'] }}">{{ tab_content['name'] }}</a>
+                              <a class="header-tab-a" href="{{ tab_content['href'] }}">{{ tab_content['name'] }}</a>
                           {% endif %}
                       {% endfor %}
-                      <div class="desktop-tab-div-end"></div>
+                      <div class="header-tab-div-end"></div>
                   </div>
               </div>
           </div>