searxng/searx/templates/simple/results.html
Markus Heiser b7e315563d [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>
2023-05-28 12:19:32 +02:00

175 lines
8.3 KiB
HTML

{% extends "simple/base.html" %}
{% from 'simple/icons.html' import icon, icon_big, icon_small %}
{% macro engine_data_form(engine_data) -%}
{% for engine_name, kv_data in engine_data.items() %}
{% for k, v in kv_data.items() %}
<input type="hidden" name="engine_data-{{ engine_name }}-{{ k|e }}" value="{{ v|e }}" />
{% endfor %}
{% endfor %}
{%- endmacro %}
{% block title %}{% if query_in_title %}{{- q|e }} - {% endif %}{% endblock %}
{% block meta %}<link rel="alternate" type="application/rss+xml" title="Searx search: {{ q|e }}" href="{{ url_for('search', _external=True) }}?q={{ q|urlencode }}&amp;categories={{ selected_categories|join(",") | replace(' ','+') }}&amp;pageno={{ pageno }}&amp;time_range={{ time_range }}&amp;language={{ current_language }}&amp;safesearch={{ safesearch }}&amp;format=rss">{% endblock %}
{% block content %}
{% include 'simple/search.html' %}
{% if results and results|map(attribute='template')|unique|list|count == 1 %}
{% set only_template = 'only_template_' + results[0]['template']|default('default')|replace('.html', '') %}
{% else %}
{% set only_template = '' %}
{% endif %}
<div id="results" class="{{ only_template }}">
{% if answers -%}
<div id="answers" role="complementary" aria-labelledby="answers-title"><h4 class="title" id="answers-title">{{ _('Answers') }} : </h4>
{%- for answer in answers.values() -%}
<div class="answer">
{% if answer.url %}
<a href="{{ answer.url }}">{{ answer.answer }}</a>
{% else %}
<span>{{ answer.answer }}</span>
{% endif %}
</div>
{%- endfor -%}
</div>
{%- endif %}
<div id="sidebar">
{%- if number_of_results != '0' -%}
<p id="result_count"><small>{{ _('Number of results') }}: {{ number_of_results }}</small></p>
{%- 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 suggestions -%}
{%- include 'simple/elements/suggestions.html' -%}
{%- 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 -%}
</div>
{% if corrections %}
<div id="corrections" role="complementary" aria-labelledby="corrections-title">
<h4 id="corrections-title">{{ _('Try searching for:') }}</h4>
{% for correction in corrections %}
<div class="left">
<form method="{{ method or 'POST' }}" action="{{ url_for('search') }}" role="navigation">
{% for category in selected_categories %}
<input type="hidden" name="category_{{ category }}" value="1">
{% endfor %}
<input type="hidden" name="q" value="{{ correction.url }}">
<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 }}" >{% endif %}
<input type="submit" role="link" value="{{ correction.title }}">
</form>
</div>
{% endfor %}
</div>
{% endif %}
<div id="urls" role="main">
{% for result in results %}
{% if result.open_group and not only_template %}<div class="template_group_{{ result['template']|replace('.html', '') }}">{% endif %}
{% set index = loop.index %}
{% include get_result_template('simple', result['template']) %}
{% if result.close_group and not only_template %}</div>{% endif %}
{% endfor %}
{% if not results and not answers %}
{% include 'simple/messages/no_results.html' %}
{% endif %}
</div>
<div id="backToTop">
<a href="#" aria-label="{{ _('Back to top') }}">{{ icon_small('chevron-up-outline') }}</a>
</div>
{% if paging %}
<nav id="pagination" role="navigation">
{% if pageno > 1 %}
<form method="{{ method or 'POST' }}" action="{{ url_for('search') }}" class="previous_page">
<div class="{% if rtl %}right{% else %}left{% endif %}">
<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-1 }}" >
<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 %}
{{- engine_data_form(engine_data) -}}
<button role="link" type="submit">{{ icon_small('chevron-left') }} {{ _('Previous page') }}</button>
</div>
</form>
{% endif %}
<form method="{{ method or 'POST' }}" action="{{ url_for('search') }}" class="next_page">
<div class="{% if rtl %}left{% else %}right{% endif %}">
<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+1 }}" >
<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 %}
{{- engine_data_form(engine_data) -}}
<button role="link" type="submit">{{ _('Next page') }} {{ icon_small('chevron-right') }}</button>
</div>
</form>
{% set pstart = 1 %}
{% set pend = 11 %}
{% if pageno > 5 %}
{% set pstart = pageno - 4 %}
{% set pend = pageno + 6 %}
{% endif %}
<div class="numbered_pagination">
{% for x in range(pstart, pend) %}
<form method="{{ method or 'POST' }}" action="{{ url_for('search') }}" class="page_number">
<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="{{ x }}" >
<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 %}
{{- engine_data_form(engine_data) -}}
{% if pageno == x %}
<input role="link" class="page_number_current" type="button" value="{{ x }}">
{% else %}
<input role="link" class="page_number" type="submit" value="{{ x }}">
{% endif %}
</form>
{% endfor %}
</div>
</nav>
{% endif %}
</div>
{% endblock %}