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, Delay: 300,
_Position: function () { _Position: function () {
this.DOMResults.setAttribute("class", "autocomplete"); 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 () { _Open: function () {
var params = this; var params = this;
@ -85,12 +82,6 @@
}); });
}, },
}, "#" + qinput_id); }, "#" + 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.addEventListener('focus', placeCursorAtEndOnce, false);

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

@ -2,6 +2,7 @@
.autocomplete { .autocomplete {
position: absolute; position: absolute;
width: @search-width;
max-height: 0; max-height: 0;
overflow-y: hidden; overflow-y: hidden;
.ltr-text-align-left(); .ltr-text-align-left();
@ -25,7 +26,7 @@
> li { > li {
cursor: pointer; cursor: pointer;
padding: 0.5rem; padding: 0.5rem 1rem;
&.active, &.active,
&:active, &:active,
@ -50,10 +51,11 @@
display: block; display: block;
background-color: var(--color-autocomplete-background); background-color: var(--color-autocomplete-background);
color: var(--color-autocomplete-font); color: var(--color-autocomplete-font);
border: 1px solid var(--color-autocomplete-border); outline: 1px solid var(--color-autocomplete-border);
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
z-index: 100; z-index: 100;
margin-top: 3rem;
&:empty { &:empty {
display: none; display: none;
@ -63,6 +65,7 @@
@media screen and (max-width: @phone) { @media screen and (max-width: @phone) {
.autocomplete { .autocomplete {
width: calc(100% - 0.5rem); // does not work yet -> take up entire screen
bottom: 0; bottom: 0;
} }

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

@ -242,7 +242,7 @@
@result-padding: 1rem; @result-padding: 1rem;
@results-image-row-height: 12rem; @results-image-row-height: 12rem;
@results-image-row-height-phone: 6rem; @results-image-row-height-phone: 6rem;
@search-width: 40rem; @search-width: 44rem;
// heigh of #search, see detail.less // heigh of #search, see detail.less
@search-height: 7.6rem; @search-height: 7.6rem;

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

@ -90,12 +90,13 @@
} }
.search_box { .search_box {
margin: 0; width: @search-width;
padding: 0;
grid-area: search; grid-area: search;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
white-space: nowrap; white-space: nowrap;
outline: 1px solid var(--color-search-border);
border-radius: 0.7rem;
} }
#clear_search { #clear_search {
@ -104,16 +105,12 @@
box-sizing: border-box; box-sizing: border-box;
width: 1.8em; width: 1.8em;
margin: 0; margin: 0;
padding: 8px 2px; padding: 0.7rem 0.2rem;
background: none repeat scroll 0 0 var(--color-search-background); background: none repeat scroll 0 0 var(--color-search-background);
border-top: 1px solid var(--color-search-border); border: none;
border-bottom: 1px solid var(--color-search-border);
border-right: none;
border-left: none;
border-radius: 0;
outline: none; outline: none;
color: var(--color-search-font); color: var(--color-search-font);
font-size: 16px; font-size: 1.1rem;
z-index: 10000; z-index: 10000;
&:hover { &:hover {
@ -131,27 +128,22 @@ html.no-js #clear_search.hide_if_nojs {
#q, #q,
#send_search { #send_search {
display: block !important; display: block;
border-collapse: separate;
box-sizing: border-box;
margin: 0; margin: 0;
padding: 10px; padding: 0.7rem;
background: none repeat scroll 0 0 var(--color-search-background); background: none repeat scroll 0 0 var(--color-search-background);
border: 1px solid var(--color-search-border); border: none;
border-radius: 0;
outline: none; outline: none;
color: var(--color-search-font); color: var(--color-search-font);
font-size: 16px; font-size: 1.1rem;
z-index: 2; z-index: 2;
} }
#q { #q {
outline: medium none; width: 100%;
.ltr-padding-left(12px); .ltr-padding-left(1rem);
.ltr-padding-right(0) !important; .ltr-padding-right(0) !important;
.ltr-border-right(none); .ltr-rounded-left-corners(0.7rem);
width: @search-width;
.ltr-rounded-left-corners(10px);
} }
#q::-ms-clear, #q::-ms-clear,
@ -160,8 +152,7 @@ html.no-js #clear_search.hide_if_nojs {
} }
#send_search { #send_search {
.ltr-border-left(none); .ltr-rounded-right-corners(0.7rem);
.ltr-rounded-right-corners(10px);
&:hover { &:hover {
cursor: pointer; cursor: pointer;