Batyka/soundcloak
1
0
Fork 0
mirror of https://git.maid.zone/stuff/soundcloak.git synced 2025-12-10 13:49:39 +05:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 💄 tweak search suggestion appearance and make them submit on click

Browse Source
This commit is contained in:
jonas
2025-02-19 23:33:17 +01:00
parent 203ad99972
commit caa7ab56d6
2 changed files with 31 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
static/assets/index.css
View File

@@ -1,19 +1,37 @@
#search-suggestions { #search-suggestions {
list-style: none; display: flex;
position: absolute; position: absolute;
background-color: var(--secondary); flex-direction: column;
margin: 0; margin: 0;
padding: 1rem; background-color: var(--secondary);
padding-bottom: 0; padding: .5rem;
/* god damn this shit i hate webdev */
width: -moz-available; width: -moz-available;
width: -webkit-fill-available; width: -webkit-fill-available;
list-style: none;
}
#search-suggestions > ul {
display: flex;
position: absolute;
gap: 1rem;
margin: 0;
background-color: var(--secondary);
padding: 1rem;
width: -moz-available;
width: -webkit-fill-available;
list-style: none;
} }
#search-suggestions > li { #search-suggestions > li {
padding-bottom: 1rem;
}
#search-suggestions > li:hover {
cursor: pointer; cursor: pointer;
} padding: .5rem;
&:hover {
background-color: var(--0);
}
&::before {
margin-right: .5rem;
content: "🔎 ";
}
}

4
static/assets/index.js
View File

@@ -1,5 +1,6 @@
var searchSuggestions = document.getElementById('search-suggestions'); var searchSuggestions = document.getElementById('search-suggestions');
var input = document.getElementById('q'); var input = document.getElementById('q');
var form = document.querySelector('form[action="/search"]');
var timeout; var timeout;
function getSuggestions() { function getSuggestions() {
@@ -26,13 +27,14 @@ function getSuggestions() {
e.onclick = function () { e.onclick = function () {
input.value = this.textContent; input.value = this.textContent;
searchSuggestions.style.display = 'none'; searchSuggestions.style.display = 'none';
form.submit();
} }
cloned.appendChild(e); cloned.appendChild(e);
} }
searchSuggestions.parentNode.replaceChild(cloned, searchSuggestions); searchSuggestions.parentNode.replaceChild(cloned, searchSuggestions);
searchSuggestions = cloned; searchSuggestions = cloned;
searchSuggestions.style.display = 'block'; searchSuggestions.style.display = 'flex';
} catch { } catch {
searchSuggestions.style.display = 'none'; searchSuggestions.style.display = 'none';
} }