Spitfire/Search
Spitfire/Search
1
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

fixed cetered search

Browse source
This commit is contained in:
partisan 2024-10-21 13:52:56 +02:00
parent 9b92632cd6
commit b4256eab97
2 changed files with 25 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
static/css/style-search.css
View file

@ -116,13 +116,29 @@ body.menu-open {
color: var(--fg); color: var(--fg);
} }
/* Autocomplete Styles */ .wrapper-searching {
.autocomplete { border-bottom-left-radius: 0;
text-align: left; border-bottom-right-radius: 0;
width: 100%; /* Ensure it matches the input width */
} }
.wrapper.show .autocomplete { /* Autocomplete Styles */
.autocomplete {
display: none;
text-align: left;
width: 100%;
position: absolute;
left: -1px; /* this is so curesed */
top: 100%;
background-color: var(--search-bg-input);
border-bottom-left-radius: 22px;
border-bottom-right-radius: 22px;
border: 1px solid var(--search-bg-input-border);
border-top: none;
z-index: 999;
}
/* Show autocomplete when wrapper has 'wrapper-searching' class */
.wrapper-searching .autocomplete {
display: block; display: block;
} }

8
static/js/autocomplete.js
View file

@ -22,7 +22,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Function to render results // Function to render results
function renderSuggestions(results) { function renderSuggestions(results) {
if (!results || !results.length) { if (!results || !results.length) {
searchWrapper.classList.remove('show'); searchWrapper.classList.remove('wrapper-searching');
resultsWrapper.innerHTML = ''; resultsWrapper.innerHTML = '';
return; return;
} }
@ -33,7 +33,7 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
resultsWrapper.innerHTML = `<ul>${content}</ul>`; resultsWrapper.innerHTML = `<ul>${content}</ul>`;
searchWrapper.classList.add('show'); searchWrapper.classList.add('wrapper-searching');
} }
// Fetch suggestions when input is focused // Fetch suggestions when input is focused
@ -91,7 +91,7 @@ document.addEventListener('DOMContentLoaded', () => {
const query = item.textContent; const query = item.textContent;
searchInput.value = query; searchInput.value = query;
resultsWrapper.innerHTML = ''; resultsWrapper.innerHTML = '';
searchWrapper.classList.remove('show'); searchWrapper.classList.remove('wrapper-searching');
// Submit the form or navigate to search results // Submit the form or navigate to search results
const form = searchInput.closest('form'); const form = searchInput.closest('form');
@ -112,7 +112,7 @@ document.addEventListener('DOMContentLoaded', () => {
// Close the suggestions when clicking outside // Close the suggestions when clicking outside
document.addEventListener('click', (event) => { document.addEventListener('click', (event) => {
if (!searchWrapper.contains(event.target)) { if (!searchWrapper.contains(event.target)) {
searchWrapper.classList.remove('show'); searchWrapper.classList.remove('wrapper-searching');
resultsWrapper.innerHTML = ''; resultsWrapper.innerHTML = '';
currentIndex = -1; currentIndex = -1;
} }