From a80b5dc110ed1a2bd708cdb8c3d41a28cac79e00 Mon Sep 17 00:00:00 2001
From: MrPaulBlack <paul@paulgo.io>
Date: Thu, 11 Nov 2021 22:26:26 +0100
Subject: [PATCH] [fix] scaling of result page on small screens by @ZetaTom
* thanks to https://github.com/ZetaTom for the fix!
* set the width of the input#q element to 100% of the 1fr space of the grid layout
* change the viewport meta tag to th recommended value (see: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics)
* add a new @ultra-small-phone width of 20rem; when a device is smaller than that the search logo does not get displayed on the result page anymore
---
.../static/themes/simple/src/less/definitions.less | 1 +
searx/static/themes/simple/src/less/search.less | 14 +++++++++++++-
searx/templates/simple/base.html | 2 +-
3 files changed, 15 insertions(+), 2 deletions(-)
diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index 33b65a682..157cfeed1 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -220,6 +220,7 @@
@tablet: 80em;
@phone: 50em;
@small-phone: 35em;
+@ultra-small-phone: 20rem;
/// From style.less
@stacked-bar-chart: rgb(0, 0, 0);
diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less
index 794958594..fddd2b357 100644
--- a/searx/static/themes/simple/src/less/search.less
+++ b/searx/static/themes/simple/src/less/search.less
@@ -191,7 +191,7 @@
}
#q {
- width: auto !important;
+ width: 100%;
flex: 1;
}
@@ -220,6 +220,18 @@
}
}
+@media screen and (max-width: @ultra-small-phone) {
+ #search {
+ grid-template-areas:
+ "search search"
+ "categories categories";
+ }
+
+ #search_logo {
+ display: none;
+ }
+}
+
#categories {
margin: 0 10px 0 0;
.disable-user-select;
diff --git a/searx/templates/simple/base.html b/searx/templates/simple/base.html
index f6594041d..093b380f9 100644
--- a/searx/templates/simple/base.html
+++ b/searx/templates/simple/base.html
@@ -7,7 +7,7 @@
<meta name="generator" content="searxng/{{ searx_version }}">
<meta name="referrer" content="no-referrer">
<meta name="robots" content="noarchive">
- <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="True">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>{% block title %}{% endblock %}{{ instance_name }}</title>