The issue lists', a change's and the asked page's filters draw §5's filters, and .filters leaves their markup #4306
Merged
scoutcrew
opened this
Check · Review · Land · Live done
— Landed and live in production.
Merged
scout/forge:scout/4296-the-issue-lists-a-change-s-and-the-asked → main
·
2 commits
·fork
·1 thread ·
1 unresolved
-
Merged.
scout/4296-the-issue-lists-a-change-s-and-the-asked was merged into
main as c85f5b8.
Review
Sign in to review this change.
7 files
changed +22
−3
src/web/studio/asked_page.ts
+1
−1
|
|
@@ -207,7 +207,7 @@ export function askedPage(ctx: Ctx): Response { |
| 207 | 207 |
<h1 id="asked-sentence">What you asked for</h1> |
| 208 | 208 |
<p class="muted">${sentence}</p> |
| 209 | 209 |
${thoughts} |
| 210 | |
<div class="filters bar mb mt"> |
| 210 |
<div class="bar mb mt"> |
| 211 | 211 |
${seg([ |
| 212 | 212 |
{ |
| 213 | 213 |
label: "Not shipped", |
src/web/studio/change.ts
+1
−1
|
|
@@ -238,7 +238,7 @@ export function changeTabs( |
| 238 | 238 |
current: "change" | "files", |
| 239 | 239 |
): Html { |
| 240 | 240 |
const base = repoBase(repo); |
| 241 | |
return html`<div class="filters mt"> |
| 241 |
return html`<div class="bar mt mb"> |
| 242 | 242 |
${seg([ |
| 243 | 243 |
{ |
| 244 | 244 |
label: "Conversation", |
src/web/studio/lists.ts
+1
−1
|
|
@@ -132,7 +132,7 @@ function wordFilterBar( |
| 132 | 132 |
trail?: Html, |
| 133 | 133 |
words: readonly WordFilter[] = WORD_FILTERS, |
| 134 | 134 |
): Html { |
| 135 | |
return html`<div class="filters mb"> |
| 135 |
return html`<div class="bar mb"> |
|
|
|
| 136 | 136 |
${seg([ |
| 137 | 137 |
{ label: "Open", href: href(undefined), current: open }, |
| 138 | 138 |
...words.map((w) => ({ |
src/web/style/components.ts
+2
|
|
@@ -540,7 +540,9 @@ details[open] > summary.row > .row-lead { transform: rotate(90deg); } |
| 540 | 540 |
.seg { |
| 541 | 541 |
display: inline-flex; align-items: center; gap: 2px; flex: none; |
| 542 | 542 |
padding: 2px; background: var(--muted); border-radius: var(--radius); |
| 543 |
max-width: 100%; overflow-x: auto; scrollbar-width: none; |
| 543 | 544 |
} |
| 545 |
@media (max-width: 420px) { .seg > a, .seg > label { padding: 0 8px; } } |
| 544 | 546 |
.seg > a, .seg > label { |
| 545 | 547 |
display: inline-flex; align-items: center; gap: 6px; |
| 546 | 548 |
min-height: 28px; padding: 0 10px; border-radius: var(--radius-sm); |
test/asked.test.ts
+5
|
|
@@ -267,6 +267,11 @@ describe("what you asked for", () => { |
| 267 | 267 |
const page = (await res.text()).replace(/\s+/g, " "); |
| 268 | 268 |
expect(page).toContain("What you asked for"); |
| 269 | 269 |
expect(page).toContain("Plant tomatoes"); |
| 270 |
|
| 271 |
expect(page).not.toMatch(/class="[^"]*\bfilters\b/); |
| 272 |
expect(page).toContain("Not shipped"); |
| 273 |
expect(page).toContain("Nothing built"); |
| 274 |
expect(page).toContain("Show newest first"); |
| 270 | 275 |
expect(page).toContain("nothing built in 3 days"); |
| 271 | 276 |
expect(page).not.toContain("Refactor the watering module"); |
| 272 | 277 |
|
test/components-palette-focus.test.ts
+7
|
|
@@ -19,3 +19,10 @@ test("the topbar search input is 16px, so iOS does not zoom and the design lint |
| 19 | 19 |
test("avatar initials stay mostly --fg so they hold 4.5:1 on the tint in every theme", () => { |
| 20 | 20 |
expect(components).toContain("var(--av-ink) 28%, var(--fg)"); |
| 21 | 21 |
}); |
| 22 |
|
| 23 |
test("a .seg never outgrows its bar: it scrolls inside max-width 100% and tightens its padding on a phone", () => { |
| 24 |
const seg = components.match(/\n\.seg \{[^}]*\}/)?.[0] ?? ""; |
| 25 |
expect(seg).toContain("max-width: 100%"); |
| 26 |
expect(seg).toContain("overflow-x: auto"); |
| 27 |
expect(components).toMatch(/max-width: 420px\) \{ \.seg > a, \.seg > label \{ padding: 0 8px/); |
| 28 |
}); |
test/studio-changes.test.ts
+5
|
|
@@ -191,6 +191,8 @@ describe("the studio, continued", () => { |
| 191 | 191 |
expect(page).not.toContain('name="label"'); |
| 192 | 192 |
expect(page).not.toContain(`>#${told.value.number} opened`); |
| 193 | 193 |
expect(page).toContain(`href="/alice/notes/issues?word=told"`); |
| 194 |
expect(page).not.toMatch(/class="[^"]*\bfilters\b/); |
| 195 |
expect(page).toContain("Not started"); |
| 194 | 196 |
|
| 195 | 197 |
const filtered = await (await get("/alice/notes/issues?word=told")).text(); |
| 196 | 198 |
expect(filtered).toContain("List test: not picked up yet"); |
|
|
@@ -704,6 +706,9 @@ describe("the studio, continued", () => { |
| 704 | 706 |
expect(changeHtml).toContain(`action="/alice/notes/pulls/${p}/comments"`); |
| 705 | 707 |
expect(changeHtml).toContain(`href="/alice/notes/pulls/${p}/files"`); |
| 706 | 708 |
expect(changeHtml).toContain('id="comment-body"'); |
| 709 |
|
| 710 |
expect(changeHtml).not.toMatch(/class="[^"]*\bfilters\b/); |
| 711 |
expect(changeHtml).toContain("Conversation"); |
| 707 | 712 |
|
| 708 | 713 |
|
| 709 | 714 |
|
Six nowrap, flex:none segments in
.barat 360px overflow. Contain.seginside.bar(max-width:100%; overflow-x:auto) before dropping.filters.