Keep the mobile nav reachable on engines without :has(), and fix the stylesheet header #183
@@ -6,6 +6,13 @@ at boot. Entries start at 0.3.0.
|
||||
|
||||
## Unreleased
|
||||
|
||||
### The mobile nav stays reachable on engines without `:has()`
|
||||
|
||||
At 860px and narrower, an engine without `:has()` (Chromium below 105, such as webOS TV 22 and 23,
|
||||
and Firefox below 121) hid the sidebar off-canvas with no way to open it, so the pages the nav links
|
||||
to could not be reached. Now the sidebar moves off-canvas, behind the hamburger, only where `:has()`
|
||||
works. Elsewhere it stays in the flow above the content and the hamburger is hidden.
|
||||
|
||||
### The whole nav tree shows on engines without `:has()`
|
||||
|
||||
On an engine without `:has()` (Chromium below 105, such as webOS TV 22 and 23, and Firefox below 121)
|
||||
|
||||
@@ -43,3 +43,22 @@ Inherited architect, decided by:
|
||||
- Locality, Overall: `public/css/styles.css:31` `--l-on-accent`: one token feeds `.btn-primary`, `.page-btn[aria-current]` and `.brand-mark`
|
||||
- Locality: `public/css/styles.css:287` `@supports not selector(:has(a))`: its `.nav-disc` rule sits about 85 lines from the nav rules it overrides, and `stylesheet-floor.test.ts` guards the order for `.theme-switch` only
|
||||
- Self-sufficiency: `src/ui/stylesheet-contrast.test.ts:29` `stylesheet-contrast.test.ts`: the darker badge colours now have a stated 4.5:1 reason someone can find
|
||||
|
||||
## 2026-10-31T01:09:38Z, PR #183 at 0f20b38, against 364b047
|
||||
|
||||
Ruling: better
|
||||
|
||||
| Seat | Navigation | Locality | Shape | Self-sufficiency | Overall |
|
||||
|---|---|---|---|---|---|
|
||||
| Mid A | same | same | same | better | better |
|
||||
| Inherited architect | same | better | same | better | better |
|
||||
|
||||
Mid A, decided by:
|
||||
|
||||
- Self-sufficiency, Overall: `public/css/styles.css:1` `App Shell Template header`: the false `light-dark()` bullet is gone, so no reader has to work out which of two comments is lying
|
||||
- Self-sufficiency, Overall: `public/css/styles.css:687` `@supports selector(:has(a))` in `@media (max-width: 860px)`: the guard and its comment say what an engine without `:has()` gets, without opening the CHANGELOG
|
||||
|
||||
Inherited architect, decided by:
|
||||
|
||||
- Self-sufficiency, Overall: `public/css/styles.css:5` `Architecture` header: the false `light-dark()` bullet is gone, so the header no longer contradicts the TOKENS comment
|
||||
- Locality, Self-sufficiency, Overall: `public/css/styles.css:687` `@supports selector(:has(a))` in `@media (max-width: 860px)`: the guard and its comment put the dependency of the open state on `:has()` where an editor would change it
|
||||
|
||||
@@ -30,3 +30,20 @@ Read most (opens and searches):
|
||||
- `AGENTS.md` 1
|
||||
- `src/ui/stylesheet-floor.test.ts` 1
|
||||
- `src/ui/theme-switch.test.ts` 1
|
||||
|
||||
## Reading cost, chunk 3bf0b1a97d77, finished 2026-10-31T00:48:14Z
|
||||
|
||||
167985 new input tokens before the first commit.
|
||||
|
||||
Read most (opens and searches):
|
||||
|
||||
- `public/css/styles.css` 17
|
||||
- `todo.md` 7
|
||||
- `README.md` 6
|
||||
- `public/css/auth.css` 5
|
||||
- `AGENTS.md` 1
|
||||
- `CHANGELOG.md` 1
|
||||
- `examples/plugins/scheduling/public/scheduling.css` 1
|
||||
- `examples/plugins/scheduling/views/overview.ejs` 1
|
||||
- `examples/plugins/scheduling/views/shifts.ejs` 1
|
||||
- `src/http/app.test.ts` 1
|
||||
|
||||
@@ -148,6 +148,21 @@ test("mobile layout hides the sidebar off-canvas behind the hamburger", async ({
|
||||
expect(offCanvas).toBe(true);
|
||||
});
|
||||
|
||||
test("the hamburger opens the drawer over the scrim, and a link in it navigates", async ({ page }) => {
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await page.goto("/dashboard");
|
||||
await page.locator(".hamburger").click();
|
||||
|
||||
const sidebar = page.locator(".sidebar");
|
||||
await expect(sidebar).toBeInViewport({ ratio: 1 });
|
||||
// A click is refused while the scrim sits above the drawer, which a lower z-index would cause.
|
||||
await sidebar.locator("summary").first().click(); // the dashboard is the current page, so its links are in a folded branch
|
||||
const link = sidebar.locator(".nav-children a.nav-self").first();
|
||||
const target = await link.getAttribute("href");
|
||||
await link.click();
|
||||
await expect(page).toHaveURL((url) => url.pathname === target?.split("?")[0]);
|
||||
});
|
||||
|
||||
test("Sign-out is a CSRF-guarded POST form: the token is issued on the page, a tokenless POST is refused", async ({ page }) => {
|
||||
await page.goto("/dashboard");
|
||||
// The page issues a CSRF cookie and embeds the same token in the Sign-out form (double-submit).
|
||||
|
||||
+20
-17
@@ -2,8 +2,6 @@
|
||||
App Shell Template — pure HTML/CSS, no JavaScript
|
||||
-------------------------------------------------------------
|
||||
Architecture
|
||||
- Design tokens via light-dark() so theme follows system by
|
||||
default and can be forced Light / Dark via radio + :has().
|
||||
- Everything is a reusable "block": .nav-item, .filter,
|
||||
.chip, .badge, .btn, .menu, .table — combine freely.
|
||||
============================================================= */
|
||||
@@ -682,22 +680,27 @@ th[aria-sort="descending"] .sort-ico { transform: rotate(180deg); }
|
||||
.scrim { display: none; }
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.app { grid-template-columns: minmax(0, 1fr); }
|
||||
.sidebar {
|
||||
position: fixed; inset: 0 auto 0 0; width: min(86vw, var(--nav-w));
|
||||
z-index: 60; transform: translateX(-100%);
|
||||
box-shadow: 2px 0 24px rgba(0,0,0,.18);
|
||||
}
|
||||
.content { grid-column: 1; }
|
||||
.hamburger { display: inline-flex; }
|
||||
|
||||
/* checkbox-driven open state */
|
||||
body:has(#nav-toggle:checked) .sidebar { transform: translateX(0); }
|
||||
body:has(#nav-toggle:checked) .scrim {
|
||||
display: block; position: fixed; inset: 0; z-index: 50;
|
||||
background: rgba(0,0,0,.42);
|
||||
}
|
||||
.app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
|
||||
.content { grid-column: 1; grid-row: 2; }
|
||||
.search { min-width: 150px; flex: 1 1 auto; }
|
||||
|
||||
/* Off-canvas only where :has() works: without it nothing can read #nav-toggle, so the sidebar
|
||||
stays in the flow above the content and the hamburger stays hidden. */
|
||||
@supports selector(:has(a)) {
|
||||
.sidebar {
|
||||
position: fixed; inset: 0 auto 0 0; width: min(86vw, var(--nav-w));
|
||||
z-index: 60; transform: translateX(-100%);
|
||||
box-shadow: 2px 0 24px rgba(0,0,0,.18);
|
||||
}
|
||||
.hamburger { display: inline-flex; }
|
||||
|
||||
/* checkbox-driven open state */
|
||||
body:has(#nav-toggle:checked) .sidebar { transform: translateX(0); }
|
||||
body:has(#nav-toggle:checked) .scrim {
|
||||
display: block; position: fixed; inset: 0; z-index: 50;
|
||||
background: rgba(0,0,0,.42);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.crumbs, .page-sub { display: none; }
|
||||
|
||||
@@ -16,6 +16,16 @@ for (const file of readdirSync(cssDir).filter((f) => f.endsWith(".css"))) {
|
||||
|
||||
const stylesheet = readFileSync(join(cssDir, "styles.css"), "utf8").replace(/\/\*[\s\S]*?\*\//g, "");
|
||||
|
||||
// The index of the `}` closing the block whose `{` is the first one at or after `start`.
|
||||
function blockEnd(start: number): number {
|
||||
let depth = 0;
|
||||
for (let i = stylesheet.indexOf("{", start); i < stylesheet.length; i++) {
|
||||
if (stylesheet[i] === "{") depth++;
|
||||
if (stylesheet[i] === "}" && --depth === 0) return i;
|
||||
}
|
||||
throw new Error("unbalanced braces in styles.css");
|
||||
}
|
||||
|
||||
// The text is all there is to check: Playwright's engines all support `:has()`, so no E2E sees the
|
||||
// stylesheet an older engine gets.
|
||||
// Chromium below 105 and Firefox below 121 have no `:has()`, and nothing else reveals a folded
|
||||
@@ -23,12 +33,7 @@ const stylesheet = readFileSync(join(cssDir, "styles.css"), "utf8").replace(/\/\
|
||||
test("styles.css folds .nav-children only inside @supports selector(:has(a))", () => {
|
||||
const open = stylesheet.indexOf("@supports selector(:has(a)) {");
|
||||
assert.ok(open >= 0, "no @supports selector(:has(a)) block");
|
||||
let depth = 0;
|
||||
let close = open;
|
||||
for (; close < stylesheet.length; close++) {
|
||||
if (stylesheet[close] === "{") depth++;
|
||||
if (stylesheet[close] === "}" && --depth === 0) break;
|
||||
}
|
||||
const close = blockEnd(open);
|
||||
const outside = stylesheet.slice(0, open) + stylesheet.slice(close + 1);
|
||||
assert.ok(!/\.nav-children\s*\{[^}]*display:\s*none/.test(outside), "a .nav-children rule hides it outside the guard");
|
||||
assert.match(stylesheet.slice(open, close), /\.nav-children\s*\{\s*display:\s*none/, "the fold rule is gone");
|
||||
@@ -44,3 +49,21 @@ test("styles.css hides the theme switch and the nav toggles where :has() is miss
|
||||
assert.match(block, /\.theme-switch\s*\{\s*display:\s*none/);
|
||||
assert.match(block, /\.nav-disc\s*\{\s*visibility:\s*hidden/);
|
||||
});
|
||||
|
||||
// Without `:has()` nothing reads #nav-toggle, so an off-canvas sidebar there is unreachable and the
|
||||
// hamburger does nothing: the sidebar has to stay in the flow, with the hamburger hidden.
|
||||
test("styles.css moves the sidebar off-canvas at 860px only inside @supports selector(:has(a))", () => {
|
||||
const open = stylesheet.indexOf("@media (max-width: 860px) {");
|
||||
assert.ok(open >= 0, "no @media (max-width: 860px) block");
|
||||
const close = blockEnd(open);
|
||||
const media = stylesheet.slice(open, close);
|
||||
const guard = media.indexOf("@supports selector(:has(a)) {");
|
||||
assert.ok(guard >= 0, "no @supports selector(:has(a)) block inside the 860px media block");
|
||||
const guardEnd = blockEnd(open + guard) - open;
|
||||
const outside = media.slice(0, guard) + media.slice(guardEnd + 1);
|
||||
const inside = media.slice(guard, guardEnd);
|
||||
for (const offCanvas of [/translateX\(-100%\)/, /position:\s*fixed/, /#nav-toggle/, /\.hamburger/]) {
|
||||
assert.doesNotMatch(outside, offCanvas, `${offCanvas} applies outside the guard`);
|
||||
assert.match(inside, offCanvas, `${offCanvas} is gone from the guard`);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -6,20 +6,19 @@
|
||||
|
||||
`Bar = 1`
|
||||
|
||||
`Next ID = 38`
|
||||
`Next ID = 39`
|
||||
|
||||
## Items
|
||||
|
||||
| ID | Release | Blocked by | Exempt | Item | L | E | I | R | S | Moves | Score |
|
||||
|---|---|---|---|---|---|---|---|---|---|---|---|
|
||||
| 36 | 0.4.21 | | defect | **Keep the mobile nav reachable at 860px and narrower on an engine without `:has()`, and move it off-canvas only where `:has()` works.** | 2 | 2 | 2 | 4 | 3 | 4 by 6 | 26.9 |
|
||||
| 37 | 0.4.21 | | | **Replace the stale architecture comment at the top of `public/css/styles.css` so it no longer says the design tokens use `light-dark()`.** | 1 | 2 | 1 | 2 | 1 | code health by 2 | 14.4 |
|
||||
| 26 | 0.4.21 | | | **Add a domain glossary and the project's intended horizon to the README.** | 1 | 2 | 1 | 2 | 3 | 9 by 3, code health by 2 | 11.9 |
|
||||
| 8 | 0.4.21 | | | **Run the visual E2E specs at viewports from a large desktop down to a small phone.** | 2 | 1 | 1 | 2 | 4 | code health by 3 | 9.0 |
|
||||
| 9 | 0.4.21 | | | **Typecheck `e2e-tests/` in the gate.** | 1 | 1 | 1 | 1 | 3 | code health by 2 | 9.0 |
|
||||
| 24 | 0.4.21 | | | **Retire `src/ui/shell-context.ts` and render the dashboard from `ctx.chrome`.** | 2 | 1 | 2 | 3 | 4 | code health by 3 | 9.0 |
|
||||
| 17 | 0.4.21 | | | **Remove the icons no caller uses from `ICON_NAMES` and the sprite.** | 1 | 1 | 1 | 1 | 1 | 8 by 1, code health by 1 | 8.8 |
|
||||
| 21 | 0.4.21 | | | **Fail the gate on a function that exceeds a size or complexity limit.** | 3 | 1 | 1 | 3 | 5 | code health by 4 | 7.2 |
|
||||
| 38 | 0.4.21 | | | **Correct the TOKENS comment at the top of `public/css/styles.css` so it no longer claims `:has()` swaps are "rock-solid" or that the theme follows the OS on every engine.** | 1 | 2 | 1 | 2 | 1 | code health by 1 | 7.2 |
|
||||
| 32 | 0.4.21 | | | **Fail the gate on a stylesheet feature the browser floor lacks, unless it is guarded.** | 3 | 1 | 1 | 3 | 4 | code health by 2 | 6.0 |
|
||||
| 20 | 0.4.21 | | | **Redirect an anonymous hit on a session-needing flow page to sign-in, instead of a 500.** | 2 | 2 | 2 | 4 | 3 | 2 by 4 | 4.2 |
|
||||
| 4 | 0.4.21 | | | **Refuse a permission save whose baseline no longer matches Keto, so concurrent edits are not silently lost.** | 2 | 2 | 2 | 4 | 4 | 2 by 4 | 2.8 |
|
||||
@@ -40,23 +39,6 @@
|
||||
|
||||
## Details
|
||||
|
||||
### 36. Keep the mobile nav reachable at 860px and narrower on an engine without `:has()`, and move it off-canvas only where `:has()` works.
|
||||
|
||||
README → "Two browser floors": Chromium 87 must reach every page, and `:has()` may only decorate.
|
||||
In `public/css/styles.css`, `@media (max-width: 860px)` moves `.sidebar` off-canvas with
|
||||
`transform: translateX(-100%)`, and only `body:has(#nav-toggle:checked)` brings it and `.scrim`
|
||||
back. Below Chromium 105 (webOS TV 22 and 23) the hamburger does nothing at that width, so no page
|
||||
behind the nav can be reached. Move the off-canvas rules inside `@supports selector(:has(a))`, and
|
||||
keep the sidebar in the flow outside it, with the hamburger hidden. The desktop tree and the theme
|
||||
switch are already guarded. Test it beside `src/ui/stylesheet-floor.test.ts`.
|
||||
|
||||
### 37. Replace the stale architecture comment at the top of `public/css/styles.css` so it no longer says the design tokens use `light-dark()`.
|
||||
|
||||
The header (lines 4-6) says the tokens use `light-dark()`, but the TOKENS comment below it says the
|
||||
stylesheet avoids `light-dark()` and `color-scheme` for app colours, because engines resolve them
|
||||
unreliably, and maps raw `--l-*`/`--d-*` palettes in three theme blocks instead. A reader trusting
|
||||
the header looks for `light-dark()` that does not exist. Found by a comprehension-panel reader.
|
||||
|
||||
### 26. Add a domain glossary and the project's intended horizon to the README.
|
||||
|
||||
Glossary: host, manifest, chrome, nav fragment, permission token, system plugin, denylist. Also the
|
||||
@@ -77,6 +59,14 @@ AGENTS.md → "`ICON_NAMES` is a host-owned registry" already makes this routine
|
||||
|
||||
Only `tsc --strict` runs today. A new tool is a new dependency, so justify it.
|
||||
|
||||
### 38. Correct the TOKENS comment at the top of `public/css/styles.css` so it no longer claims `:has()` swaps are "rock-solid" or that the theme follows the OS on every engine.
|
||||
|
||||
Section 1's TOKENS comment says the theme follows the OS by default and that `:has()` variable swaps
|
||||
are "rock-solid". On an engine without `:has()` (Chromium below 105, Firefox below 121) every theme
|
||||
rule is inert, the OS-dark rule included, so those engines stay light, as the
|
||||
`@supports not selector(:has(a))` block further down says. A reader trusting the comment expects dark
|
||||
mode there.
|
||||
|
||||
### 32. Fail the gate on a stylesheet feature the browser floor lacks, unless it is guarded.
|
||||
|
||||
Nothing checks README → "Two browser floors", and no E2E engine is old enough to show a break.
|
||||
|
||||
Reference in New Issue
Block a user