VARASYS/ZDDC
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(nav): mount stage strip above the header instead of below

Browse source 
Project-level chrome (where in the project) belongs OUTSIDE
tool-level chrome (which tool / theme / help) in reading order.
Stage strip now sits above .app-header rather than after it.

One-line behavioral change in shared/nav.js (insertBefore(strip,
header) instead of insertBefore(strip, header.nextSibling)) plus
the matching nav.spec.js assertion. Visual hierarchy is now:

  ┌─────────────────────────────────────────┐
  │ projA / Archive · Working · …  (strip)  │  ← outer scope
  ├─────────────────────────────────────────┤
  │ [logo] ZDDC Archive  v…   [theme][help] │  ← tool chrome
  ├─────────────────────────────────────────┤
  │  page content                           │
  └─────────────────────────────────────────┘

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
ZDDC 2026-05-09 20:27:23 -05:00
parent 585e84f2f4
commit e9a7749153
2 changed files with 11 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
shared/nav.js
View file

@ -110,15 +110,18 @@
var header = document.querySelector('.app-header');
if (!header) return;
// Don't double-mount if a tool's main.js calls us a second time.
if (header.nextElementSibling &&
header.nextElementSibling.classList &&
header.nextElementSibling.classList.contains('zddc-stage-strip')) {
if (header.previousElementSibling &&
header.previousElementSibling.classList &&
header.previousElementSibling.classList.contains('zddc-stage-strip')) {
return;
}
var project = projectSegment(location.pathname);
var active = currentStage(location.pathname);
var strip = buildStrip(project, active);
header.parentNode.insertBefore(strip, header.nextSibling);
// Mount ABOVE the header — the strip is project-level chrome
// (where in the project), the header is tool-level chrome (which
// tool, theme, help). Reading order matches outer-to-inner scope.
header.parentNode.insertBefore(strip, header);
}
// Expose for tests + opt-out.

8
tests/nav.spec.js
View file

@ -79,13 +79,13 @@ test.describe('shared/nav.js stage strip', () => {
]);
});
test('mounts immediately under the app-header', async ({ page }) => {
test('mounts immediately above the app-header', async ({ page }) => {
await page.goto(`${baseUrl}/projA/archive.html`, { waitUntil: 'load' });
const next = await page.evaluate(() => {
const prev = await page.evaluate(() => {
const h = document.querySelector('.app-header');
return h && h.nextElementSibling && h.nextElementSibling.className;
return h && h.previousElementSibling && h.previousElementSibling.className;
});
expect(next).toContain('zddc-stage-strip');
expect(prev).toContain('zddc-stage-strip');
});
});