[mod] simple theme: build design for details (collapsables)

* set border top and bottom on sidebar collasables
* inrease peading on summary so its easier to click on mobile
* remove margins and add flex wrapper to normalize elements in sidebar

5 files changed, 27 insertions, 24 deletions

diff --git a/searx/templates/simple/elements/apis.html b/searx/templates/simple/elements/apis.html
index c3bc76726..5c7a07110 100644
--- a/searx/templates/simple/elements/apis.html
+++ b/searx/templates/simple/elements/apis.html
@@ -1,24 +1,26 @@
 <div id="apis" role="complementary" aria-labelledby="apis-title">
-  <details>
+  <details class="sidebar-collapsable">
     <summary class="title" id="apis-title">{{ _('Download results') }}</summary>
-    {%- for output_type in search_formats -%}
-      <div class="left">
-        <form method="{{ method or 'POST' }}" action="{{ url_for('search') }}">
-          <input type="hidden" name="q" value="{{ q|e }}">
-          {%- for category in selected_categories -%}
-            <input type="hidden" name="category_{{ category }}" value="1">
-          {%- endfor -%}
-          <input type="hidden" name="pageno" value="{{ pageno }}">
-          <input type="hidden" name="language" value="{{ current_language }}">
-          <input type="hidden" name="time_range" value="{{ time_range }}">
-          <input type="hidden" name="safesearch" value="{{ safesearch }}">
-          <input type="hidden" name="format" value="{{ output_type }}">
-          {%- if timeout_limit -%}
-            <input type="hidden" name="timeout_limit" value="{{ timeout_limit|e }}" >
-          {%- endif -%}
-          <input type="submit" role="link" value="{{ output_type }}">
-        </form>
-      </div>
-    {%- endfor -%}
+    <div class="wrapper">
+      {%- for output_type in search_formats -%}
+        <div class="left">
+          <form method="{{ method or 'POST' }}" action="{{ url_for('search') }}">
+            <input type="hidden" name="q" value="{{ q|e }}">
+            {%- for category in selected_categories -%}
+              <input type="hidden" name="category_{{ category }}" value="1">
+            {%- endfor -%}
+            <input type="hidden" name="pageno" value="{{ pageno }}">
+            <input type="hidden" name="language" value="{{ current_language }}">
+            <input type="hidden" name="time_range" value="{{ time_range }}">
+            <input type="hidden" name="safesearch" value="{{ safesearch }}">
+            <input type="hidden" name="format" value="{{ output_type }}">
+            {%- if timeout_limit -%}
+              <input type="hidden" name="timeout_limit" value="{{ timeout_limit|e }}" >
+            {%- endif -%}
+            <input type="submit" role="link" value="{{ output_type }}">
+          </form>
+        </div>
+      {%- endfor -%}
+    </div>
   </details>
 </div>
diff --git a/searx/templates/simple/elements/engines_msg.html b/searx/templates/simple/elements/engines_msg.html
index 9b8028b7e..1ae8a8c3b 100644
--- a/searx/templates/simple/elements/engines_msg.html
+++ b/searx/templates/simple/elements/engines_msg.html
@@ -1,5 +1,5 @@
 <div id="engines_msg">
-  <details>
+  <details class="sidebar-collapsable">
     <summary class="title" id="engines_msg-title">{{ _('Messages from the search engines') }}</summary>
     <div class="dialog-error" role="alert">
       {{ icon_big('warning') }}
diff --git a/searx/templates/simple/elements/search_url.html b/searx/templates/simple/elements/search_url.html
index b3994fd94..9cc92b943 100644
--- a/searx/templates/simple/elements/search_url.html
+++ b/searx/templates/simple/elements/search_url.html
@@ -1,5 +1,5 @@
 <div id="search_url" role="complementary" aria-labelledby="search_url-title">
-  <details>
+  <details class="sidebar-collapsable">
     <summary class="title" id="search_url-title">{{ _('Search URL') }}</summary>
     <div class="selectable_url">
       <pre>{{ url_for('search', _external=True) }}?q={{ q|urlencode }}&amp;language={{ current_language }}&amp;time_range={{ time_range }}&amp;safesearch={{ safesearch }}
diff --git a/searx/templates/simple/elements/suggestions.html b/searx/templates/simple/elements/suggestions.html
index 52d9666bf..077a8ed2d 100644
--- a/searx/templates/simple/elements/suggestions.html
+++ b/searx/templates/simple/elements/suggestions.html
@@ -1,5 +1,5 @@
 <div id="suggestions" role="complementary" aria-labelledby="suggestions-title">
-  <details>
+  <details class="sidebar-collapsable">
     <summary class="title" id="suggestions-title">{{ _('Suggestions') }}</summary>
     <div class="wrapper">
       {%- for suggestion in suggestions -%}
diff --git a/searx/templates/simple/results.html b/searx/templates/simple/results.html
index f29361ac7..edd0ebfbc 100644
--- a/searx/templates/simple/results.html
+++ b/searx/templates/simple/results.html
@@ -41,7 +41,7 @@
 
         {%- if infoboxes -%}
           <div id="infoboxes">
-            <details open>
+            <details open class="sidebar-collapsable">
               <summary class="title">{{ _('Info') }}</summary>
               {%- for infobox in infoboxes -%}
                 {%- include 'simple/elements/infobox.html' -%}
@@ -66,6 +66,7 @@
           {%- include 'simple/elements/apis.html' -%}
         {%- endif -%}
 
+        <div id="sidebar-end-collapsable"></div>
     </div>
 
     {% if corrections %}