[mod] template preferences: split into elements (no functional change)

HINT: this patch has no functional change / it is the preparation for following
      changes and bugfixes

Over the years, the preferences template became an unmanageable beast.  To make
the source code more readable the monolith is splitted into elements.  The
splitting into elements also has the advantage that a new template can make use
of them.

The reversed checkbox is a quirk that is only used in the prefereces and must be
eliminated in the long term.  For this the macro 'checkbox_onoff_reversed' was
added to the preferences.html template.  The 'checkbox' macro is also a quirk of
the preferences.html we don't want to use in other templates (it is an
input-checkbox in a HTML form that was misused for status display).

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

searx/static/themes/simple/src/less/toolkit.less

@@ -428,7 +428,7 @@ reversed-checkbox displays unchecked checkedboxes as checked, and vice versa.
 see https://github.com/searxng/searxng/blob/3408d061aab9abc6168fec9bbc6deab71b236dac/searx/templates/simple/preferences.html#L313
 */
 input.checkbox-onoff[type="checkbox"],
-.reversed-checkbox input.checkbox-onoff[type="checkbox"]:checked {
+input.checkbox-onoff.reversed-checkbox[type="checkbox"]:checked {
   background: var(--color-toolkit-checkbox-onoff-off-background);
 
   &::before {
@@ -440,7 +440,7 @@ input.checkbox-onoff[type="checkbox"],
 }
 
 input.checkbox-onoff[type="checkbox"]:checked,
-.reversed-checkbox input.checkbox-onoff[type="checkbox"] {
+input.checkbox-onoff.reversed-checkbox[type="checkbox"] {
   background: var(--color-toolkit-checkbox-onoff-on-background);
 
   &::before {

searx/templates/simple/macros.html

@@ -52,33 +52,12 @@ <h3>{{ result_link(result.url, result.title|safe) }}</h3>
 </article>
 {%- endmacro -%}
 
-<!-- -->
-{%- macro tabs_open() -%}
-<div class="tabs" role="tablist">
-{%- endmacro -%}
-
-{%- macro tab_header(name, id, label, checked) -%}
-<input type="radio" name="{{ name }}" id="tab-{{ id }}" {% if checked is sameas true %}checked="checked"{% endif %} />
-<label id="tab-label-{{ label }}" for="tab-{{ id }}" role="tab" aria-controls="tab-content-{{ id }}">{{ label }}</label>
-<section id="tab-content-{{ id }}" role="tabpanel" aria-labelledby="tab-label-{{ label }}" aria-hidden="false">
-{%- endmacro -%}
-
-{%- macro tab_footer() -%}
-</section>
-{%- endmacro -%}
-
-{%- macro tabs_close() -%}
-</div>
-{%- endmacro -%}
-
+<!-- input checkbox, on/off slider user can tap-->
 {%- macro checkbox_onoff(name, checked) -%}
-  <input type="checkbox" name="{{ name }}" id="{{ name }}" value="None" class="checkbox-onoff" {% if checked %}checked{% endif %} />
-{%- endmacro -%}
-
-{%- macro checkbox(name, checked, disabled) -%}
-{%- if checked == '?' -%}
-  {{- icon_small('warning') -}}
-{%- else -%}
-  <input type="checkbox"{% if name %} name="{{ name }}"{% endif %} value="None"{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %} />
-{%- endif -%}
+  <input type="checkbox" {{- ' ' -}}
+         name="{{ name }}" {{- ' ' -}}
+         id="{{ name }}" {{- ' ' -}}
+         aria-labelledby="pref_{{ name }}"{{- ' ' -}}
+         class="checkbox-onoff"{{- ' ' -}}
+         {%- if checked -%} checked{%- endif -%}/>
 {%- endmacro -%}

searx/templates/simple/page_with_header.html

@@ -1,5 +1,7 @@
-{% set body_class = "page_with_header" %}
-{% extends "simple/base.html" %}
-{% block header %}
-<a href="{{ url_for('index') }}"><img class="logo" src="{{ url_for('static', filename='img/searxng.png') }}" alt="SearXNG"></a>
-{% endblock %}
+{%- set body_class = "page_with_header" -%}
+{%- extends "simple/base.html" -%}
+{%- block header -%}
+  <a href="{{ url_for('index') }}">{{- '' -}}
+    <img class="logo" src="{{ url_for('static', filename='img/searxng.png') }}" alt="SearXNG">{{- '' -}}
+  </a>{{- '' -}}
+{%- endblock -%}