Add an "advanced search" toggle in result tabs

Adds a new advanced search icon alongside the result tabs for switching
to a different country from the result page.

This will obviously get populated with other methods of filtering
results, but for now it's just the country selector.

app/static/css/header.css

@@ -14,7 +14,7 @@ header {
 }
 
 .result-config {
-    margin: 10px 0 10px 0;
+    margin-bottom: 10px;
     padding: 10px;
     border-radius: 8px;
 }
@@ -128,6 +128,7 @@ a {
     border-radius: 0 0 8px 8px;
     box-shadow: 0 2px 3px rgba(32, 33, 36, 0.18);
     overflow: hidden;
+    margin-bottom: 10px;
 }
 
 .header-tab-div-2 {
@@ -207,6 +208,24 @@ a.header-tab-a:visited {
     border-left: 1px solid rgba(0, 0, 0, 0.12);
 }
 
+.adv-search {
+    font-size: 30px;
+}
+
+.adv-search:hover {
+    cursor: pointer;
+}
+
+#adv-search-toggle {
+    display: none;
+}
+
+.result-collapsible {
+    max-height: 0px;
+    overflow: hidden;
+    transition: max-height .25s linear;
+}
+
 .search-bar-input {
     display: block;
     font-size: 16px;
@@ -220,9 +239,12 @@ a.header-tab-a:visited {
     overflow: hidden;
 }
 
+#result-country {
+    max-width: 200px;
+}
+
 @media (max-width: 801px) {
     .header-tab-div {
         margin-bottom: 10px !important
     }
 }
-

app/static/js/header.js

@@ -1,4 +1,6 @@
 document.addEventListener("DOMContentLoaded", () => {
+    const advSearchToggle = document.getElementById("adv-search-toggle");
+    const advSearchDiv = document.getElementById("adv-search-div");
     const searchBar = document.getElementById("search-bar");
     const countrySelect = document.getElementById("result-country");
     const arrowKeys = [37, 38, 39, 40];
@@ -9,11 +11,25 @@ document.addEventListener("DOMContentLoaded", () => {
         n = str.lastIndexOf("/search");
         if (n > 0) {
             str = str.substring(0, n) +
-                `search?q=${searchBar.value}&country=${countrySelect.value}`;
+                `/search?q=${searchBar.value}&country=${countrySelect.value}`;
             window.location.href = str;
         }
     }
 
+    const toggleAdvancedSearch = on => {
+        if (on) {
+            advSearchDiv.style.maxHeight = "70px";
+        } else {
+            advSearchDiv.style.maxHeight = "0px";
+        }
+        localStorage.advSearchToggled = on;
+    }
+
+    toggleAdvancedSearch(JSON.parse(localStorage.advSearchToggled));
+    advSearchToggle.onclick = () => {
+        toggleAdvancedSearch(advSearchToggle.checked);
+    }
+
     searchBar.addEventListener("keyup", function(event) {
         if (event.keyCode === 13) {
             document.getElementById("search-form").submit();

app/static/settings/header_tabs.json

@@ -28,11 +28,5 @@
       "href": "search?q={query}",
       "name": "News",
       "selected": false
-  },
-  "books": {
-      "tbm": "bks",
-      "href": "search?q={query}",
-      "name": "Books",
-      "selected": false
   }
-}
+}

app/templates/header.html

@@ -44,6 +44,8 @@
                                 <a class="header-tab-a" href="{{ tab_content['href'] }}">{{ tab_content['name'] }}</a>
                             {% endif %}
                         {% endfor %}
+                      <label for="adv-search-toggle" id="adv-search-label" class="adv-search">⚙</label>
+                      <input id="adv-search-toggle" type="checkbox">
                         <div class="header-tab-div-end"></div>
                     </div>
                 </div>
@@ -100,31 +102,34 @@
                               <a class="header-tab-a" href="{{ tab_content['href'] }}">{{ tab_content['name'] }}</a>
                           {% endif %}
                       {% endfor %}
+                      <label for="adv-search-toggle" id="adv-search-label" class="adv-search">⚙</label>
+                      <input id="adv-search-toggle" type="checkbox">
                       <div class="header-tab-div-end"></div>
                   </div>
               </div>
           </div>
       </div>
-
-      <div class="result-config">
-          <label for="config-country">{{ translation['config-country'] }}: </label>
-          <select name="country" id="result-country">
-              {% for country in countries %}
-                  <option value="{{ country.value }}"
-                          {% if (
-                              config.country != '' and config.country in country.value
-                          ) or (
-                              config.country == '' and country.value == '')
-                          %}
-                          selected
-                          {% endif %}>
-                      {{ country.name }}
-                  </option>
-              {% endfor %}
-          </select>
-      </div>
       <div class="" id="s">
   </div>
 {% endif %}
+<div class="result-collapsible" id="adv-search-div">
+    <div class="result-config">
+        <label for="config-country">{{ translation['config-country'] }}: </label>
+        <select name="country" id="result-country">
+            {% for country in countries %}
+                <option value="{{ country.value }}"
+                    {% if (
+                        config.country != '' and config.country in country.value
+                    ) or (
+                        config.country == '' and country.value == '')
+                    %}
+                    selected
+                    {% endif %}>
+                    {{ country.name }}
+                </option>
+            {% endfor %}
+        </select>
+    </div>
+</div>
 
 <script type="text/javascript" src="{{ cb_url('header.js') }}"></script>