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

searx/static/themes/oscar/css/logicodev-dark.css

@@ -412,7 +412,8 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
   background-color: #068922;
   color: white;
 }
-.custom-select {
+.custom-select,
+.custom-select-rtl {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -430,6 +431,9 @@ ZQAyMDE2LTA3LTI0VDExOjU1OjU4KzAyOjAwRFqFOQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNi0w
 Ny0yNFQxMToxNTowMCswMjowMP7RDgQAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb
 7jwaAAAAAElFTkSuQmCC) 96% no-repeat;
 }
+.custom-select-rtl {
+  background-position-x: 4%;
+}
 .search-margin {
   margin-bottom: 0.6em;
 }

searx/static/themes/oscar/css/logicodev.css

@@ -385,7 +385,8 @@ input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not
   background-color: #068922;
   color: white;
 }
-.custom-select {
+.custom-select,
+.custom-select-rtl {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -403,6 +404,9 @@ ZQAyMDE2LTA3LTI0VDExOjU1OjU4KzAyOjAwRFqFOQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNi0w
 Ny0yNFQxMToxNTowMCswMjowMP7RDgQAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb
 7jwaAAAAAElFTkSuQmCC) 96% no-repeat;
 }
+.custom-select-rtl {
+  background-position-x: 4%;
+}
 .search-margin {
   margin-bottom: 0.6em;
 }

searx/static/themes/oscar/less/logicodev/search.less

@@ -56,7 +56,7 @@
      color: white;
  }
 
-.custom-select {
+.custom-select, .custom-select-rtl {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -75,6 +75,10 @@ Ny0yNFQxMToxNTowMCswMjowMP7RDgQAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb
 7jwaAAAAAElFTkSuQmCC) 96% no-repeat;
 }
 
+.custom-select-rtl {
+    background-position-x: 4%;
+}
+
 .search-margin {
     margin-bottom: 0.6em;
 }

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 %}>

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

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

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>{{- "" -}}