zaclys/searxng
1
0
Fork 1
mirror of https://github.com/searxng/searxng synced 2024-01-01 19:24:07 +01:00
Code Issues Projects Releases Packages Wiki Activity

[WIP] refactor search form

Browse source 
* fix autocomplete position with pure CSS
* refactor search form with outline to set actual width
This commit is contained in:
mrpaulblack 2022-01-19 11:26:09 +01:00
parent 728b2b5796
commit f3373d557a
4 changed files with 20 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
searx/static/themes/simple/src/js/main/search.js
View file

@ -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);

7
searx/static/themes/simple/src/less/autocomplete.less
View file

@ -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;
}

2
searx/static/themes/simple/src/less/definitions.less
View file

@ -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;

37
searx/static/themes/simple/src/less/search.less
View file

@ -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;