Fix search module not showing on desktop

Remove Bootstrap collapse classes that were hiding the search on
desktop. Use CSS media queries instead: hidden on mobile by default,
visible on desktop. JS toggles .show class on mobile via the
search-toggler button.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-07 21:10:21 -05:00
parent d6c4af1849
commit d318a365a0
3 changed files with 21 additions and 2 deletions

View File

@@ -451,7 +451,7 @@ $wa->useScript('user.js'); // js/user.js
<button class="search-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#headerSearchCollapse" aria-controls="headerSearchCollapse" aria-expanded="false" aria-label="<?php echo Text::_('JSEARCH_FILTER_SUBMIT'); ?>"> <button class="search-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#headerSearchCollapse" aria-controls="headerSearchCollapse" aria-expanded="false" aria-label="<?php echo Text::_('JSEARCH_FILTER_SUBMIT'); ?>">
<span class="fa-solid fa-magnifying-glass" aria-hidden="true"></span> <span class="fa-solid fa-magnifying-glass" aria-hidden="true"></span>
</button> </button>
<div class="container-search collapse d-lg-block" id="headerSearchCollapse"> <div class="container-search" id="headerSearchCollapse">
<jdoc:include type="modules" name="search" style="none" /> <jdoc:include type="modules" name="search" style="none" />
</div> </div>
<?php endif; ?> <?php endif; ?>

View File

@@ -18672,10 +18672,14 @@ nav[data-toggle=toc] .nav-link.active+ul{
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.container-header .container-search.collapse:not(.show) { .container-header .container-search {
display: none; display: none;
} }
.container-header .container-search.show {
display: block;
}
.mod-finder__search.input-group { .mod-finder__search.input-group {
max-width: 100%; max-width: 100%;
} }

View File

@@ -539,6 +539,20 @@
}); });
} }
/**
* Toggle search on mobile via .show class
*/
function initSearchToggle() {
var btn = doc.querySelector(".search-toggler");
var target = doc.getElementById("headerSearchCollapse");
if (!btn || !target) return;
btn.addEventListener("click", function () {
var isOpen = target.classList.toggle("show");
btn.setAttribute("aria-expanded", isOpen ? "true" : "false");
});
}
/** /**
* Run all template JS initializations * Run all template JS initializations
*/ */
@@ -563,6 +577,7 @@
// Init features // Init features
initDrawers(); initDrawers();
initBackTop(); initBackTop();
initSearchToggle();
initSidebarAccordion(); initSidebarAccordion();
} }