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

dynamically moving buttons for main page

Browse source
This commit is contained in:
partisan 2024-10-21 15:03:23 +02:00
parent b4256eab97
commit 01e3ae9f78
2 changed files with 42 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -99,6 +99,8 @@ body.menu-open {
max-width: 600px;
overflow: visible;
border: 1px solid var(--search-bg-input-border);
display: flex;
flex-direction: column;
}
.wrapper input {
@ -133,8 +135,7 @@ body.menu-open {
border-bottom-left-radius: 22px;
border-bottom-right-radius: 22px;
border: 1px solid var(--search-bg-input-border);
border-top: none;
z-index: 999;
border-top: none; /* No top border to avoid double borders with the input */
}
/* Show autocomplete when wrapper has 'wrapper-searching' class */

40
templates/search.html
View file

@ -126,7 +126,7 @@
</g>
</svg>
</div>
<div class="wrapper">
<div class="wrapper custom-search-page">
<input type="text" name="q" autofocus id="search-input"/>
<button id="search-wrapper-ico" class="material-icons-round" name="t" value="web" type="submit">search</button>
<div class="autocomplete">
@ -170,6 +170,44 @@
</form>
<!-- JavaScript Functions -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const customSearchWrapper = document.querySelector('.wrapper.custom-search-page');
const searchTypeIcons = document.querySelector('.search-type-icons');
const resultsWrapper = document.querySelector('.wrapper.custom-search-page .autocomplete');
// Check if we are on the correct page
if (customSearchWrapper && resultsWrapper) {
// Function to move buttons without affecting the page flow
function adjustSearchIconsPosition() {
const autocompleteHeight = resultsWrapper.offsetHeight;
if (autocompleteHeight > 0) {
// Use transform to move the buttons down
searchTypeIcons.style.transform = `translateY(${autocompleteHeight + 20}px)`;
} else {
// Reset the buttons position when no suggestions
searchTypeIcons.style.transform = 'translateY(0)';
}
}
// Observer to detect changes in the autocomplete content and adjust position
const observer = new MutationObserver(() => {
adjustSearchIconsPosition();
});
// Start observing the autocomplete for content changes
observer.observe(resultsWrapper, { childList: true, subtree: true });
// Optionally adjust when window resizes (for responsive changes)
window.addEventListener('resize', adjustSearchIconsPosition);
// Adjust initially on load in case suggestions are already present
adjustSearchIconsPosition();
}
});
</script>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";