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:
@@ -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; ?>
|
||||||
|
|||||||
@@ -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%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user