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

[mod] simple theme: autocompletion doesn't use the style attribute.

Browse source 
close #352
This commit is contained in:
Alexandre Flament 2021-10-21 19:36:10 +02:00 • committed by Markus Heiser
parent 33e2599b82
commit 87d1106414
2 changed files with 19 additions and 9 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

@ -67,13 +67,10 @@
}, },
MinChars: 4, MinChars: 4,
Delay: 300, Delay: 300,
_Position:function() {
this.DOMResults.setAttribute("class", "autocomplete");
},
}, "#" + 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);

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

@ -2,10 +2,13 @@
.autocomplete { .autocomplete {
position: absolute; position: absolute;
width: 44.7rem;
margin-top: 2.4rem;
max-height: 0; max-height: 0;
overflow-y: hidden; overflow-y: hidden;
text-align: left; text-align: left;
.rounded-corners; border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
&:active, &:active,
&:focus, &:focus,
@ -24,7 +27,7 @@
> li { > li {
cursor: pointer; cursor: pointer;
padding: 8px 0 8px 8px; padding: 8px 0 8px 0.75rem;
&.active, &.active,
&:active, &:active,
@ -50,9 +53,15 @@
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); border: 1px solid var(--color-autocomplete-border);
border-top: none;
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
z-index: 100; z-index: 100000000;
li:first-child {
margin-top: 0.475rem;
border-top: 1px solid var(--color-autocomplete-border);
}
&:empty { &:empty {
display: none; display: none;
@ -62,7 +71,11 @@
@media screen and (max-width: @phone) { @media screen and (max-width: @phone) {
.autocomplete { .autocomplete {
position: absolute;
width: calc(100% - 0.5rem);
top: 2.9rem;
bottom: 0; bottom: 0;
margin-top: 0;
} }
.autocomplete > ul > li { .autocomplete > ul > li {