fix: search result background and scrolling

Fix #3148
This commit is contained in:
George Cushen 2025-02-12 22:50:06 +00:00
commit 1dbdd068d6
5 changed files with 70 additions and 23 deletions

File diff suppressed because one or more lines are too long

View file

@ -111,7 +111,7 @@
</nav>
{{ if $show_search }}
<div id="search" class="hidden p-3"></div>
{{- partial "components/search-modal.html" . -}}
{{ end }}
<script>

View file

@ -137,9 +137,9 @@
{{ $show_search := site.Params.header.navbar.show_search | default false }}
{{ with $show_search }}
<button
aria-label="search"
aria-label="toggle search"
class="text-black hover:text-primary inline-block px-3 text-xl dark:text-white"
id="search_toggle">
data-search-toggle>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512" fill="currentColor"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
</button>
{{ end }}
@ -195,5 +195,5 @@
</header>
{{ if $show_search }}
<div id="search" class="hidden p-3"></div>
{{- partial "components/search-modal.html" . -}}
{{ end }}

View file

@ -0,0 +1,20 @@
<div
id="search-wrapper"
class="hidden fixed inset-0 z-50 bg-white dark:bg-gray-900 flex flex-col overflow-hidden"
>
<div class="flex justify-end p-3">
<button
aria-label="search"
class="search-close text-black hover:text-primary dark:text-white"
data-search-toggle
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
<div id="search" class="flex-1 overflow-y-auto p-3">
<!-- Search content displayed here -->
</div>
</div>

View file

@ -26,40 +26,67 @@
--pagefind-ui-border: #152028;
--pagefind-ui-tag: #152028;
}
/* Make search modal close button match size of search input */
.search-close > svg {
height: calc(64px * var(--pagefind-ui-scale));
width: calc(64px * var(--pagefind-ui-scale));
}
</style>
<script>
// Initialize search wrapper element globally
let searchWrapper = null;
window.addEventListener('DOMContentLoaded', (event) => {
// Initialize PagefindUI
new PagefindUI({
element: "#search",
showSubResults: true,
baseUrl: window.hbb.pagefind.baseUrl,
bundlePath: window.hbb.pagefind.baseUrl + "pagefind/",
});
// Get search wrapper element
searchWrapper = document.getElementById('search-wrapper');
// Add click handlers to triggers
let triggers = document.querySelectorAll('[data-search-toggle]');
triggers.forEach(trigger =>
trigger.addEventListener('click', handleSearchToggle)
);
});
document.addEventListener('DOMContentLoaded', () => {
let element = document.getElementById('search');
let trigger = document.getElementById('search_toggle');
if (trigger) {
trigger.addEventListener('click', () => {
element.classList.toggle('hidden');
element.querySelector("input").value = ""
element.querySelector("input").focus()
function handleSearchToggle(event) {
if (!searchWrapper) return;
if (!element.classList.contains('hidden')) {
let clear_trigger = document.querySelector('.pagefind-ui__search-clear');
const isHidden = searchWrapper.classList.contains('hidden');
searchWrapper.classList.toggle('hidden');
document.body.style.overflow = isHidden ? 'hidden' : '';
if (clear_trigger && !clear_trigger.hasAttribute('listenerOnClick')) {
clear_trigger.setAttribute('listenerOnClick', 'true');
const searchInput = searchWrapper.querySelector("input");
if (searchInput) {
searchInput.value = "";
searchInput.focus();
}
clear_trigger.addEventListener('click', () => {
element.classList.toggle('hidden');
});
}
}
if (!searchWrapper.classList.contains('hidden')) {
let clearTrigger = document.querySelector('.pagefind-ui__search-clear');
});
if (clearTrigger && !clearTrigger.hasAttribute('listenerOnClick')) {
clearTrigger.setAttribute('listenerOnClick', 'true');
clearTrigger.addEventListener('click', () => {
searchInput.focus();
});
}
}
}
// Add keyboard shortcut to close search modal with Escape key
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape' && searchWrapper && !searchWrapper.classList.contains('hidden')) {
searchWrapper.classList.add('hidden');
}
});
</script>