diff --git a/searx/static/themes/simple/src/js/main/search.js b/searx/static/themes/simple/src/js/main/search.js index 1fb0a7cb8..970dc92bb 100644 --- a/searx/static/themes/simple/src/js/main/search.js +++ b/searx/static/themes/simple/src/js/main/search.js @@ -70,9 +70,6 @@ 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"; }, _Open: function () { var params = this; @@ -85,12 +82,6 @@ }); }, }, "#" + 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); diff --git a/searx/static/themes/simple/src/less/autocomplete.less b/searx/static/themes/simple/src/less/autocomplete.less index a1a74480b..32b0b82f6 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, @@ -50,10 +51,11 @@ display: block; background-color: var(--color-autocomplete-background); color: var(--color-autocomplete-font); - border: 1px solid var(--color-autocomplete-border); + outline: 1px solid var(--color-autocomplete-border); max-height: 500px; overflow-y: auto; z-index: 100; + margin-top: 3rem; &:empty { display: none; @@ -63,6 +65,7 @@ @media screen and (max-width: @phone) { .autocomplete { + width: calc(100% - 0.5rem); // does not work yet -> take up entire screen bottom: 0; } 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/search.less b/searx/static/themes/simple/src/less/search.less index 62fda55b7..76a410a64 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/searx/static/themes/simple/src/less/search.less @@ -90,12 +90,13 @@ } .search_box { - margin: 0; - padding: 0; + width: @search-width; grid-area: search; display: inline-flex; flex-direction: row; white-space: nowrap; + outline: 1px solid var(--color-search-border); + border-radius: 0.7rem; } #clear_search { @@ -104,16 +105,12 @@ box-sizing: border-box; width: 1.8em; margin: 0; - padding: 8px 2px; + padding: 0.7rem 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 +128,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.7rem; 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.7rem); } #q::-ms-clear, @@ -160,8 +152,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.7rem); &:hover { cursor: pointer;