ZaclysIndustries
/
searxngRebrandZaclys
forked from zaclys/searxng
2
0
Fork 0
Code Issues Pull Requests Activity

[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>
This commit is contained in:
Markus Heiser 2023-04-23 13:19:21 +02:00 committed by Markus Heiser
parent 79c02456c1
commit b7e315563d
8 changed files with 174 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
searx/static/themes/simple/src/less/style.less
View File

@ -589,8 +589,10 @@ article[data-vim-selected].category-social {
} }
} }
#infoboxes .title,
#suggestions .title, #suggestions .title,
#search_url .title, #search_url .title,
#engines_msg .title,
#apis .title { #apis .title {
margin: 2em 0 0.5em 0; margin: 2em 0 0.5em 0;
color: var(--color-base-font); 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 { #search_url {
margin-top: 8px; margin-top: 8px;
@ -754,11 +764,6 @@ article[data-vim-selected].category-social {
border: none; border: none;
} }
#apis {
margin-top: 8px;
clear: both;
}
#backToTop { #backToTop {
border: 1px solid var(--color-backtotop-border); border: 1px solid var(--color-backtotop-border);
margin: 0; margin: 0;
@ -836,14 +841,6 @@ article[data-vim-selected].category-social {
} }
} }
#apis {
display: none;
}
#search_url {
display: none;
}
.result { .result {
.thumbnail { .thumbnail {
max-width: 98%; max-width: 98%;

24
searx/templates/simple/elements/apis.html Normal file
View File

@ -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>

25
searx/templates/simple/elements/engines_msg.html Normal file
View File

@ -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>

48
searx/templates/simple/elements/infobox.html Normal file
View File

@ -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>

18
searx/templates/simple/elements/search_url.html Normal file
View File

@ -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>

23
searx/templates/simple/elements/suggestions.html Normal file
View File

@ -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>

50
searx/templates/simple/infobox.html
View File

@ -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>

99
searx/templates/simple/results.html
View File

@ -35,84 +35,37 @@
<div id="sidebar"> <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> <p id="result_count"><small>{{ _('Number of results') }}: {{ number_of_results }}</small></p>
{%- endif %} {%- endif -%}
{% if unresponsive_engines and results|length >= 1 %} {%- if infoboxes -%}
<div class="dialog-error" role="alert"> <div id="infoboxes">
{{ icon_big('warning') }} <details open>
<div> <summary class="title">{{ _('Info') }}</summary>
<p><strong>{{ _('Error!') }}</strong> {{ _('Engines cannot retrieve results') }}:</p> {%- for infobox in infoboxes -%}
{%- for engine_name, error_type in unresponsive_engines -%} {%- include 'simple/elements/infobox.html' -%}
<p>{{- engine_name }} ( {%- endfor -%}
<a href="{{ url_for('stats', engine=engine_name|e) }}" title="{{ _('View error logs and submit a bug report') }}"> </details>
{{- error_type -}} </div>
</a> ){{- '' -}} {%- endif -%}
</p>
{% endfor %}
</div>
</div>
{% endif %}
{% if infoboxes %} {%- if suggestions -%}
<div id="infoboxes"> {%- include 'simple/elements/suggestions.html' -%}
{% for infobox in infoboxes -%} {%- endif -%}
{% include 'simple/infobox.html' %}
{%- endfor %}
</div>
{% endif %}
{% if suggestions %} {%- if method == 'POST' -%}
<div id="suggestions" role="complementary" aria-labelledby="suggestions-title"> {%- include 'simple/elements/search_url.html' -%}
<h4 class="title" id="suggestions-title">{{ _('Suggestions') }}: </h4> {%- endif -%}
<div class="wrapper">
{% for suggestion in suggestions %} {%- if unresponsive_engines and results|length >= 1 -%}
<form method="{{ method or 'POST' }}" action="{{ url_for('search') }}"> {%- include 'simple/elements/engines_msg.html' -%}
<input type="hidden" name="q" value="{{ suggestion.url }}"> {%- endif -%}
{% for category in selected_categories %}
<input type="hidden" name="category_{{ category }}" value="1"> {%- if search_formats -%}
{% endfor %} {%- include 'simple/elements/apis.html' -%}
<input type="hidden" name="language" value="{{ current_language }}"> {%- endif -%}
<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' %}
<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> </div>
{% if corrections %} {% if corrections %}