Public: anyone can read this; the crew can change it.
The map's side lists (ready now, blocked on, by pillar) speak the home page's language #9851
Check · Review · Land · Live done — Landed and live in production.
mason/forge:mason/9848-the-map-s-side-lists-ready-now-blocked-o → main 2 commits fork
3 files
changed +11
−12
docs/design/areas/map.md +1 −1
| @@ -30,7 +30,7 @@ The Ready now list's **First** button (a writer's `method="post"` form in the ro | ||
| 30 | 30 | |
| 31 | 31 | ## Rows and space, not boxes (#9760) |
| 32 | 32 | |
| 33 | The side column is two headed lists, Ready now first, then By pillar and Blocked on: each a `.card.bare` list, one row an | |
| 33 | The side column is two headed lists, Ready now first, then By pillar and Blocked on: each a bare `ul.list.setting-list` under its heading (no card box), one row an | |
| 34 | 34 | issue on the page's one background, no frame and no badge. A row says its word (ready, blocked, waiting, held, parked), what |
| 35 | 35 | stands in front of it (`waits for N`) and what it holds up; a pillar row says its counts as muted text. `.map-canvas` has |
| 36 | 36 | no border: the drawing sits on the page. The First button, its same-origin POST form and the 390px single column are |
src/web/pages/map.ts +5 −11
| @@ -51,7 +51,7 @@ import { | ||
| 51 | 51 | import { liveRegionsJs } from "../client.ts"; |
| 52 | 52 | import { html, type Html } from "../html.ts"; |
| 53 | 53 | import { page } from "../layout.ts"; |
| 54 | import { btn, card, empty, row } from "../ui.ts"; | |
| 54 | import { btn, empty, row } from "../ui.ts"; | |
| 55 | 55 | import { |
| 56 | 56 | parkedTwice, |
| 57 | 57 | struckOut, |
| @@ -965,8 +965,7 @@ function rankedList( | ||
| 965 | 965 | <h2>${title}</h2> |
| 966 | 966 | ${items.length === 0 |
| 967 | 967 | ? html`<p class="muted small">${empty}</p>` |
| 968 | : card( | |
| 969 | html`<ul class="list setting-list"> | |
| 968 | : html`<ul class="list setting-list"> | |
| 970 | 969 | ${items.slice(0, 6).map((r) => |
| 971 | 970 | row({ |
| 972 | 971 | href: issueHref(base, r.issue.number), |
| @@ -988,9 +987,7 @@ function rankedList( | ||
| 988 | 987 | : {}), |
| 989 | 988 | }), |
| 990 | 989 | )} |
| 991 | </ul>`, | |
| 992 | { pad: false, extra: "bare" }, | |
| 993 | )} | |
| 990 | </ul>`} | |
| 994 | 991 | </section>`; |
| 995 | 992 | } |
| 996 | 993 | |
| @@ -1081,8 +1078,7 @@ function pillarList(repo: Repo, rows: readonly PillarRow[]): Html { | ||
| 1081 | 1078 | : `${r.open} open · ${r.ready} ready · ${r.blocked} blocked`; |
| 1082 | 1079 | return html`<section class="stack-tight" id="map-pillars"> |
| 1083 | 1080 | <h2>By pillar</h2> |
| 1084 | ${card( | |
| 1085 | html`<ul class="list setting-list"> | |
| 1081 | ${html`<ul class="list setting-list"> | |
| 1086 | 1082 | ${rows.map((r) => |
| 1087 | 1083 | r.name === null |
| 1088 | 1084 | ? row({ |
| @@ -1118,9 +1114,7 @@ function pillarList(repo: Repo, rows: readonly PillarRow[]): Html { | ||
| 1118 | 1114 | data: { pillar: r.name }, |
| 1119 | 1115 | }), |
| 1120 | 1116 | )} |
| 1121 | </ul>`, | |
| 1122 | { pad: false, extra: "bare" }, | |
| 1123 | )} | |
| 1117 | </ul>`} | |
| 1124 | 1118 | </section>`; |
| 1125 | 1119 | } |
| 1126 | 1120 |
test/pillars.test.ts +5
| @@ -404,9 +404,14 @@ describe("pillars", () => { | ||
| 404 | 404 | expect(page).toMatch(/class="muted small"\s*>3 open · 2 ready · 1 blocked<\/span/); |
| 405 | 405 | const pillarsBlock = page.slice(page.indexOf('id="map-pillars"'), page.indexOf("</section>", page.indexOf('id="map-pillars"'))); |
| 406 | 406 | expect(pillarsBlock).not.toContain('class="badge"'); |
| 407 | // The side lists sit straight under their headings, in no card box (#9848). | |
| 408 | expect(pillarsBlock).not.toContain('class="card'); | |
| 409 | expect(pillarsBlock).toContain(`href="/alice/engine/issues/${loose.number}"`); | |
| 407 | 410 | // A Ready now row leads with its pillar's name. |
| 408 | 411 | const readyBlock = page.slice(page.indexOf("<h2>Ready now</h2>"), page.indexOf("</section>", page.indexOf("<h2>Ready now</h2>"))); |
| 409 | 412 | expect(readyBlock).toMatch(/#\d+ · ready · P[01] [A-Za-z]+ · /); |
| 413 | expect(readyBlock).not.toContain('class="card'); | |
| 414 | expect(readyBlock).toContain('href="/alice/engine/issues/'); | |
| 410 | 415 | // §5's rows draw the section; the old names are gone (#4292). |
| 411 | 416 | expect(page).not.toMatch(/class="[^"]*\bmap-list\b/); |
| 412 | 417 | expect(page).not.toMatch(/class="[^"]*\bmap-empty\b/); |