Merge pull request #929 from dalf/simple-fix-nojs-categories

[fix] simple: categories: use media query detect touch screen

searx/static/themes/simple/src/js/head/00_init.js

@@ -4,7 +4,6 @@
  * (C) Copyright Contributors to the searx project (2014 - 2021).
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-/* global DocumentTouch:readonly */
 (function (w, d) {
   'use strict';
 
@@ -16,7 +15,6 @@
 
   // try to detect touch screen
   w.searxng = {
-    touch: (("ontouchstart" in w) || w.DocumentTouch && document instanceof DocumentTouch) || false,
     method: script.getAttribute('data-method'),
     autocompleter: script.getAttribute('data-autocompleter') === 'true',
     search_on_category_select: script.getAttribute('data-search-on-category-select') === 'true',
@@ -34,7 +32,4 @@
   var hmtlElement = d.getElementsByTagName("html")[0];
   hmtlElement.classList.remove('no-js');
   hmtlElement.classList.add('js');
-  if (w.searxng.touch) {
-    hmtlElement.classList.add('touch');
-  }
 })(window, document);

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

@@ -73,6 +73,20 @@
 
 .search_categories {
   grid-area: categories;
+
+  .help {
+    display: none;
+  }
+
+  &:hover .help {
+    display: block;
+    position: absolute;
+    background: var(--color-base-background);
+    padding: 1rem 0.6rem 0.6rem 0;
+    z-index: 1000;
+    width: 100%;
+    left: -0.1rem;
+  }
 }
 
 .search_box {
@@ -200,26 +214,26 @@
       margin-top: 2px;
     }
   }
+}
 
-  html.touch {
-    #main_index,
-    #main_results {
-      #categories_container {
-        width: max-content;
+@media screen and (max-width: @tablet) and (hover: none) {
+  #main_index,
+  #main_results {
+    #categories_container {
+      width: max-content;
 
-        .category {
-          display: inline-block;
-          width: auto;
-        }
+      .category {
+        display: inline-block;
+        width: auto;
       }
+    }
 
-      #categories {
-        width: 100%;
-        .ltr-text-align-left();
-        overflow-x: scroll;
-        overflow-y: hidden;
-        -webkit-overflow-scrolling: touch;
-      }
+    #categories {
+      width: 100%;
+      .ltr-text-align-left();
+      overflow-x: scroll;
+      overflow-y: hidden;
+      -webkit-overflow-scrolling: touch;
     }
   }
 }
@@ -262,8 +276,8 @@
   }
 
   .category {
-    display: block;
-    width: 100%;
+    display: inline-block;
+    width: auto;
     margin: 0;
 
     label {

searx/templates/simple/categories.html

@@ -13,7 +13,6 @@
 }  -%}
 <div id="categories" class="search_categories">{{- '' -}}
     <div id="categories_container">
-        {%- if display_tooltip %}<div class="help">{{ _('Click on the magnifier to perform search') }}</div>{% endif -%}
         {%- for category in categories_as_tabs -%}
         <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(' ', '_') }}" class="tooltips">
@@ -22,5 +21,6 @@
             </label>
         </div>
         {%- endfor -%}
+        {%- if display_tooltip %}<div class="help">{{ _('Click on the magnifier to perform search') }}</div>{% endif -%}
     </div>{{- '' -}}
 </div>