diff --git a/frontend/src/Components/Autocomplete.svelte b/frontend/src/Components/Autocomplete.svelte
index df37a557..1729fc77 100644
--- a/frontend/src/Components/Autocomplete.svelte
+++ b/frontend/src/Components/Autocomplete.svelte
@@ -17,6 +17,7 @@
let selected = $state(null);
let candidates = $state([]);
let timer = null;
+ let list_elem;
async function dummyGetCandidates(text){
console.warn(`getCandidates(${text}) not overridden!`);
@@ -58,9 +59,8 @@
}
async function fetchCandidates(){
- candidates = await getCandidates(candidate.display);
+ candidates = candidate.display ? await getCandidates(candidate.display) : [];
selected = null;
- if (selected>candidates.length) selected = candidates.length;
}
async function onkeyup(ev){
@@ -69,12 +69,14 @@
ev.preventDefault();
selected = selected == null ? 0: selected +1;
if (selected >= candidates.length) selected = 0;
+ scrollTo(selected);
return false;
}
if (ev.key == 'ArrowUp'){
ev.preventDefault();
selected = selected == null ? candidates.length -1 : selected -1;
if (selected < 0) selected = candidates.length -1;
+ scrollTo(selected);
return false;
}
if (ev.key == 'Enter'|| ev.key == 'Tab'){
@@ -113,6 +115,11 @@
onSelect(candidate);
}
+
+ function scrollTo(index){
+ let list_elements = list_elem.children;
+ if (list_elements) list_elements[index].scrollIntoView({block:'center'});
+ }
-
-
+
+
{#if candidates && candidates.length > 0}
-
+
{#each candidates as candidate,i}
- - selected = i} ondblclick={e => select(i)}>{candidate.display}
+ - select(i)} ondblclick={e => select(i)}>{candidate.display}
{/each}
{/if}
diff --git a/web/src/main/resources/web/css/bloodshed.css b/web/src/main/resources/web/css/bloodshed.css
index 9af28530..ef977dcd 100644
--- a/web/src/main/resources/web/css/bloodshed.css
+++ b/web/src/main/resources/web/css/bloodshed.css
@@ -542,7 +542,8 @@ select.autocomplete{
}
@media screen and (max-width: 600px) {
- .grid2{
+ .grid2,
+ .grid3{
display: grid;
grid-template-columns: auto;
}
@@ -582,6 +583,10 @@ select.autocomplete{
#app nav.expanded .timetracking{
grid-column-end: span 2;
}
+
+ .autocomplete .suggestions > *{
+ font-size: 1.5em;
+ }
}
fieldset.vcard{
diff --git a/web/src/main/resources/web/css/default.css b/web/src/main/resources/web/css/default.css
index 65a92884..0f5c9bca 100644
--- a/web/src/main/resources/web/css/default.css
+++ b/web/src/main/resources/web/css/default.css
@@ -711,6 +711,10 @@ select.autocomplete{
#app nav.expanded .timetracking{
grid-column-end: span 2;
}
+
+ .autocomplete .suggestions > *{
+ font-size: 1.5em;
+ }
}
fieldset.vcard{
diff --git a/web/src/main/resources/web/css/winter.css b/web/src/main/resources/web/css/winter.css
index ee8c9285..a8b8d7b5 100644
--- a/web/src/main/resources/web/css/winter.css
+++ b/web/src/main/resources/web/css/winter.css
@@ -701,6 +701,10 @@ select.autocomplete{
#app nav.expanded .timetracking{
grid-column-end: span 2;
}
+
+ .autocomplete .suggestions > *{
+ font-size: 1.5em;
+ }
}
fieldset.vcard{