[fix] preferences - layout of the "special queries" tab

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

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

@@ -78,7 +78,7 @@
   /// Settings Colors
   --color-settings-tr-hover: #ebebeb;
   --color-settings-engine-description-font: #545454;
-  --color-settings-engine-group-background: #0001;
+  --color-settings-table-group-background: #0001;
   /// Detail modal
   --color-result-detail-font: #fff;
   --color-result-detail-label-font: lightgray;
@@ -198,7 +198,7 @@
   /// Settings Colors
   --color-settings-tr-hover: #2c2c32;
   --color-settings-engine-description-font: darken(#dcdcdc, 30%);
-  --color-settings-engine-group-background: #1b1b21;
+  --color-settings-table-group-background: #1b1b21;
   /// Toolkit Colors
   --color-toolkit-badge-font: #fff;
   --color-toolkit-badge-background: #555;

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

@@ -1,7 +1,18 @@
-#tab-content-query table td,
+table {
-#tab-content-query table th {
+  border-collapse: collapse;
-  .ltr-text-align-right() !important;
+
-  height: 3rem;
+  th,
+  td {
+    text-align: center;
+    padding: 1rem 0.5rem;
+    .ltr-text-align-left();
+  }
+
+  tr.pref-group th {
+    font-weight: normal;
+    .ltr-text-align-left();
+    background: var(--color-settings-table-group-background);
+  }
 }
 
 #main_preferences {
@@ -81,14 +92,6 @@
     border: 0 none;
   }
 
-  table {
-    border-collapse: collapse;
-  }
-
-  table td {
-    text-align: center;
-  }
-
   .category {
     .ltr-margin-right(0.5rem);
 
@@ -104,10 +107,6 @@
   }
 
   table.table_engines {
-    td {
-      height: 3.75rem;
-    }
-
     th.name {
       /* stylelint-disable */
       label {
@@ -130,12 +129,7 @@
       }
     }
 
-    .engine-group {
+    .checkbox-col,
-      .ltr-text-align-left();
-      font-weight: normal;
-      background: var(--color-settings-engine-group-background);
-    }
-
     .name,
     .shortcut {
       .ltr-text-align-left();

searx/templates/simple/preferences/answerers.html

@@ -8,14 +8,15 @@
       <th>{{ _('Examples') }}</th>{{- '' -}}
     </tr>{{- '' -}}
 
-    <td></td>{{- '' -}}
+    <tr class="pref-group" >{{- '' -}}
-    <th scope="colgroup" colspan="4">
+      <th scope="colgroup" colspan="5">
-      {{- _("This is the list of SearXNG's instant answering modules.") -}}
+        {{- _("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>{{- '' -}}
+    <tr class="pref-group" >{{- '' -}}
-    <th scope="colgroup" colspan="4">
+      <th scope="colgroup" colspan="5">
-      {{- _('This is the list of plugins.') -}}
+        {{- _('This is the list of plugins.') -}}
-    </th>{{- '' -}}
+      </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>{{- '' -}}

searx/templates/simple/preferences/engines.html

@@ -14,7 +14,7 @@
     <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>{{- '' -}}
@@ -33,9 +33,9 @@
       {%- for group, group_bang, engines in engines_by_category[categ] | group_engines_in_tab -%}
 
         {%- if loop.length > 1 -%}
-          <tr>{{- '' -}}
+          <tr class="pref-group" >{{- '' -}}
-            <th class="engine-group" colspan="2">{{- _(group) -}}</th>{{- '' -}}
+            <th colspan="2">{{- _(group) -}}</th>{{- '' -}}
-            <th class="engine-group" colspan="8">
+            <th colspan="8">
               {%- if group_bang -%}
                 <span class="bang">{{- group_bang -}}</span>
               {%- endif -%}</th>{{- '' -}}