diff options
| author | MrPaulBlack <paul@paulgo.io> | 2021-11-11 22:26:26 +0100 |
|---|---|---|
| committer | MrPaulBlack <paul@paulgo.io> | 2021-11-11 22:26:26 +0100 |
| commit | a80b5dc110ed1a2bd708cdb8c3d41a28cac79e00 (patch) | |
| tree | 19fa948b7ff05dfe071d0760ef8b3674fb5c073d /searx | |
| parent | 90acb342d32b1ce890402acbc24cc9a5793fddc6 (diff) | |
| download | searxng-a80b5dc110ed1a2bd708cdb8c3d41a28cac79e00.tar.gz searxng-a80b5dc110ed1a2bd708cdb8c3d41a28cac79e00.zip | |
[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
Diffstat (limited to 'searx')
| -rw-r--r-- | searx/static/themes/simple/src/less/definitions.less | 1 | ||||
| -rw-r--r-- | searx/static/themes/simple/src/less/search.less | 14 | ||||
| -rw-r--r-- | 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> |