diff --git a/api/src/modules/docs/header-builder.service.ts b/api/src/modules/docs/header-builder.service.ts index 4be563b..06f7e11 100644 --- a/api/src/modules/docs/header-builder.service.ts +++ b/api/src/modules/docs/header-builder.service.ts @@ -626,8 +626,6 @@ class HeaderBuilderService {
- ${mobileLinks} -
diff --git a/mkdocs/site/test/index.html b/mkdocs/site/test/index.html index 70a0ac4..da48b6f 100644 --- a/mkdocs/site/test/index.html +++ b/mkdocs/site/test/index.html @@ -257,6 +257,19 @@
+ + + +
homeHome sendCampaigns placeMap @@ -290,19 +303,6 @@ languageWebsite menu_bookDocs
- - - -
login Sign In @@ -440,6 +440,7 @@ // Close custom drawer when search label is clicked on mobile + auto-focus input document.querySelectorAll('label[for="__search"]').forEach(function(el) { el.addEventListener('click', function() { + if (el.classList.contains('md-search__overlay')) return; // overlay has its own handler closeDrawer(); setTimeout(function() { var input = document.querySelector('.md-search__input'); @@ -447,51 +448,154 @@ }, 150); }); }); - // Search activation: mirror checkbox state as a body class for CSS targeting. - // On desktop, Material's search input is always visible (overflow from collapsed - // header). Typing directly into it triggers the search worker but never checks - // the __search checkbox, so the results panel stays hidden. We fix this by - // checking the checkbox on input focus/input events. - var searchToggle = document.getElementById('__search'); - if (searchToggle) { - function syncSearchClass() { - document.body.classList.toggle('cm-search-active', searchToggle.checked); + // Search activation: Material may open search via checkbox OR by focusing the + // input directly (varies by version). Detect both and mirror as body class. + // NOTE: search DOM elements render AFTER the announce block in the template, + // so we must defer element queries until DOMContentLoaded. + var searchToggle = null; + var searchInput = null; + // Apply search layout inline styles (CSS-in-stylesheet is unreliable due to + // cross-origin Material stylesheets overriding !important rules) + function applySearchLayout(active) { + var inner = document.querySelector('.md-search__inner'); + var output = document.querySelector('.md-search__output'); + var scrollwrap = document.querySelector('.md-search__scrollwrap'); + if (!inner) return; + var isDesktop = window.matchMedia('(min-width: 60em)').matches; + if (active) { + inner.style.setProperty('display', 'flex', 'important'); + inner.style.setProperty('flex-direction', 'column', 'important'); + inner.style.setProperty('overflow', 'hidden', 'important'); + // Firefox needs explicit height (not just max-height) for flex children to grow + if (isDesktop) { + inner.style.setProperty('height', 'calc(100vh - 64px)', 'important'); + } + if (output) { + output.style.setProperty('position', 'relative', 'important'); + output.style.setProperty('flex', '1 1 0px', 'important'); + output.style.setProperty('min-height', '0', 'important'); + output.style.setProperty('display', 'flex', 'important'); + output.style.setProperty('flex-direction', 'column', 'important'); + output.style.setProperty('overflow', 'hidden', 'important'); + output.style.setProperty('width', '100%', 'important'); + } + if (scrollwrap) { + scrollwrap.style.setProperty('max-height', 'none', 'important'); + scrollwrap.style.setProperty('flex', '1 1 0px', 'important'); + scrollwrap.style.setProperty('min-height', '0', 'important'); + scrollwrap.style.setProperty('overflow-y', 'auto', 'important'); + } + // Force search result elements visible + ensure proper stacking (Firefox) + var resultList = document.querySelector('.md-search-result__list'); + if (resultList) { + resultList.style.setProperty('display', 'block', 'important'); + resultList.style.setProperty('visibility', 'visible', 'important'); + resultList.style.setProperty('opacity', '1', 'important'); + resultList.style.setProperty('max-height', 'none', 'important'); + resultList.style.setProperty('overflow', 'visible', 'important'); + resultList.style.setProperty('color', 'var(--md-default-fg-color)', 'important'); + } + var resultContainer = document.querySelector('.md-search-result'); + if (resultContainer) { + resultContainer.style.setProperty('display', 'block', 'important'); + resultContainer.style.setProperty('visibility', 'visible', 'important'); + resultContainer.style.setProperty('opacity', '1', 'important'); + } + // Ensure scrollwrap has z-index above overlay + if (scrollwrap) { + scrollwrap.style.setProperty('position', 'relative', 'important'); + scrollwrap.style.setProperty('z-index', '1', 'important'); + scrollwrap.style.setProperty('background', 'var(--md-default-bg-color)', 'important'); + } + } else { + inner.style.removeProperty('display'); + inner.style.removeProperty('flex-direction'); + inner.style.removeProperty('overflow'); + inner.style.removeProperty('height'); + if (output) { + output.style.removeProperty('position'); + output.style.removeProperty('flex'); + output.style.removeProperty('min-height'); + output.style.removeProperty('display'); + output.style.removeProperty('flex-direction'); + output.style.removeProperty('overflow'); + output.style.removeProperty('width'); + } + if (scrollwrap) { + scrollwrap.style.removeProperty('max-height'); + scrollwrap.style.removeProperty('flex'); + scrollwrap.style.removeProperty('min-height'); + scrollwrap.style.removeProperty('overflow-y'); + scrollwrap.style.removeProperty('position'); + scrollwrap.style.removeProperty('z-index'); + scrollwrap.style.removeProperty('background'); + } + var resultList = document.querySelector('.md-search-result__list'); + if (resultList) resultList.removeAttribute('style'); + var resultContainer = document.querySelector('.md-search-result'); + if (resultContainer) resultContainer.removeAttribute('style'); } - searchToggle.addEventListener('change', syncSearchClass); - syncSearchClass(); - // Activate search when the Material input is focused or typed into directly. - // Uses event delegation because the search input is rendered after this - // script (announce block runs before header block). - document.addEventListener('focusin', function(e) { - if (e.target && e.target.classList && e.target.classList.contains('md-search__input')) { - if (!searchToggle.checked) { - searchToggle.checked = true; - searchToggle.dispatchEvent(new Event('change')); - } - } - }); - document.addEventListener('input', function(e) { - if (e.target && e.target.classList && e.target.classList.contains('md-search__input')) { - if (!searchToggle.checked) { - searchToggle.checked = true; - searchToggle.dispatchEvent(new Event('change')); - } - } - }); - // Click-outside to dismiss search - document.addEventListener('click', function(e) { - if (!searchToggle.checked) return; - var panel = document.querySelector('.md-search__inner'); - if (panel && panel.contains(e.target)) return; - if (e.target.closest && e.target.closest('label[for="__search"]')) return; - searchToggle.checked = false; - syncSearchClass(); - }); - // Also sync on Escape key (Material toggles checkbox via JS) - document.addEventListener('keydown', function(e) { - if (e.key === 'Escape') setTimeout(syncSearchClass, 50); - }); } + function activateSearch() { + document.body.classList.add('cm-search-active'); + if (searchToggle) searchToggle.checked = true; + applySearchLayout(true); + } + function deactivateSearch() { + document.body.classList.remove('cm-search-active'); + if (searchToggle) searchToggle.checked = false; + if (searchInput) searchInput.blur(); + applySearchLayout(false); + } + function isSearchActive() { + return document.body.classList.contains('cm-search-active'); + } + // Custom search labels in the cm-header-nav (these exist now, in announce block) + document.querySelectorAll('label[for="__search"]').forEach(function(lbl) { + lbl.addEventListener('click', function() { + if (lbl.classList.contains('md-search__overlay')) return; + setTimeout(function() { activateSearch(); if (searchInput) searchInput.focus(); }, 50); + }); + }); + // Deferred bindings: attach handlers to search elements once they exist in the DOM + document.addEventListener('DOMContentLoaded', function() { + searchToggle = document.getElementById('__search'); + searchInput = document.querySelector('.md-search__input'); + // Detect search open via input focus + if (searchInput) { + searchInput.addEventListener('focus', activateSearch); + } + // Detect search open via checkbox + if (searchToggle) { + searchToggle.addEventListener('change', function() { + if (searchToggle.checked) activateSearch(); else deactivateSearch(); + }); + } + // Click on overlay (md-search__overlay label) to dismiss search + var searchOverlay = document.querySelector('.md-search__overlay'); + if (searchOverlay) { + searchOverlay.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + if (isSearchActive()) deactivateSearch(); + }); + } + }); + // Click-outside to dismiss search (on document, works immediately) + document.addEventListener('mousedown', function(e) { + if (!isSearchActive()) return; + var panel = document.querySelector('.md-search__inner'); + if (panel && panel.contains(e.target)) return; + // Let the overlay's own click handler deal with it + if (e.target.closest && e.target.closest('.md-search__overlay')) return; + if (e.target.closest && e.target.closest('label[for="__search"]')) return; + if (e.target.closest && e.target.closest('.cm-header-nav__utility')) return; + deactivateSearch(); + }); + // Escape key to dismiss + document.addEventListener('keydown', function(e) { + if (e.key === 'Escape' && isSearchActive()) setTimeout(deactivateSearch, 50); + }); // Init palette icon + observe changes setTimeout(updatePaletteIcon, 100); new MutationObserver(function() { updatePaletteIcon(); }) @@ -500,12 +604,15 @@