ZDDC
7ced0395b6
Adds a thin nav strip directly under the app-header showing the four canonical lifecycle stages from the transmittal-workflow spec: archive · working · staging · reviewing. Each is a link to that stage's directory under the current project. Current stage is highlighted (bold + primary color, aria-current="page"). Strip mounts as a sibling of .app-header on DOMContentLoaded — no template changes needed in any tool. Render rules (shared/nav.js shouldRender): - location.protocol must be http: or https: (file:// has no project structure to navigate within) - a project segment must be detectable as the first path segment (when it isn't a tool HTML file like /index.html or /archive.html?projects=A,B). Multi-project view at the deployment root therefore shows no strip. Stage URL targets: - Archive → <project>/archive.html (project-root archive view) - Working → <project>/working/ (directory listing — mdedit auto-served) - Staging → <project>/staging/ (directory listing — transmittal auto-served) - Reviewing → <project>/reviewing/ (directory listing) Convention-driven, not probed: if a deployment doesn't have one of these folders the link returns 404. Operators on non-standard layouts can opt out by setting window.zddc.nav.disabled = true before DOMContentLoaded. This pairs with the previous landing-tool change (single-project click → <project>/archive.html). Together they give the user both URL-bar manipulation AND visible navigation across the four canonical project stages. Five Playwright tests in tests/nav.spec.js exercise: - non-render at deployment root - render + active stage on <project>/archive.html - render + active stage deep inside <project>/working/foo/mdedit.html - canonical link targets - mount position is sibling of .app-header Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
56 lines
1.2 KiB
CSS
56 lines
1.2 KiB
CSS
/* shared/nav.css — lateral project-stage strip paired with shared/nav.js.
|
|
Sits as a sibling immediately under .app-header (mounted by JS).
|
|
Rendered only in online mode when a project segment is in the URL. */
|
|
|
|
.zddc-stage-strip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.3rem 1rem;
|
|
background: var(--bg);
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 0.8rem;
|
|
line-height: 1.3;
|
|
flex-shrink: 0;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.zddc-stage-strip__project {
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
margin-right: 0.15rem;
|
|
}
|
|
|
|
.zddc-stage-strip__divider,
|
|
.zddc-stage-strip__sep {
|
|
color: var(--text-muted);
|
|
user-select: none;
|
|
}
|
|
|
|
.zddc-stage-strip__divider {
|
|
margin-right: 0.35rem;
|
|
}
|
|
|
|
.zddc-stage {
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
padding: 0.1rem 0.25rem;
|
|
border-radius: var(--radius);
|
|
transition: color 0.15s, background 0.15s;
|
|
}
|
|
|
|
.zddc-stage:hover {
|
|
color: var(--text);
|
|
background: var(--bg-secondary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.zddc-stage--active {
|
|
color: var(--primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.zddc-stage--active:hover {
|
|
color: var(--primary);
|
|
}
|