Browse Source

[mod] UX: flush flag icon to right in language select option values

If the flag icon is first, it prevents easily searching the select list on the
keyboard.  By moving the icon fully to the right, this will enable a user to
search the select list.

Closes: https://github.com/searxng/searxng/issues/3645
Grant Lanham 9 months ago
parent
commit
e56f4b315f

+ 17 - 10
searx/templates/simple/filters/languages.html

@@ -1,12 +1,19 @@
 <select class="language" id="language" name="language" aria-label="{{ _('Search language') }}">{{- '' -}}
-	<option value="all" {% if current_language == 'all' %}selected="selected"{% endif %}>{{ _('Default language') }} [all]</option>
-	<option value="auto" {% if current_language == 'auto' %}selected="selected"{% endif %}>
-		{{- _('Auto-detect') -}}
-		{%- if current_language == 'auto' %} ({{ search_language }}){%- endif -%}
-	</option>
-	{%- for sxng_tag,lang_name,country_name,english_name,flag in sxng_locales | sort(attribute=1) -%}
-	<option value="{{ sxng_tag }}" {% if sxng_tag == current_language %}selected="selected"{% endif %}>
-		{% if flag %}{{ flag }} {% endif%} {{- lang_name }} {% if country_name %} - {{ country_name }} {% endif %} [{{sxng_tag}}]
-	</option>
-	{%- endfor -%}
+  <option value="all" {% if current_language == 'all' %}selected="selected"{% endif %}>{{ _('Default language') }} [all]</option>{{- '' -}}
+  <option value="all"
+          {%- if current_language == 'all' %} selected="selected" {%- endif -%}>
+          {{- _('Default language') }} [all] {{- '' -}}
+  </option>{{- '' -}}
+  <option value="auto"
+          {%- if current_language == 'auto' %} selected="selected" {%- endif -%}>
+          {{- _('Auto-detect') }} [auto] {{- '' -}}
+  </option>{{- '' -}}
+  {% for sxng_tag,lang_name,country_name,english_name,flag in sxng_locales | sort(attribute=1) -%}
+    <option value="{{ sxng_tag }}"
+            {%- if sxng_tag == current_language %} selected="selected" {%- endif -%}>
+            {{ lang_name }}{%- if country_name -%}-{{ country_name }}{%- endif -%}
+            {{- ' ' -}}[{{sxng_tag}}]{{- ' ' -}}
+            {%- if flag -%}{{ flag }}{%- endif -%}
+    </option>
+  {%- endfor -%}
 </select>

+ 2 - 2
searx/templates/simple/preferences/language.html

@@ -13,9 +13,9 @@
       {% for sxng_tag,lang_name,country_name,english_name,flag in sxng_locales | sort(attribute=1) -%}
         <option value="{{ sxng_tag }}"
                 {%- if sxng_tag == current_language %} selected="selected" {%- endif -%}>
-                {%- if flag -%}{{ flag }} {% endif -%}
                 {{ lang_name }}{%- if country_name -%}-{{ country_name }}{%- endif -%}
-                {{- ' ' -}}[{{sxng_tag}}]{{- '' -}}
+                {{- ' ' -}}[{{sxng_tag}}]{{- ' ' -}}
+                {%- if flag -%}{{ flag }}{%- endif -%}
         </option>
       {%- endfor -%}
     </select>{{- '' -}}