mirror of
https://github.com/searxng/searxng.git
synced 2025-09-02 16:28:33 +02:00
[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
This commit is contained in:
parent
b14ed494fb
commit
47dcf876ff
7 changed files with 82 additions and 70 deletions
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue