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

34
static/assets/index.css
View File

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

4
static/assets/index.js
View File

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