update templates

beetroot_template/macros.html

@@ -52,33 +52,12 @@
 </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 -%}

beetroot_template/preferences.html

@@ -1,4 +1,4 @@
-{%- from 'beetroot/icons.html' import icon_big -%}
+{%- from 'beetroot/icons.html' import icon_small, icon_big -%}
 {%- extends "beetroot/page_with_header.html" -%}
 
 {%- macro tabs_open() -%}

beetroot_template/preferences/answerers.html

@@ -8,14 +8,15 @@
       <th>{{ _('Examples') }}</th>{{- '' -}}
     </tr>{{- '' -}}
 
-    <td></td>{{- '' -}}
-    <th scope="colgroup" colspan="4">
+    <tr class="pref-group" >{{- '' -}}
+      <th scope="colgroup" colspan="5">
         {{- _("This is the list of SearXNG's instant answering modules.") -}}
-    </th>
+      </th>{{- '' -}}
+    </tr>
 
     {%- for answerer in answerers -%}
       <tr>{{- '' -}}
-        <td></td>{{- '' -}}
+        <td class="checkbox-col"></td>{{- '' -}}
         <td>{{ answerer.keywords|join(', ') }}</td>{{- '' -}}
         <td>{{ answerer.info.name }}</td>{{- '' -}}
         <td>{{ answerer.info.description }}</td>{{- '' -}}
@@ -23,15 +24,16 @@
       </tr>
     {%- endfor -%}
 
-    <td></td>{{- '' -}}
-    <th scope="colgroup" colspan="4">
+    <tr class="pref-group" >{{- '' -}}
+      <th scope="colgroup" colspan="5">
         {{- _('This is the list of plugins.') -}}
       </th>{{- '' -}}
+    </th>
 
     {%- for plugin in plugins -%}
       {%- if plugin.preference_section == 'query' -%}
         <tr>{{- '' -}}
-          <td>{{- checkbox_onoff_reversed('plugin_' + plugin.id, plugin.id not in allowed_plugins) -}}</td>{{- '' -}}
+          <td class="checkbox-col">{{- checkbox_onoff_reversed('plugin_' + plugin.id, plugin.id not in allowed_plugins) -}}</td>{{- '' -}}
           <td>{{ plugin.query_keywords|join(', ') }}</td>{{- '' -}}
           <td>{{ _(plugin.name) }}</td>{{- '' -}}
           <td>{{ _(plugin.description) }}</td>{{- '' -}}

beetroot_template/preferences/center_alignment.html

@@ -1,10 +1,14 @@
 <fieldset>{{- '' -}}
   <legend id="pref_center_alignment">{{ _('Center Alignment') }}</legend>{{- '' -}}
   <p class="value">{{- '' -}}
-    <select name="center_alignment" aria-labelledby="pref_center_alignment">{{- '' -}}
-      <option value="1" {% if preferences.get_value('center_alignment') %}selected="selected"{% endif %}>{{ _('On') }}</option>{{- '' -}}
-      <option value="0" {% if not preferences.get_value('center_alignment') %}selected="selected"{% endif %}>{{ _('Off')}}</option>{{- '' -}}
-    </select>{{- '' -}}
+    <input type="checkbox" {{- ' ' -}}
+           name="center_alignment" {{- ' ' -}}
+           aria-labelledby="pref_center_alignment" {{- ' ' -}}
+           class="checkbox-onoff" {{- ' ' -}}
+           {%- if preferences.get_value('center_alignment') -%}
+             checked
+           {%- endif -%}{{- ' ' -}}
+           />{{- '' -}}
   </p>{{- '' -}}
   <div class="description">
     {{- _('Displays results in the center of the page (Oscar layout).') -}}

beetroot_template/preferences/engines.html

@@ -14,12 +14,13 @@
     <table class="striped table_engines">{{- '' -}}
 
       <tr>{{- '' -}}
-        <th class="engine_checkbox">{{- _("Allow") -}}</th>{{- '' -}}
+        <th class="checkbox-col">{{- _("Allow") -}}</th>{{- '' -}}
         <th class="name">{{- _("Engine name") -}}</th>{{- '' -}}
         <th class="shortcut">{{ _("!bang") -}}</th>{{- '' -}}
         <th>{{- _("Supports selected language") -}}</th>{{- '' -}}
         <th>{{- _("SafeSearch") -}}</th>{{- '' -}}
         <th>{{- _("Time range") -}}</th>{{- '' -}}
+        <th>{{- _("Weight") }}</th>
         {%- if enable_metrics -%}
           <th>{{- _("Response time") -}}</th>
         {%- endif -%}
@@ -32,9 +33,9 @@
       {%- for group, group_bang, engines in engines_by_category[categ] | group_engines_in_tab -%}
 
         {%- if loop.length > 1 -%}
-          <tr>{{- '' -}}
-            <th class="engine-group" colspan="2">{{- _(group) -}}</th>{{- '' -}}
-            <th class="engine-group" colspan="7">
+          <tr class="pref-group" >{{- '' -}}
+            <th colspan="2">{{- _(group) -}}</th>{{- '' -}}
+            <th colspan="8">
               {%- if group_bang -%}
                 <span class="bang">{{- group_bang -}}</span>
               {%- endif -%}</th>{{- '' -}}
@@ -72,6 +73,7 @@
               <td>
                 {{- checkbox(None, supports[search_engine.name]['time_range_support'], true) -}}
               </td>{{- '' -}}
+              <td>{{- search_engine.weight or '1.0' -}}</td>{{- '' -}}
               {%- if enable_metrics -%}
                 {{- engine_time(search_engine.name) -}}
               {%- endif -%}

beetroot_template/preferences/image_proxy.html

@@ -1,11 +1,15 @@
 <fieldset>{{- '' -}}
   <legend id="pref_image_proxy">{{ _('Image proxy') }}</legend>{{- '' -}}
   <p class="value">{{- '' -}}
-    <select name='image_proxy' aria-labelledby="pref_image_proxy">{{- '' -}}
-      <option value="1" {% if image_proxy %}selected="selected"{% endif %}>{{ _('Enabled') }}</option>{{- '' -}}
-      <option value="0" {% if not image_proxy %}selected="selected"{% endif %}>{{ _('Disabled') }}</option>{{- '' -}}
-    </select>{{- '' -}}
-  </p>
+    <input type="checkbox" {{- ' ' -}}
+           name="image_proxy" {{- ' ' -}}
+           aria-labelledby="pref_image_proxy" {{- ' ' -}}
+           class="checkbox-onoff" {{- ' ' -}}
+           {%- if preferences.get_value('image_proxy') -%}
+             checked
+           {%- endif -%}{{- ' ' -}}
+           />{{- '' -}}
+  </p>{{- '' -}}
   <div class="description">
     {{- _('Proxying image results through SearXNG') -}}
   </div>{{- '' -}}

beetroot_template/preferences/infinite_scroll.html

@@ -1,10 +1,14 @@
 <fieldset>{{- '' -}}
   <legend>{{ _('Infinite scroll') }}</legend>{{- '' -}}
   <p class="value">{{- '' -}}
-    <select name='infinite_scroll'>{{- '' -}}
-      <option value="1" {% if infinite_scroll %}selected="selected"{% endif %}>{{ _('On') }}</option>{{- '' -}}
-      <option value="0" {% if not infinite_scroll %}selected="selected"{% endif %}>{{ _('Off')}}</option>{{- '' -}}
-    </select>{{- '' -}}
+    <input type="checkbox" {{- ' ' -}}
+           name="infinite_scroll" {{- ' ' -}}
+           aria-labelledby="pref_infinite_scroll" {{- ' ' -}}
+           class="checkbox-onoff" {{- ' ' -}}
+           {%- if preferences.get_value('infinite_scroll') -%}
+             checked
+           {%- endif -%}{{- ' ' -}}
+           />{{- '' -}}
   </p>{{- '' -}}
   <div class="description">
     {{- _('Automatically load next page when scrolling to bottom of current page') -}}

beetroot_template/preferences/query_in_title.html

@@ -1,10 +1,14 @@
 <fieldset>{{- '' -}}
-  <legend id="pref_query_in_title">{{ _("Query in the page's title") }}</legend>
+  <legend id="pref_query_in_title">{{ _("Query in the page's title") }}</legend>{{- '' -}}
   <p class="value">{{- '' -}}
-    <select name='query_in_title' aria-labelledby="pref_query_in_title">{{- '' -}}
-      <option value="1" {% if query_in_title %}selected="selected"{% endif %}>{{ _('Enabled') }}</option>{{- '' -}}
-      <option value="0" {% if not query_in_title %}selected="selected"{% endif %}>{{ _('Disabled') }}</option>{{- '' -}}
-    </select>{{- '' -}}
+    <input type="checkbox" {{- ' ' -}}
+           name="query_in_title" {{- ' ' -}}
+           aria-labelledby="pref_query_in_title" {{- ' ' -}}
+           class="checkbox-onoff" {{- ' ' -}}
+           {%- if preferences.get_value('query_in_title') -%}
+             checked
+           {%- endif -%}{{- ' ' -}}
+           />{{- '' -}}
   </p>{{- '' -}}
   <div class="description">
     {{- _("When enabled, the result page's title contains your query. Your browser can record this title") -}}

beetroot_template/preferences/results_on_new_tab.html

@@ -1,10 +1,14 @@
 <fieldset>{{- '' -}}
   <legend id="pref_results_on_new_tab">{{ _('Results on new tabs') }}</legend>{{- '' -}}
   <p class="value">{{- '' -}}
-    <select name='results_on_new_tab' aria-labelledby="pref_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>{{- '' -}}
+    <input type="checkbox" {{- ' ' -}}
+           name="results_on_new_tab" {{- ' ' -}}
+           aria-labelledby="pref_results_on_new_tab" {{- ' ' -}}
+           class="checkbox-onoff" {{- ' ' -}}
+           {%- if preferences.get_value('results_on_new_tab') -%}
+             checked
+           {%- endif -%}{{- ' ' -}}
+           />{{- ' ' -}}
   </p>{{- '' -}}
   <div class="description">
     {{- _('Open result links on new browser tabs') -}}

beetroot_template/result_templates/code.html

@@ -2,12 +2,31 @@
 
 {{ result_header(result, favicons, image_proxify) -}}
 {{- result_sub_header(result) -}}
-{%- if result.content %}{{ result.content|safe }}{% endif %}</p>
-{%- if result.repository -%}
-<p class="content"><a href="{{ result.repository|safe }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}>{{ result.repository }}</a></p>
+
+{%- if result.content -%}
+  <p class="content">
+    {{- result.content|safe -}}
+  </p>
 {%- endif -%}
+{%- if result.repository -%}
+  <p class="content">{{- '' -}}
+    {{ _('repo') }}: {{- ' ' -}}
+    <a href="{{ result.repository|safe }}"{{- ' ' -}}
+       {% if results_on_new_tab %}
+         target="_blank" {{- ' ' -}}
+         rel="noopener noreferrer"
+       {%- else -%}
+         rel="noreferrer"
+       {%- endif -%}
+       >
+       {{- result.repository -}}
+    </a>{{- '' -}}
+  </p>
+{%- endif -%}
+
 <div dir="ltr" class="codelines">
     {{- result.codelines|code_highlighter(result.code_language)|safe -}}
-</div>{{- '' -}}
+</div>
+
 {{- result_sub_footer(result, proxify) -}}
-{{ result_footer(result) }}
+{{- result_footer(result) -}}

beetroot_template/results.html

@@ -23,11 +23,10 @@
     <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 %}
+          {% if answer.url -%}
+          <a href="{{ answer.url }}" class="answer-url">{{ urlparse(answer.url).hostname }}</a>
+          {% endif -%}
         </div>
         {%- endfor -%}
     </div>