From e435806505d58f3ad77223dcafee2f99ca427e00 Mon Sep 17 00:00:00 2001 From: Alexandre Flament Date: Sun, 27 Feb 2022 11:27:25 +0100 Subject: [PATCH] [fix] simple: detect touch screen using media query related to https://github.com/searxng/searxng/issues/928 --- .../themes/simple/src/js/head/00_init.js | 5 --- .../static/themes/simple/src/less/search.less | 36 +++++++++---------- 2 files changed, 18 insertions(+), 23 deletions(-) diff --git a/searx/static/themes/simple/src/js/head/00_init.js b/searx/static/themes/simple/src/js/head/00_init.js index 073371ce6..acd437f39 100644 --- a/searx/static/themes/simple/src/js/head/00_init.js +++ b/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); \ No newline at end of file diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index 3e18e0b12..dff7bd612 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/searx/static/themes/simple/src/less/search.less @@ -200,26 +200,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 +262,8 @@ } .category { - display: block; - width: 100%; + display: inline-block; + width: auto; margin: 0; label {