[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

6 files changed, 46 insertions, 26 deletions

diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 4e2f71015..3545ed309 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -529,6 +529,10 @@ article[data-vim-selected].category-social {
   grid-area: urls;
 }
 
+#apis .wrapper {
+  display: flex;
+}
+
 #suggestions {
   .wrapper {
     display: flex;
@@ -598,6 +602,21 @@ article[data-vim-selected].category-social {
   color: var(--color-base-font);
 }
 
+summary.title {
+  cursor: pointer;
+  padding-top: 1em;
+}
+
+.sidebar-collapsable {
+  border-top: 1px solid var(--color-sidebar-border);
+  padding-bottom: 0.5em;
+}
+
+#sidebar-end-collapsable {
+  border-bottom: 1px solid var(--color-sidebar-border);
+  width: 100%;
+}
+
 #answers {
   grid-area: answers;
   background: var(--color-answer-background);
@@ -695,8 +714,6 @@ article[data-vim-selected].category-social {
 }
 
 #search_url {
-  margin-top: 8px;
-
   div.selectable_url {
     pre {
       width: 200em;
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 %}