fix selects in preferences so they look consistent (#2150)

4 files changed, 18 insertions, 12 deletions

diff --git a/searx/templates/oscar/languages.html b/searx/templates/oscar/languages.html
index 9c00c9cea..0846caa96 100644
--- a/searx/templates/oscar/languages.html
+++ b/searx/templates/oscar/languages.html
@@ -1,5 +1,6 @@
+{% from 'oscar/macros.html' import custom_select_class %}
 <label class="visually-hidden" for="language">{{ _('Language') }}</label>
-<select class="language custom-select form-control" id="language" name="language" accesskey="l">
+<select class="language form-control {{ custom_select_class(rtl) }}" id="language" name="language" accesskey="l">
   <option value="all" {% if current_language == 'all' %}selected="selected"{% endif %}>{{ _('Default language') }}</option>
 {%- for lang_id,lang_name,country_name,english_name in language_codes | sort(attribute=1) -%}
   <option value="{{ lang_id }}" {% if lang_id == current_language %}selected="selected"{% endif %}>
diff --git a/searx/templates/oscar/macros.html b/searx/templates/oscar/macros.html
index 58f966997..f52d9713c 100644
--- a/searx/templates/oscar/macros.html
+++ b/searx/templates/oscar/macros.html
@@ -84,6 +84,10 @@
     {% endif %}
 {%- endmacro %}
 
+{% macro custom_select_class(rtl) -%}
+custom-select{% if rtl %}-rtl{% endif %}
+{%- endmacro %}
+
 {% macro checkbox_toggle(id, blocked) -%}
     <div class="onoffswitch">
         <input type="checkbox" id="{{ id }}" name="{{ id }}"{% if blocked %} checked="checked"{% endif %} class="onoffswitch-checkbox">
diff --git a/searx/templates/oscar/preferences.html b/searx/templates/oscar/preferences.html
index 89cc74ab7..8f67cbf93 100644
--- a/searx/templates/oscar/preferences.html
+++ b/searx/templates/oscar/preferences.html
@@ -1,4 +1,4 @@
-{% from 'oscar/macros.html' import preferences_item_header, preferences_item_header_rtl, preferences_item_footer, preferences_item_footer_rtl, checkbox_toggle, support_toggle %}
+{% from 'oscar/macros.html' import preferences_item_header, preferences_item_header_rtl, preferences_item_footer, preferences_item_footer_rtl, checkbox_toggle, support_toggle, custom_select_class %}
 {% extends "oscar/base.html" %}
 {% block title %}{{ _('preferences') }} - {% endblock %}
 {% block content %}
@@ -47,7 +47,7 @@
                     {% set locale_label = _('Interface language') %}
                     {% set locale_info = _('Change the language of the layout') %}
                     {{ preferences_item_header(locale_info, locale_label, rtl, 'locale') }}
-                        <select class="form-control" name="locale" id="locale">
+                        <select class="form-control {{ custom_select_class(rtl)}}" name="locale" id="locale">
                             {% for locale_id,locale_name in locales.items() | sort %}
                             <option value="{{ locale_id }}" {% if locale_id == current_locale %}selected="selected"{% endif %}>{{ locale_name }}</option>
                             {% endfor %}
@@ -57,7 +57,7 @@
                     {% set autocomplete_label = _('Autocomplete') %}
                     {% set autocomplete_info = _('Find stuff as you type') %}
                     {{ preferences_item_header(autocomplete_info, autocomplete_label, rtl, 'autocomplete') }}
-                        <select class="form-control" name="autocomplete" id="autocomplete">
+                        <select class="form-control {{ custom_select_class(rtl) }}" name="autocomplete" id="autocomplete">
                             <option value=""> - </option>
                             {% for backend in autocomplete_backends %}
                             <option value="{{ backend }}" {% if backend == autocomplete %}selected="selected"{% endif %}>{{ backend }}</option>
@@ -68,7 +68,7 @@
                     {% set image_proxy_label = _('Image proxy') %}
                     {% set image_proxy_info = _('Proxying image results through searx') %}
                     {{ preferences_item_header(image_proxy_info, image_proxy_label, rtl, 'image_proxy') }}
-                        <select class="form-control" name="image_proxy" id="image_proxy">
+                        <select class="form-control {{ custom_select_class(rtl) }}" name="image_proxy" id="image_proxy">
                             <option value="1" {% if image_proxy  %}selected="selected"{% endif %}>{{ _('Enabled') }}</option>
                             <option value="" {% if not image_proxy %}selected="selected"{% endif %}>{{ _('Disabled')}}</option>
                         </select>
@@ -77,7 +77,7 @@
                     {% set method_label = _('Method') %}
                     {% set method_info = _('Change how forms are submited, <a href="http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods" rel="external">learn more about request methods</a>') %}
                     {{ preferences_item_header(method_info, method_label, rtl, 'method') }}
-                        <select class="form-control" name="method" id="method">
+                        <select class="form-control {{ custom_select_class(rtl) }}" name="method" id="method">
                             <option value="POST" {% if method == 'POST' %}selected="selected"{% endif %}>POST</option>
                             <option value="GET" {% if method == 'GET' %}selected="selected"{% endif %}>GET</option>
                         </select>
@@ -86,7 +86,7 @@
                     {% set safesearch_label = _('SafeSearch') %}
                     {% set safesearch_info = _('Filter content') %}
                     {{ preferences_item_header(safesearch_info, safesearch_label, rtl, 'safesearch') }}
-                        <select class="form-control" name="safesearch" id="safesearch">
+                        <select class="form-control {{ custom_select_class(rtl) }}" name="safesearch" id="safesearch">
                             <option value="2" {% if safesearch == '2' %}selected="selected"{% endif %}>{{ _('Strict') }}</option>
                             <option value="1" {% if safesearch == '1' %}selected="selected"{% endif %}>{{ _('Moderate') }}</option>
                             <option value="0" {% if safesearch == '0' %}selected="selected"{% endif %}>{{ _('None') }}</option>
@@ -96,7 +96,7 @@
                     {% set theme_label = _('Themes') %}
                     {% set theme_info = _('Change searx layout') %}
                     {{ preferences_item_header(theme_info, theme_label, rtl, 'theme') }}
-                        <select class="form-control" name="theme" id="theme">
+                        <select class="form-control {{ custom_select_class(rtl) }}" name="theme" id="theme">
                             {% for name in themes %}
                             <option value="{{ name }}" {% if name == theme %}selected="selected"{% endif %}>{{ name }}</option>
                             {% endfor %}
@@ -104,7 +104,7 @@
                     {{ preferences_item_footer(theme_info, theme_label, rtl) }}
 
                     {{ preferences_item_header(_('Choose style for this theme'), _('Style'), rtl, 'oscar_style') }}
-                        <select class="form-control" name="oscar-style" id="oscar_style">
+                        <select class="form-control {{ custom_select_class(rtl) }}" name="oscar-style" id="oscar_style">
                             <option value="logicodev" >Logicodev</option>
                             <option value="pointhi" {% if preferences.get_value('oscar-style') == 'pointhi' %}selected="selected"{% endif %}>Pointhi</option>
                             <option value="logicodev-dark" {% if preferences.get_value('oscar-style') == 'logicodev-dark' %}selected="selected"{% endif %}>Logicodev dark</option>
@@ -114,7 +114,7 @@
                     {% set label = _('Results on new tabs') %}
                     {% set info = _('Open result links on new browser tabs') %}
                     {{ preferences_item_header(info, label, rtl, 'results_on_new_tab') }}
-                        <select class="form-control" name="results_on_new_tab" id="results_on_new_tab">
+                        <select class="form-control {{ custom_select_class(rtl) }}" name="results_on_new_tab" id="results_on_new_tab">
                             <option value="1" {% if results_on_new_tab %}selected="selected"{% endif %}>{{ _('On') }}</option>
                             <option value="0" {% if not results_on_new_tab %}selected="selected"{% endif %}>{{ _('Off')}}</option>
                         </select>
@@ -123,7 +123,7 @@
                     {% set label = _('Open Access DOI resolver') %}
                     {% set info = _('Redirect to open-access versions of publications when available (plugin required)') %}
                     {{ preferences_item_header(info, label, rtl, 'doi_resolver') }}
-                        <select class="form-control" name="doi_resolver" id="doi_resolver">
+                        <select class="form-control {{ custom_select_class(rtl) }}" name="doi_resolver" id="doi_resolver">
                             {% for doi_resolver_name,doi_resolver_url in doi_resolvers.items() %}
                             <option value="{{ doi_resolver_name }}" {% if doi_resolver_name == current_doi_resolver %}selected="selected"{% endif %}>
                                     {{ doi_resolver_name }} - {{ doi_resolver_url }}
diff --git a/searx/templates/oscar/time-range.html b/searx/templates/oscar/time-range.html
index 181b57681..6087dd417 100644
--- a/searx/templates/oscar/time-range.html
+++ b/searx/templates/oscar/time-range.html
@@ -1,5 +1,6 @@
+{% from 'oscar/macros.html' import custom_select_class %}
 <label class="visually-hidden" for="time-range">{{ _('Time range') }}</label>
-<select name="time_range" id="time-range" class="custom-select form-control" accesskey="t">{{- "" -}}
+<select name="time_range" id="time-range" class="{{ custom_select_class(rtl) }} form-control" accesskey="t">{{- "" -}}
     <option id="time-range-anytime" value="" {{ "selected" if time_range=="" or not time_range  else ""}}>
         {{- _('Anytime') -}}
     </option>{{- "" -}}