From bfc92071716fe93de534d4dd79816e3ef168cae5 Mon Sep 17 00:00:00 2001
From: Martin Fischer <martin@push-f.com>
Date: Thu, 6 Jan 2022 23:34:58 +0100
Subject: [PATCH] [fix 1/3] display checkboxes by default

The search tabs are actually labels for checkboxes because multiple can
be selected.  To still make them work like tabs the plugin
search_on_category_select adds a JavaScript that submits the form on
label click.

The problem with this is that when the plugin is disabled (e.g. because
JavaScript is disabled or a user chose to disable it in the settings),
then the tabs still look like tabs but act as checkboxes
(which is very confusing).

This commit changes fixes this so that the checkboxes are visible by
default.  The next commit makes the plugin hide them again. This way
they are visible when the plugin is disabled ... as they should be.
---
 .../oscar/src/less/logicodev/advanced.less     |  7 ++-----
 .../oscar/src/less/logicodev/search.less       | 18 +++++++++++++-----
 .../oscar/src/less/pointhi/advanced.less       |  7 ++-----
 .../themes/oscar/src/less/pointhi/search.less  | 15 +++++++++++----
 .../static/themes/simple/src/less/search.less  |  8 +++-----
 searx/templates/oscar/categories.html          |  4 +++-
 6 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/searx/static/themes/oscar/src/less/logicodev/advanced.less b/searx/static/themes/oscar/src/less/logicodev/advanced.less
index b8e10de4d..25bd59911 100644
--- a/searx/static/themes/oscar/src/less/logicodev/advanced.less
+++ b/searx/static/themes/oscar/src/less/logicodev/advanced.less
@@ -4,19 +4,16 @@
     margin-bottom: 1rem;
     clear: both;
 
-    label, .input-group-addon {
+    .category, .input-group-addon {
         font-size: 1.2rem;
         font-weight:normal;
         background-color: white;
         border: @mild-gray 1px solid;
         border-right: none;
         color: @dark-gray;
-        padding-bottom: 0.4rem;
-        padding-right: 0.7rem;
-        padding-left: 0.7rem;
     }
 
-    label:last-child, .input-group-addon:last-child {
+    .category:last-child, .input-group-addon:last-child {
         border-right: @mild-gray 1px solid;
     }
 
diff --git a/searx/static/themes/oscar/src/less/logicodev/search.less b/searx/static/themes/oscar/src/less/logicodev/search.less
index 1ecb83bd4..505e8a5f4 100644
--- a/searx/static/themes/oscar/src/less/logicodev/search.less
+++ b/searx/static/themes/oscar/src/less/logicodev/search.less
@@ -6,7 +6,7 @@
   flex-flow: row wrap;
   align-content: stretch;
 
-  label, .input-group-addon {
+  .category, .input-group-addon {
     flex-grow: 1;
     flex-basis: auto;
     font-size: 1.2rem;
@@ -15,13 +15,21 @@
     border: @mild-gray 1px solid;
     border-right: none;
     color: @dark-gray;
-    padding-bottom: 0.4rem;
-    padding-top: 0.4rem;
     text-align: center;
     min-width: 50px;
+    display: flex;
+    flex-direction: column;
   }
-  label:last-child, .input-group-addon:last-child {
-      border-right: @mild-gray 1px solid;
+
+  label {
+    flex-grow: 1;
+    margin-bottom: 0;
+    padding-bottom: 0.4rem;
+    padding-top: 0.4rem;
+  }
+
+  .category:last-child, .input-group-addon:last-child {
+    border-right: @mild-gray 1px solid;
   }
 
   input[type="checkbox"]:checked + label {
diff --git a/searx/static/themes/oscar/src/less/pointhi/advanced.less b/searx/static/themes/oscar/src/less/pointhi/advanced.less
index 23bfdb0d2..bba4c063a 100644
--- a/searx/static/themes/oscar/src/less/pointhi/advanced.less
+++ b/searx/static/themes/oscar/src/less/pointhi/advanced.less
@@ -4,19 +4,16 @@
     margin-bottom: 1rem;
     clear: both;
 
-    label, .input-group-addon {
+    .category, .input-group-addon {
         font-size: 1.3rem;
         font-weight:normal;
         background-color: white;
         border: #DDD 1px solid;
         border-right: none;
         color: #333;
-        padding-bottom: 0.8rem;
-        padding-left: 1.2rem;
-        padding-right: 1.2rem;
     }
 
-    label:last-child, .input-group-addon:last-child {
+    .category:last-child, .input-group-addon:last-child {
         border-right: #DDD 1px solid;
     }
 
diff --git a/searx/static/themes/oscar/src/less/pointhi/search.less b/searx/static/themes/oscar/src/less/pointhi/search.less
index ac0a7a0c7..8e01e687e 100644
--- a/searx/static/themes/oscar/src/less/pointhi/search.less
+++ b/searx/static/themes/oscar/src/less/pointhi/search.less
@@ -6,7 +6,7 @@
     flex-wrap: wrap;
     align-content: stretch;
 
-    label, .input-group-addon {
+    .category, .input-group-addon {
         flex-grow: 1;
         flex-basis: auto;
         font-size: 1.3rem;
@@ -15,13 +15,20 @@
         border: #DDD 1px solid;
         border-right: none;
         color: #333;
-        padding-bottom: 0.8rem;
-        padding-top: 0.8rem;
         text-align: center;
         min-width: 50px;
+        display: flex;
+        flex-direction: column;
     }
 
-    label:last-child, .input-group-addon:last-child {
+    label {
+        flex-grow: 1;
+        margin-bottom: 0;
+        padding-bottom: 0.8rem;
+        padding-top: 0.8rem;
+    }
+
+    .category:last-child, .input-group-addon:last-child {
         border-right: #DDD 1px solid;
     }
 
diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less
index 675f26f2f..87621b986 100644
--- a/searx/static/themes/simple/src/less/search.less
+++ b/searx/static/themes/simple/src/less/search.less
@@ -22,15 +22,13 @@
 }
 
 .category {
-  display: inline-block;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 5px;
   position: relative;
   margin-right: 1rem;
   padding: 0;
 
-  input {
-    display: none;
-  }
-
   label {
     svg {
       padding-right: 0.2rem;
diff --git a/searx/templates/oscar/categories.html b/searx/templates/oscar/categories.html
index afc425d4a..b343e621c 100644
--- a/searx/templates/oscar/categories.html
+++ b/searx/templates/oscar/categories.html
@@ -1,6 +1,8 @@
 <div id="categories">
     {% for category in ((categories_as_tabs | reverse) if rtl else categories_as_tabs) -%}
-        <input class="hidden" type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} />{{- '' -}}
+    <div class="category">
+        <input type="checkbox" id="checkbox_{{ category|replace(' ', '_') }}" name="category_{{ category }}" {% if category in selected_categories %}checked="checked"{% endif %} />{{- '' -}}
         <label for="checkbox_{{ category|replace(' ', '_') }}">{{ _(category) }}</label>
+    </div>
     {%- endfor %}
 </div>