[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

1 files changed, 7 insertions, 13 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