From 40d431023a042b3ce8b5191fa02d4fca91c97095 Mon Sep 17 00:00:00 2001 From: vickydotbat Date: Fri, 26 Jun 2026 11:16:17 +0200 Subject: [PATCH] fix: refine global topbar integration --- public/client.js | 41 ------------- scss/westgate/_topbar.scss | 89 +++++----------------------- templates/partials/header/topbar.tpl | 21 +------ tests/global-topbar-contract.test.js | 7 +++ 4 files changed, 23 insertions(+), 135 deletions(-) diff --git a/public/client.js b/public/client.js index 22ba7f3..6b44da1 100644 --- a/public/client.js +++ b/public/client.js @@ -153,23 +153,6 @@ return document.querySelector('[data-wg-topbar]'); } - function closeWestgateTopbarPanels(topbar, exceptKey) { - if (!topbar || typeof topbar.querySelectorAll !== 'function') { - return; - } - - toArray(topbar.querySelectorAll('[data-wg-panel]')).forEach((panel) => { - if (panel.getAttribute('data-wg-panel') !== exceptKey) { - panel.classList.remove('is-open'); - } - }); - toArray(topbar.querySelectorAll('[data-wg-menu]')).forEach((trigger) => { - if (trigger.getAttribute('data-wg-menu') !== exceptKey) { - trigger.setAttribute('aria-expanded', 'false'); - } - }); - } - function closeWestgateTopbarDrawer(topbar) { if (!topbar) { return; @@ -195,22 +178,6 @@ return; } - const trigger = event.target.closest && event.target.closest('[data-wg-menu]'); - if (trigger && currentTopbar.contains(trigger)) { - event.preventDefault(); - event.stopPropagation(); - - const key = trigger.getAttribute('data-wg-menu'); - const panel = currentTopbar.querySelector(`[data-wg-panel="${key}"]`); - const shouldOpen = !!panel && !panel.classList.contains('is-open'); - closeWestgateTopbarPanels(currentTopbar, shouldOpen ? key : null); - if (panel) { - panel.classList.toggle('is-open', shouldOpen); - } - trigger.setAttribute('aria-expanded', String(shouldOpen)); - return; - } - const burger = event.target.closest && event.target.closest('[data-wg-burger]'); if (burger && currentTopbar.contains(burger)) { event.preventDefault(); @@ -219,15 +186,9 @@ const isOpen = !currentTopbar.classList.contains('is-drawer-open'); currentTopbar.classList.toggle('is-drawer-open', isOpen); burger.setAttribute('aria-expanded', String(isOpen)); - closeWestgateTopbarPanels(currentTopbar, null); return; } - if (event.target.closest && event.target.closest('[data-wg-panel]')) { - return; - } - - closeWestgateTopbarPanels(currentTopbar, null); if (!currentTopbar.contains(event.target)) { closeWestgateTopbarDrawer(currentTopbar); } @@ -239,7 +200,6 @@ } const currentTopbar = getWestgateTopbar(); - closeWestgateTopbarPanels(currentTopbar, null); closeWestgateTopbarDrawer(currentTopbar); }); @@ -263,7 +223,6 @@ $(window).on('action:ajaxify.end', function () { wrapWestgateWikiTables(document); initWestgateTopbar(); - closeWestgateTopbarPanels(getWestgateTopbar(), null); closeWestgateTopbarDrawer(getWestgateTopbar()); }); diff --git a/scss/westgate/_topbar.scss b/scss/westgate/_topbar.scss index 7ecec9e..5698289 100644 --- a/scss/westgate/_topbar.scss +++ b/scss/westgate/_topbar.scss @@ -1,3 +1,11 @@ +$wg-topbar-panel-bg: linear-gradient( + 100deg, + #2a1222 0%, + #19161f 23%, + #121017 62%, + #0d0c11 100% +); + .wg-layout-container { min-height: 100vh; } @@ -17,7 +25,7 @@ .wg-topbar__inner { display: grid; - grid-template-columns: auto minmax(0, 1fr) auto auto; + grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; width: min(100%, 1420px); @@ -60,35 +68,16 @@ font-weight: 700; } -.wg-topbar__brand-text { - display: flex; - flex-direction: column; - min-width: 0; - line-height: 1; -} - .wg-topbar__brand-name { - max-width: 22ch; - overflow: hidden; color: var(--wg-text); font-family: var(--wg-font-display); font-size: 0.96rem; font-weight: 600; letter-spacing: 0.08em; - text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } -.wg-topbar__brand-subtitle { - margin-top: 0.28rem; - color: var(--wg-gold-soft); - font-family: var(--wg-font-code); - font-size: 0.62rem; - letter-spacing: 0.08em; - text-transform: uppercase; -} - .wg-topbar__nav { min-width: 0; } @@ -104,8 +93,7 @@ } .wg-topbar .nav-link, -.wg-topbar__nav-link, -.wg-topbar__forums-toggle { +.wg-topbar__nav-link { min-height: 2.35rem; border: 1px solid transparent; border-radius: 6px; @@ -122,8 +110,6 @@ .wg-topbar .nav-link:focus, .wg-topbar__nav-link:hover, .wg-topbar__nav-link:focus, -.wg-topbar__forums-toggle:hover, -.wg-topbar__forums-toggle:focus, .wg-topbar .nav-item.active > .nav-link, .wg-topbar .nav-item.active > .navigation-link { color: #f3ede4; @@ -132,16 +118,6 @@ box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035); } -.wg-topbar__forums { - position: relative; -} - -.wg-topbar__forums-toggle { - display: inline-flex; - align-items: center; - gap: 0.35rem; -} - .wg-topbar__utilities { justify-self: end; } @@ -187,8 +163,7 @@ .wg-topbar .notifications-dropdown, .wg-topbar .chats-dropdown, .wg-topbar .drafts-dropdown, -.wg-topbar .user-dropdown, -.wg-topbar__panel { +.wg-topbar .user-dropdown { min-width: min(22rem, calc(100vw - 1.5rem)); max-width: calc(100vw - 1.5rem); border: 1px solid rgba(194, 163, 90, 0.22) !important; @@ -196,7 +171,7 @@ color: var(--wg-text-soft) !important; background: linear-gradient(180deg, rgba(255, 244, 221, 0.028), transparent 36%), - var(--wg-velvet-panel) !important; + $wg-topbar-panel-bg !important; box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035), 0 18px 42px rgba(0, 0, 0, 0.42) !important; @@ -258,36 +233,6 @@ background: rgba(194, 163, 90, 0.1); } -.wg-topbar__panel { - position: absolute; - top: calc(100% + 0.45rem); - right: 0; - display: none; - padding: 0.42rem; -} - -.wg-topbar__panel.is-open { - display: grid; - gap: 0.2rem; -} - -.wg-topbar__panel--forums a { - display: flex; - align-items: center; - min-height: 2.25rem; - border-radius: 6px; - padding: 0.35rem 0.55rem; - color: var(--wg-text-soft); - font-size: 0.9rem; - text-decoration: none; -} - -.wg-topbar__panel--forums a:hover, -.wg-topbar__panel--forums a:focus { - color: var(--wg-text); - background: rgba(194, 163, 90, 0.08); -} - .wg-topbar__burger { display: none; align-items: center; @@ -310,7 +255,8 @@ display: none; border-top: 1px solid rgba(194, 163, 90, 0.12); background: - linear-gradient(180deg, rgba(42, 18, 34, 0.98), rgba(12, 10, 15, 0.99)); + linear-gradient(180deg, rgba(255, 244, 221, 0.025), transparent 38%), + $wg-topbar-panel-bg; } .wg-topbar.is-drawer-open .wg-topbar__drawer { @@ -389,12 +335,6 @@ grid-template-columns: minmax(0, 1fr) auto; } - .wg-topbar__brand-name { - max-width: 16ch; - } - - .wg-topbar__brand-subtitle, - .wg-topbar__forums, .wg-topbar__utilities { display: none; } @@ -411,7 +351,6 @@ } .wg-topbar__brand-name { - max-width: 13ch; font-size: 0.82rem; letter-spacing: 0.05em; } diff --git a/templates/partials/header/topbar.tpl b/templates/partials/header/topbar.tpl index 93f9623..9adb962 100644 --- a/templates/partials/header/topbar.tpl +++ b/templates/partials/header/topbar.tpl @@ -1,11 +1,8 @@
- + - - {config.siteTitle} - Shadows Over Westgate - + SHADOWS OVER WESTGATE -
- - -
-
{{{ if config.loggedIn }}}
    diff --git a/tests/global-topbar-contract.test.js b/tests/global-topbar-contract.test.js index a6f2799..8e2064b 100644 --- a/tests/global-topbar-contract.test.js +++ b/tests/global-topbar-contract.test.js @@ -107,6 +107,13 @@ assertIncludes(topbar, '{{{ if allowRegistration }}}', 'Registration should rema assertIncludes(topbar, '{{{ each navigation }}}', 'Topbar should render ACP Navigation items'); assertIncludes(topbar, '{./textClass}', 'Topbar should honor ACP Navigation text visibility classes'); assertExcludes(topbar, 'href="{relative_path}/admin"', 'Topbar should not hard-code the administrator link'); +assertIncludes(topbar, 'SHADOWS OVER WESTGATE', 'Topbar brand should use the single required identity line'); +assertExcludes(topbar, 'wg-topbar__brand-subtitle', 'Topbar should not repeat the site name as a subtitle'); +assertExcludes(topbar, 'wg-topbar__forums', 'Topbar should not ship a separate desktop Forums dropdown'); +assertExcludes(topbar, 'data-wg-menu="forums"', 'Forums should not use a custom topbar menu trigger'); +assertIncludes(stylesheet, '$wg-topbar-panel-bg', 'Topbar menu surfaces should use an opaque local panel base'); +assertExcludes(stylesheet, 'var(--wg-velvet-panel) !important;', 'Topbar menu surfaces should not inherit the translucent velvet panel token'); +assertExcludes(stylesheet, 'text-overflow: ellipsis;', 'Topbar brand should not truncate in normal desktop layouts'); assertMissing( 'templates/partials/header/brand.tpl',