jebus/enviPy-bayer
1
0
Fork 0
forked from enviPath/enviPy
Code Issues Pull Requests Actions Releases Activity

mrg

Browse Source
This commit is contained in:
Tim Lorsbach
2025-11-12 10:27:17 +01:00
parent 34aed2c7aa 12a20756d6
commit 53fc91acf5
10 changed files with 137 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
templates/modals/search_modal.html
View File

@ -2,7 +2,7 @@
<dialog id="search_modal" class="modal @max-sm:modal-top justify-center">
<div class="modal-box h-full w-lvw p-1 sm:h-8/12 sm:w-[85vw] sm:max-w-5xl">
<!-- Search Input and Mode Selector -->
<div class="form-control mb-4 w-full flex-shrink-0">
<div class="form-control mb-4 w-full shrink-0">
<div class="join m-0 w-full items-center p-3">
<label class="input join-item input-ghost grow">
<svg
@ -37,7 +37,7 @@
tabindex="0"
id="modal_mode_button"
popovertarget="search_dropdown_menu"
style="anchor-name:--anchor-1"
style="anchor-name:--1"
class="btn join-item btn-ghost"
>
Text
@ -57,10 +57,10 @@
</button>
<ul
tabindex="0"
class="dropdown dropdown-end menu bg-base-200 rounded-box z-[100] w-64 p-2 shadow-lg"
class="dropdown dropdown-end menu bg-base-200 rounded-box w-64 p-2 shadow-lg"
popover
id="search_dropdown_menu"
style="position-anchor:--anchor-1"
style="position-anchor:--anchor-2"
>
<li class="menu-title">Text</li>
<li>
@ -140,18 +140,18 @@
</div>
<!-- Package Selector with Pills -->
<div class="form-control mb-4 flex-shrink-0">
<div class="form-control mb-4 shrink-0">
<!-- Pills Container -->
<div
id="modal_package_pills_container"
class="border-base-300 m-3 flex min-h-[3rem] flex-wrap items-center gap-2 rounded-lg border-2 border-dashed p-3"
class="border-base-300 m-3 flex min-h-12 flex-wrap items-center gap-2 rounded-lg border-2 border-dashed p-3"
>
<!-- Pills will be added here dynamically -->
</div>
<!-- Package Dropdown Menu -->
<ul
class="dropdown dropdown-end menu bg-base-200 rounded-box z-[100] max-h-96 w-80 overflow-y-auto p-2 shadow-lg"
class="dropdown dropdown-center menu bg-base-200 rounded-box max-h-96 w-80 overflow-y-auto p-2 shadow-lg"
popover
id="package_dropdown_menu"
style="position-anchor:--anchor-packages"
@ -241,7 +241,7 @@
</div>
<!-- Loading Indicator -->
<div id="search_loading" class="hidden flex-shrink-0 justify-center py-8">
<div id="search_loading" class="hidden shrink-0 justify-center py-8">
<span class="loading loading-spinner loading-lg text-primary"></span>
</div>
@ -490,6 +490,26 @@
observer.observe(modal, { attributes: true });
// Close modal when clicking outside (on the backdrop)
// According to DaisyUI docs: https://daisyui.com/components/modal/
// The backdrop form with method="dialog" should handle closing automatically when its button is clicked.
// We also handle clicks directly on the dialog element (backdrop area) or the backdrop form.
modal.addEventListener("click", function (event) {
const backdrop = modal.querySelector(".modal-backdrop");
const modalBox = modal.querySelector(".modal-box");
// Close if clicking directly on the dialog element (backdrop area)
// or on the backdrop form (but ensure we're not clicking on modal-box content)
if (
event.target === modal ||
(backdrop &&
(event.target === backdrop || backdrop.contains(event.target)) &&
!modalBox.contains(event.target))
) {
modal.close();
}
});
// Clear results when modal closes
modal.addEventListener("close", function () {
resultsDiv.innerHTML = "";