From 47dcf876ffbfdcbc37474f073f8df37a5c984df4 Mon Sep 17 00:00:00 2001 From: Monty Date: Wed, 9 Mar 2022 17:43:58 +0100 Subject: [PATCH] [simple theme] refactor search form * update search input form params; inspiried by whoogle * remove autofocus from result page input form (JS impl. as well as input param) -> autofocus on landing page still works only on desktop and tablet with JS impl. * update landing page margins on mobile * rework border and radius for search form to 0.8rem and outline * remove positioning from autocomplete JS lib and use CSS impl. * match search box and autocomplete width * rework search form to a google like design on mobile * fix settings icon display withg RTL on mobile on result page when search input is empty --- .../themes/simple/src/js/main/search.js | 20 ++--- .../themes/simple/src/less/autocomplete.less | 15 ++-- .../themes/simple/src/less/definitions.less | 2 +- .../static/themes/simple/src/less/index.less | 6 -- .../static/themes/simple/src/less/search.less | 89 +++++++++++-------- searx/templates/simple/search.html | 10 ++- searx/templates/simple/simple_search.html | 10 ++- 7 files changed, 82 insertions(+), 70 deletions(-) diff --git a/searx/static/themes/simple/src/js/main/search.js b/searx/static/themes/simple/src/js/main/search.js index 1fb0a7cb8..798c9b2d3 100644 --- a/searx/static/themes/simple/src/js/main/search.js +++ b/searx/static/themes/simple/src/js/main/search.js @@ -5,6 +5,8 @@ var firstFocus = true, qinput_id = "q", qinput; + const isMobile = window.matchMedia("only screen and (max-width: 50em)").matches; + function placeCursorAtEnd (element) { if (element.setSelectionRange) { var len = element.value.length; @@ -68,12 +70,7 @@ }, MinChars: 4, Delay: 300, - _Position: function () { - this.DOMResults.setAttribute("class", "autocomplete"); - this.DOMResults.style.top = (this.Input.offsetTop + this.Input.offsetHeight) + "px"; - this.DOMResults.style.left = this.Input.offsetLeft + "px"; - this.DOMResults.style.width = this.Input.clientWidth + "px"; - }, + _Position: function () {}, _Open: function () { var params = this; Array.prototype.forEach.call(this.DOMResults.getElementsByTagName("li"), function (li) { @@ -85,16 +82,13 @@ }); }, }, "#" + qinput_id); - - // hack, see : https://github.com/autocompletejs/autocomplete.js/issues/37 - w.addEventListener('resize', function () { - var event = new CustomEvent("position"); - qinput.dispatchEvent(event); - }); } qinput.addEventListener('focus', placeCursorAtEndOnce, false); - qinput.focus(); + + if (!isMobile) { + qinput.focus(); + } } // vanilla js version of search_on_category_select.js diff --git a/searx/static/themes/simple/src/less/autocomplete.less b/searx/static/themes/simple/src/less/autocomplete.less index a1a74480b..7c211fbb0 100644 --- a/searx/static/themes/simple/src/less/autocomplete.less +++ b/searx/static/themes/simple/src/less/autocomplete.less @@ -2,6 +2,7 @@ .autocomplete { position: absolute; + width: @search-width; max-height: 0; overflow-y: hidden; .ltr-text-align-left(); @@ -25,7 +26,7 @@ > li { cursor: pointer; - padding: 0.5rem; + padding: 0.5rem 1rem; &.active, &:active, @@ -51,9 +52,10 @@ background-color: var(--color-autocomplete-background); color: var(--color-autocomplete-font); border: 1px solid var(--color-autocomplete-border); - max-height: 500px; + max-height: 32rem; overflow-y: auto; z-index: 100; + margin-top: 3.2rem; &:empty { display: none; @@ -63,11 +65,10 @@ @media screen and (max-width: @phone) { .autocomplete { - bottom: 0; - } + width: 100%; - .autocomplete > ul > li { - border-bottom: 1px solid var(--color-result-top-border); - text-align: left; + > ul > li { + padding: 1rem; + } } } diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index 6e7dd4eb2..b21e91e90 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -242,7 +242,7 @@ @result-padding: 1rem; @results-image-row-height: 12rem; @results-image-row-height-phone: 6rem; -@search-width: 40rem; +@search-width: 44rem; // heigh of #search, see detail.less @search-height: 7.6rem; diff --git a/searx/static/themes/simple/src/less/index.less b/searx/static/themes/simple/src/less/index.less index b80d75c8c..8590d0c3b 100644 --- a/searx/static/themes/simple/src/less/index.less +++ b/searx/static/themes/simple/src/less/index.less @@ -49,9 +49,3 @@ margin-top: 6em; } } - -@media screen and (max-width: @phone) { - #main_index { - margin-top: 0; - } -} diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index 62fda55b7..ee06a74c4 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/searx/static/themes/simple/src/less/search.less @@ -89,10 +89,14 @@ } } -.search_box { - margin: 0; - padding: 0; +#search_view { grid-area: search; +} + +.search_box { + border: 1px solid var(--color-search-border); + border-radius: 0.8rem; + width: @search-width; display: inline-flex; flex-direction: row; white-space: nowrap; @@ -102,18 +106,14 @@ display: block; border-collapse: separate; box-sizing: border-box; - width: 1.8em; + width: 1.8rem; margin: 0; - padding: 8px 2px; + padding: 0.8rem 0.2rem; background: none repeat scroll 0 0 var(--color-search-background); - border-top: 1px solid var(--color-search-border); - border-bottom: 1px solid var(--color-search-border); - border-right: none; - border-left: none; - border-radius: 0; + border: none; outline: none; color: var(--color-search-font); - font-size: 16px; + font-size: 1.1rem; z-index: 10000; &:hover { @@ -131,27 +131,22 @@ html.no-js #clear_search.hide_if_nojs { #q, #send_search { - display: block !important; - border-collapse: separate; - box-sizing: border-box; + display: block; margin: 0; - padding: 10px; + padding: 0.8rem; background: none repeat scroll 0 0 var(--color-search-background); - border: 1px solid var(--color-search-border); - border-radius: 0; + border: none; outline: none; color: var(--color-search-font); - font-size: 16px; + font-size: 1.1rem; z-index: 2; } #q { - outline: medium none; - .ltr-padding-left(12px); + width: 100%; + .ltr-padding-left(1rem); .ltr-padding-right(0) !important; - .ltr-border-right(none); - width: @search-width; - .ltr-rounded-left-corners(10px); + .ltr-rounded-left-corners(0.8rem); } #q::-ms-clear, @@ -160,8 +155,7 @@ html.no-js #clear_search.hide_if_nojs { } #send_search { - .ltr-border-left(none); - .ltr-rounded-right-corners(10px); + .ltr-rounded-right-corners(0.8rem); &:hover { cursor: pointer; @@ -174,7 +168,6 @@ html.no-js #clear_search.hide_if_nojs { .no-js #send_search { width: auto !important; .ltr-border-left(1px solid var(--color-search-border)); - padding: 10px; } .search_filters { @@ -259,10 +252,9 @@ html.no-js #clear_search.hide_if_nojs { } .search_box { - // hack, should be 100% ? - width: 99%; + width: 98%; display: flex; - flex-direction: row; + margin: 0 auto; } #q { @@ -270,11 +262,6 @@ html.no-js #clear_search.hide_if_nojs { flex: 1; } - #main_results #q:placeholder-shown ~ #send_search { - margin-right: 2.6rem; - transition: margin-right 0.1s; // FIX RTL - } - .search_filters { margin: 0; } @@ -285,7 +272,7 @@ html.no-js #clear_search.hide_if_nojs { margin: 0; label { - padding: 0.8rem !important; + padding: 1rem !important; margin: 0 !important; svg { @@ -293,6 +280,38 @@ html.no-js #clear_search.hide_if_nojs { } } } + + #search_view:focus-within { + display: block; + background-color: var(--color-base-background); + position: absolute; + top: 0; + height: 100%; + width: 100%; + z-index: 10000; + + .search_box { + border-top: none; + border-left: none; + border-right: none; + width: 100%; + border-radius: 0; + + #send_search { + .ltr-margin-right(0) !important; // Delete when send_search button is disabled on mobile. + } + + * { + border: none; + border-radius: 0; + } + } + } + + #main_results #q:placeholder-shown ~ #send_search { + .ltr-margin-right(2.6rem); + transition: margin 0.1s; + } } @media screen and (max-width: @ultra-small-phone) { diff --git a/searx/templates/simple/search.html b/searx/templates/simple/search.html index a26af3e5d..90a296aeb 100644 --- a/searx/templates/simple/search.html +++ b/searx/templates/simple/search.html @@ -4,10 +4,12 @@ {% include '__common__/searxng-wordmark.min.svg' without context %} -
- - - +
+
+ + + +
{% set display_tooltip = true %} {% include 'simple/categories.html' %} diff --git a/searx/templates/simple/simple_search.html b/searx/templates/simple/simple_search.html index 218f70496..26d251304 100644 --- a/searx/templates/simple/simple_search.html +++ b/searx/templates/simple/simple_search.html @@ -1,9 +1,11 @@