gitadmin/sunscope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Event banner also a popup/flyout

Browse Source
This commit is contained in:
fraxle
2026-06-11 18:37:34 +01:00
parent 9a9684ba99
commit d075b522d8
5 changed files with 43 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/hooks/useAppState.js
+4 -59
View File
@@ -557,65 +557,10 @@ export function useAppState() {
if (bannerIndex >= activeEvents.length) setBannerIndex(0);
}, [activeEvents.length]);
// ── BANNER POSITION + SHELL PADDING ───────────────────────────────────
// The banner is position:absolute so it floats over content. We (1) pin its
// top to the bottom edge of the site-nav so it sits flush below the nav on
// every screen size, and (2) add matching padding-top to the shell so the
// page content sits just below the banner.
// On close: keep the banner pinned to the nav and animate the padding back
// to 0 so content slides up smoothly as the banner collapses.
const bannerMaxHeightRef = useRef(0);
useEffect(() => {
const shell = document.querySelector('.utci-shell');
const wrap = document.querySelector('.event-banner-wrap');
if (!shell || !wrap) return;
// The site-nav's outer height is the banner's resting top edge. The banner
// lives inside the shell, so translate that into the shell's coordinate
// space by subtracting the shell's own offset from the page top.
const bannerTop = () => {
const navEl = document.getElementById('site-nav');
const navOuterHeight = navEl ? navEl.offsetHeight : 0;
return navOuterHeight - shell.offsetTop;
};
if (!bannerVisible) {
// Keep the collapsing banner pinned to the nav's bottom edge, and animate
// padding back to zero matching the banner collapse duration.
wrap.style.top = bannerTop() + 'px';
shell.style.transition = 'padding-top 0.45s cubic-bezier(0.4, 0, 0.2, 1)';
shell.style.paddingTop = '0px';
const tid = setTimeout(() => {
shell.style.transition = '';
shell.style.paddingTop = '';
bannerMaxHeightRef.current = 0;
}, 500);
return () => clearTimeout(tid);
}
const applyPadding = (allowShrink = false) => {
const top = bannerTop();
wrap.style.top = top + 'px';
const h = top + wrap.getBoundingClientRect().height;
if (allowShrink || h > bannerMaxHeightRef.current) {
bannerMaxHeightRef.current = h;
shell.style.transition = ''; // no transition while open/resizing
shell.style.paddingTop = h + 'px';
}
};
// Pin the banner immediately so it appears flush under the nav, then size
// the content padding once the open animation settles.
wrap.style.top = bannerTop() + 'px';
const onResize = () => applyPadding(true);
const tid = setTimeout(applyPadding, 460);
window.addEventListener('resize', onResize);
return () => {
clearTimeout(tid);
window.removeEventListener('resize', onResize);
};
}, [bannerVisible, bannerIndex, activeEvents.length]);
// The banner is now a position:fixed flyout pinned to the very top of the
// screen (see .event-banner-wrap in ui.css). It floats over all content and
// slides in/out via a transform, so no JS nav-pinning or shell padding is
// needed.
// ── RETURN ALL STATE + HANDLERS ───────────────────────────────────────
return {