Public: anyone can read this; the crew can change it.
The last seven `.filters` rules leave src/web/style/content.ts #6301
Check · Review · Land · Live done — Landed and live in production.
mason/forge:mason/6241-the-last-seven-filters-rules-leave-src-w → main 3 commits fork
4 files
changed +6
−11
docs/design/areas/search.md +1 −1
| @@ -1,3 +1,3 @@ | ||
| 1 | 1 | # Search box |
| 2 | 2 | |
| 3 | - `.search` — the search field of a filter or search form: an `.input` that grows to fill its row between 180px and 320px wide. Written by `searchPage` in `src/web/pages/search.ts` (the `/search` form), and by the filter forms in `src/web/pages/browse.ts`, `src/web/pages/org.ts`, `src/web/pages/origins.ts` and `src/web/studio/explore.ts`. Styled in `src/web/style/content.ts` as `.filters .search` and `.bar .search`. | |
| 3 | - `.search` — the search field of a filter or search form: an `.input` that grows to fill its row between 180px and 320px wide. Written by `searchPage` in `src/web/pages/search.ts` (the `/search` form), and by the filter forms in `src/web/pages/browse.ts`, `src/web/pages/org.ts`, `src/web/pages/origins.ts` and `src/web/studio/explore.ts`. Styled in `src/web/style/content.ts` as `.bar .search` only. |
docs/design/sections/5d-page-local-classes.md −1
| @@ -28,7 +28,6 @@ the same line (#4888). | ||
| 28 | 28 | - `.preview` |
| 29 | 29 | - `.swatch` |
| 30 | 30 | - **`style/content.ts`, page furniture** — what frames a page's content: page and repo heads, the front page and its tiles, explore, backups, boards, the fleet chart's series colours, lineage: |
| 31 | - `.filters` | |
| 32 | 31 | - `.page-head` |
| 33 | 32 | - `.repo-actions` |
| 34 | 33 | - `.repo-desc` |
src/web/style/content.ts +4 −8
| @@ -156,14 +156,10 @@ a.origin-chip:hover { border-color: var(--border-strong); color: var(--fg); } | ||
| 156 | 156 | |
| 157 | 157 | .repo-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; } |
| 158 | 158 | |
| 159 | .filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } | |
| 160 | .filters form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } | |
| 161 | .filters .search { min-width: 180px; flex: 1; max-width: 320px; } | |
| 162 | /* A list's six words fit a phone without pushing the page sideways: a | |
| 163 | little less padding there, and a scroll inside the bar as the last resort. */ | |
| 164 | .filters .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; } | |
| 165 | @media (max-width: 420px) { .filters .seg > a { padding: 0 8px; } } | |
| 166 | /* The same three reaches for a filter bar drawn with §5's .bar. */ | |
| 159 | ||
| 160 | /* A list's six words fit a phone without pushing the page sideways in a | |
| 161 | filter bar drawn with §5's .bar: a little less padding there, and a | |
| 162 | scroll inside the bar as the last resort. */ | |
| 167 | 163 | .bar .search { min-width: 180px; flex: 1; max-width: 320px; } |
| 168 | 164 | .bar .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; } |
| 169 | 165 | @media (max-width: 420px) { .bar .seg > a { padding: 0 8px; } } |
test/apps-archived.test.ts +1 −1
| @@ -129,5 +129,5 @@ test("the stylesheet sizes .search and .seg inside .bar, without needing .filter | ||
| 129 | 129 | test("the stylesheet carries no merge-conflict markers", async () => { |
| 130 | 130 | const { content } = await import("../src/web/style/content.ts"); |
| 131 | 131 | expect(content).not.toMatch(/^(<<<<<<<|=======|>>>>>>>)/m); |
| 132 | expect(content).toContain("The same three reaches for a filter bar drawn with §5's .bar."); | |
| 132 | expect(content).not.toContain(".filters"); | |
| 133 | 133 | }); |
new above
offline