From b7e315563d2401e6fb659fcfcb361e6d5bb915d5 Mon Sep 17 00:00:00 2001
From: Markus Heiser <markus.heiser@darmarit.de>
Date: Sun, 23 Apr 2023 13:19:21 +0200
Subject: [PATCH] [mod] simple theme: collaps/expand elements in the sidebar

Make elements in the sidebar collapse able.  Except infoboxes all elements in
the sidebar are collapsed by default.

By folding out the sidebar elements, the UI looks less cluttered.  Especially on
small devices like smartphones, where the sidebar is above the results list, the
UX should be improved [1].

[1] https://github.com/searxng/searxng/issues/2140

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
---
 .../static/themes/simple/src/less/style.less  | 23 ++---
 searx/templates/simple/elements/apis.html     | 24 +++++
 .../simple/elements/engines_msg.html          | 25 +++++
 searx/templates/simple/elements/infobox.html  | 48 +++++++++
 .../templates/simple/elements/search_url.html | 18 ++++
 .../simple/elements/suggestions.html          | 23 +++++
 searx/templates/simple/infobox.html           | 50 ----------
 searx/templates/simple/results.html           | 99 +++++--------------
 8 files changed, 174 insertions(+), 136 deletions(-)
 create mode 100644 searx/templates/simple/elements/apis.html
 create mode 100644 searx/templates/simple/elements/engines_msg.html
 create mode 100644 searx/templates/simple/elements/infobox.html
 create mode 100644 searx/templates/simple/elements/search_url.html
 create mode 100644 searx/templates/simple/elements/suggestions.html
 delete mode 100644 searx/templates/simple/infobox.html

diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 962dbeba0..4e2f71015 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -589,8 +589,10 @@ article[data-vim-selected].category-social {
   }
 }
 
+#infoboxes .title,
 #suggestions .title,
 #search_url .title,
+#engines_msg .title,
 #apis .title {
   margin: 2em 0 0.5em 0;
   color: var(--color-base-font);
@@ -684,6 +686,14 @@ article[data-vim-selected].category-social {
   }
 }
 
+#apis {
+  input {
+    font-size: 0.9em;
+    margin: 0 10px 0 0;
+    .show-content-button;
+  }
+}
+
 #search_url {
   margin-top: 8px;
 
@@ -754,11 +764,6 @@ article[data-vim-selected].category-social {
   border: none;
 }
 
-#apis {
-  margin-top: 8px;
-  clear: both;
-}
-
 #backToTop {
   border: 1px solid var(--color-backtotop-border);
   margin: 0;
@@ -836,14 +841,6 @@ article[data-vim-selected].category-social {
     }
   }
 
-  #apis {
-    display: none;
-  }
-
-  #search_url {
-    display: none;
-  }
-
   .result {
     .thumbnail {
       max-width: 98%;
diff --git a/searx/templates/simple/elements/apis.html b/searx/templates/simple/elements/apis.html
new file mode 100644
index 000000000..c3bc76726
--- /dev/null
+++ b/searx/templates/simple/elements/apis.html
@@ -0,0 +1,24 @@
+<div id="apis" role="complementary" aria-labelledby="apis-title">
+  <details>
+    <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 -%}
+  </details>
+</div>
diff --git a/searx/templates/simple/elements/engines_msg.html b/searx/templates/simple/elements/engines_msg.html
new file mode 100644
index 000000000..9b8028b7e
--- /dev/null
+++ b/searx/templates/simple/elements/engines_msg.html
@@ -0,0 +1,25 @@
+<div id="engines_msg">
+  <details>
+    <summary class="title" id="engines_msg-title">{{ _('Messages from the search engines') }}</summary>
+    <div class="dialog-error" role="alert">
+      {{ icon_big('warning') }}
+      <div>
+        <p>
+          <strong>{{ _('Error!') }}</strong>
+          {{ _('Engines cannot retrieve results') }}:
+        </p>
+        {%- for engine_name, error_type in unresponsive_engines -%}
+          <p>{{- engine_name }} (
+            <a href="{{ url_for('stats', engine=engine_name|e) }}"
+               title="{{ _('View error logs and submit a bug report') }}">
+               {{- error_type -}}
+            </a>
+            ){{- '' -}}
+          </p>
+        {%- endfor -%}
+      </div>
+    </div>
+  </details>
+</div>
+
+
diff --git a/searx/templates/simple/elements/infobox.html b/searx/templates/simple/elements/infobox.html
new file mode 100644
index 000000000..68fd32559
--- /dev/null
+++ b/searx/templates/simple/elements/infobox.html
@@ -0,0 +1,48 @@
+<aside class="infobox" aria-label="{{ infobox.infobox }}">
+  <h2 class="title"><bdi>{{ infobox.infobox }}</bdi></h2>
+  {%- if infobox.img_src -%}<img src="{{ image_proxify(infobox.img_src) }}" title="{{ infobox.infobox|striptags }}" alt="{{ infobox.infobox|striptags }}">{%- endif -%}
+  <p><bdi>{{ infobox.content | safe }}</bdi></p>
+  {%- if infobox.attributes -%}
+    <div class="attributes">
+      {%- for attribute in infobox.attributes -%}
+        <dl>
+          <dt><bdi>{{ attribute.label }} :</bdi></dt>
+          {%- if attribute.image -%}
+            <dd><img src="{{ image_proxify(attribute.image.src) }}" alt="{{ attribute.image.alt }}"></dd>
+          {%- else -%}
+            <dd><bdi>{{ attribute.value }}</bdi></dd>
+          {%- endif -%}
+        </dl>
+      {%- endfor -%}
+    </div>
+  {%- endif -%}
+  {%- if infobox.urls -%}
+    <div class="urls">
+      <ul>
+        {%- for url in infobox.urls -%}
+          <li class="url"><bdi><a href="{{ url.url }}" {%- if results_on_new_tab -%}target="_blank" rel="noopener noreferrer"{%- else -%}rel="noreferrer"{%- endif -%}>{{ url.title }}</a></bdi></li>
+        {%- endfor -%}
+      </ul>
+    </div>
+  {%- endif -%}
+  {%- if infobox.relatedTopics -%}
+    <div class="relatedTopics">
+      {%- for topic in infobox.relatedTopics -%}
+        <div>
+          <h3><bdi>{{ topic.name }}</bdi></h3>
+          {%- for suggestion in topic.suggestions -%}
+            <form method="{{ method or 'POST' }}" action="{{ url_for('search') }}">
+              <input type="hidden" name="q" value="{{ suggestion }}">
+              <input type="hidden" name="time_range" value="{{ time_range }}">
+              <input type="hidden" name="language" value="{{ current_language }}">
+              <input type="hidden" name="safesearch" value="{{ safesearch }}">
+              <input type="hidden" name="theme" value="{{ theme }}">
+              {%- if timeout_limit -%}<input type="hidden" name="timeout_limit" value="{{ timeout_limit|e }}" >{%- endif -%}
+              <input type="submit" value="{{ suggestion }}" />
+            </form>
+          {%- endfor -%}
+        </div>
+      {%- endfor -%}
+    </div>
+  {%- endif -%}
+</aside>
diff --git a/searx/templates/simple/elements/search_url.html b/searx/templates/simple/elements/search_url.html
new file mode 100644
index 000000000..b3994fd94
--- /dev/null
+++ b/searx/templates/simple/elements/search_url.html
@@ -0,0 +1,18 @@
+<div id="search_url" role="complementary" aria-labelledby="search_url-title">
+  <details>
+    <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 }}
+        {%- if pageno > 1 -%}
+          &amp;pageno={{ pageno }}
+        {%- endif -%}
+        {%- if selected_categories -%}
+          &amp;categories={{ selected_categories|join(",") | replace(' ','+') }}
+        {%- endif -%}
+        {%- if timeout_limit -%}
+          &amp;timeout_limit={{ timeout_limit|urlencode }}
+        {%- endif -%}
+      </pre>
+    </div>
+  </details>
+</div>
diff --git a/searx/templates/simple/elements/suggestions.html b/searx/templates/simple/elements/suggestions.html
new file mode 100644
index 000000000..52d9666bf
--- /dev/null
+++ b/searx/templates/simple/elements/suggestions.html
@@ -0,0 +1,23 @@
+<div id="suggestions" role="complementary" aria-labelledby="suggestions-title">
+  <details>
+    <summary class="title" id="suggestions-title">{{ _('Suggestions') }}</summary>
+    <div class="wrapper">
+      {%- for suggestion in suggestions -%}
+        <form method="{{ method or 'POST' }}" action="{{ url_for('search') }}">
+          <input type="hidden" name="q" value="{{ suggestion.url }}">
+          {%- for category in selected_categories -%}
+            <input type="hidden" name="category_{{ category }}" value="1">
+          {%- endfor -%}
+          <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="theme" value="{{ theme }}">
+          {%- if timeout_limit -%}
+            <input type="hidden" name="timeout_limit" value="{{ timeout_limit|e }}" >
+          {%- endif -%}
+          <input type="submit" class="suggestion" role="link" value="&bull; {{ suggestion.title }}">
+        </form>
+      {%- endfor -%}
+    </div>
+  </details>
+</div>
diff --git a/searx/templates/simple/infobox.html b/searx/templates/simple/infobox.html
deleted file mode 100644
index bb9dc8524..000000000
--- a/searx/templates/simple/infobox.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<aside class="infobox" aria-label="{{ infobox.infobox }}">
-  <h2><bdi>{{ infobox.infobox }}</bdi></h2>
-  {% if infobox.img_src %}<img src="{{ image_proxify(infobox.img_src) }}" title="{{ infobox.infobox|striptags }}" alt="{{ infobox.infobox|striptags }}">{%- endif -%}
-  <p><bdi>{{ infobox.content | safe }}</bdi></p>
-  {% if infobox.attributes %}
-  <div class="attributes">
-    {% for attribute in infobox.attributes %}
-    <dl>
-      <dt><bdi>{{ attribute.label }} :</bdi></dt>
-      {%- if attribute.image -%}
-      <dd><img src="{{ image_proxify(attribute.image.src) }}" alt="{{ attribute.image.alt }}"></dd>
-      {%- else -%}
-      <dd><bdi>{{ attribute.value }}</bdi></dd>
-      {%- endif -%}
-    </dl>
-    {% endfor %}
-  </div>
-  {% endif %}
-
-  {% if infobox.urls %}
-  <div class="urls">
-    <ul>
-      {%- for url in infobox.urls -%}
-      <li class="url"><bdi><a href="{{ url.url }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}>{{ url.title }}</a></bdi></li>
-      {%- endfor -%}
-    </ul>
-  </div>
-  {% endif %}
-
-  {% if infobox.relatedTopics %}
-  <div class="relatedTopics">
-    {% for topic in infobox.relatedTopics %}
-    <div>
-      <h3><bdi>{{ topic.name }}</bdi></h3>
-      {% for suggestion in topic.suggestions %}
-      <form method="{{ method or 'POST' }}" action="{{ url_for('search') }}">
-        <input type="hidden" name="q" value="{{ suggestion }}">
-        <input type="hidden" name="time_range" value="{{ time_range }}">
-        <input type="hidden" name="language" value="{{ current_language }}">
-        <input type="hidden" name="safesearch" value="{{ safesearch }}">
-        <input type="hidden" name="theme" value="{{ theme }}">
-        {% if timeout_limit %}<input type="hidden" name="timeout_limit" value="{{ timeout_limit|e }}" >{% endif %}
-        <input type="submit" value="{{ suggestion }}" />
-      </form>
-      {% endfor %}
-    </div>
-    {% endfor %}
-  </div>
-  {% endif %}
-</aside>
diff --git a/searx/templates/simple/results.html b/searx/templates/simple/results.html
index f73a25d09..f29361ac7 100644
--- a/searx/templates/simple/results.html
+++ b/searx/templates/simple/results.html
@@ -35,84 +35,37 @@
 
     <div id="sidebar">
 
-        {% if number_of_results != '0' -%}
+        {%- if number_of_results != '0' -%}
         <p id="result_count"><small>{{ _('Number of results') }}: {{ number_of_results }}</small></p>
-        {%- endif %}
+        {%- endif -%}
 
-        {% if unresponsive_engines and results|length >= 1 %}
-	<div class="dialog-error" role="alert">
-    {{ icon_big('warning') }}
-    <div>
-	    <p><strong>{{ _('Error!') }}</strong> {{ _('Engines cannot retrieve results') }}:</p>
-      {%- for engine_name, error_type in unresponsive_engines -%}
-      <p>{{- engine_name }} (
-        <a href="{{ url_for('stats', engine=engine_name|e) }}" title="{{ _('View error logs and submit a bug report') }}">
-          {{- error_type -}}
-        </a> ){{- '' -}}
-      </p>
-      {% endfor %}
-    </div>
-	</div>
-	{% endif %}
+        {%- if infoboxes -%}
+          <div id="infoboxes">
+            <details open>
+              <summary class="title">{{ _('Info') }}</summary>
+              {%- for infobox in infoboxes -%}
+                {%- include 'simple/elements/infobox.html' -%}
+              {%- endfor -%}
+            </details>
+          </div>
+        {%- endif -%}
 
-        {% if infoboxes %}
-        <div id="infoboxes">
-           {% for infobox in infoboxes -%}
-             {% include 'simple/infobox.html' %}
-           {%- endfor %}
-        </div>
-        {% endif %}
+        {%- if suggestions -%}
+          {%- include 'simple/elements/suggestions.html' -%}
+        {%- endif -%}
 
-        {% if suggestions %}
-        <div id="suggestions" role="complementary" aria-labelledby="suggestions-title">
-	  <h4 class="title" id="suggestions-title">{{ _('Suggestions') }}: </h4>
-	  <div class="wrapper">
-            {% for suggestion in suggestions %}
-            <form method="{{ method or 'POST' }}" action="{{ url_for('search') }}">
-              <input type="hidden" name="q" value="{{ suggestion.url }}">
-              {% for category in selected_categories %}
-              <input type="hidden" name="category_{{ category }}" value="1">
-              {% endfor %}
-              <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="theme" value="{{ theme }}">
-              {% if timeout_limit %}<input type="hidden" name="timeout_limit" value="{{ timeout_limit|e }}" >{% endif %}
-              <input type="submit" class="suggestion" role="link" value="&bull; {{ suggestion.title }}">
-            </form>
-            {% endfor %}
-	  </div>
-        </div>
-        {% endif %}
+        {%- if method == 'POST' -%}
+          {%- include 'simple/elements/search_url.html' -%}
+        {%- endif -%}
+
+        {%- if unresponsive_engines and results|length >= 1 -%}
+          {%- include 'simple/elements/engines_msg.html' -%}
+	{%- endif -%}
+
+        {%- if search_formats -%}
+          {%- include 'simple/elements/apis.html' -%}
+        {%- endif -%}
 
-        {% if method == 'POST' %}
-        <div id="search_url" role="complementary" aria-labelledby="search_url-title">
-            <h4 class="title" id="search_url-title">{{ _('Search URL') }} :</h4>
-            <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 }}{% if pageno > 1 %}&amp;pageno={{ pageno }}{% endif %}{% if selected_categories %}&amp;categories={{ selected_categories|join(",") | replace(' ','+') }}{% endif %}{% if timeout_limit %}&amp;timeout_limit={{ timeout_limit|urlencode }}{% endif %}</pre></div>
-        </div>
-        {% endif %}
-        <div id="apis" role="complementary" aria-labelledby="apis-title">
-          {% if search_formats %}
-          <h4 class="title" id="apis-title">{{ _('Download results') }}</h4>
-          {% 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 %}
-          {% endif %}
-        </div>
     </div>
 
     {% if corrections %}