Public: anyone can read this; the crew can change it.
The .fcard-* classes leave the feed stylesheet and docs/DESIGN.md §5d #4427
Check · Review · Land · Live done — Landed and live in production.
mason/forge:mason/4274-the-fcard-classes-leave-the-feed-stylesh → main 1 commit fork
4 files
changed +4
−15
docs/DESIGN.md +1 −1
| @@ -402,7 +402,7 @@ gone, so this list only shrinks. | ||
| 402 | 402 | - **`style/content.ts`, search results** — search results, the inbox's ask cards: `.ask-acts` `.ask-card` `.ask-group` `.ask-kind` `.ask-meta` `.ask-more-acts` `.ask-pick` `.ask-pick-hit` `.ask-short` `.ask-waiting` `.live-toggle` |
| 403 | 403 | - **`pages/board.ts`** — the board itself is §5's **board**; the spend tables `spend.ts` draws wear §5's `.table` and `.stack`, no class of their own |
| 404 | 404 | - **`pages/map.ts`** — the map of what waits for what: `.map-ask` `.map-breath` `.map-canvas` `.map-card` `.map-counts` `.map-dot` `.map-edge` `.map-edge-crit` `.map-edge-done` `.map-empty` `.map-list` `.map-main` `.map-meta` `.map-node` `.map-rule` `.map-svg` `.map-title` `.map-tool` `.map-tools` `.map-who` `.map-who-i` `.map-who-n` `.map-word` `.map-wrap` |
| 405 | - **`studio/feed_style.ts`** — the home feed's cards and its composer (the apps rail is §5's card, row and btn; an admin's tick boxes and Archive are always shown, deliberately, with no Select toggle): `.composer` `.fcard-form` `.fcard-reason` `.fcard-reply` `.fcard-text` `.fcard-unblock` `.fcard-who` `.fcard-why` `.feed` `.feed-head` | |
| 405 | - **`studio/feed_style.ts`** — the home feed's cards and its composer (the apps rail is §5's card, row and btn; an admin's tick boxes and Archive are always shown, deliberately, with no Select toggle): `.composer` `.feed` `.feed-head` | |
| 406 | 406 | --- |
| 407 | 407 | |
| 408 | 408 | ## 6. Keyboard |
src/web/studio/feed_style.ts −10
| @@ -6,14 +6,6 @@ export const feedCss = /* css */ ` | ||
| 6 | 6 | .feed > .card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } |
| 7 | 7 | .feed > .card[hidden] { display: none; } |
| 8 | 8 | .feed .card-foot > details { flex: 1 1 100%; } |
| 9 | .fcard-reason { margin: 0 0 4px; font-size: 1.05em; overflow-wrap: anywhere; } | |
| 10 | .fcard-text { white-space: pre-wrap; } | |
| 11 | /* The planner's reply sits under the thought, indented, one or two lines. */ | |
| 12 | .fcard-reply { margin: 4px 0 0 12px; padding-left: 10px; border-left: 2px solid var(--border); overflow-wrap: anywhere; } | |
| 13 | .fcard-unblock { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin: 0; } | |
| 14 | .fcard-unblock span { flex: 1 1 16ch; min-width: 0; overflow-wrap: anywhere; } | |
| 15 | .fcard-who { font-weight: 600; } | |
| 16 | .fcard-why { margin: 0 0 4px; } | |
| 17 | 9 | /* The composer: the home's one primary action, on top of the timeline. */ |
| 18 | 10 | .composer { display: grid; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--card, var(--bg)); } |
| 19 | 11 | .composer textarea { width: 100%; min-height: 64px; resize: vertical; } |
| @@ -26,8 +18,6 @@ export const feedCss = /* css */ ` | ||
| 26 | 18 | .feed-head { display: none !important; } |
| 27 | 19 | #live-apps { display: none; } |
| 28 | 20 | } |
| 29 | .fcard-form { display: grid; gap: 8px; margin-top: 6px; } | |
| 30 | .fcard-form textarea { width: 100%; min-height: 56px; resize: vertical; } | |
| 31 | 21 | @media (max-width: 600px) { |
| 32 | 22 | .feed .bar .btn { padding: 8px 10px; } |
| 33 | 23 | .feed .disclosure > summary { min-height: 44px; display: flex; align-items: center; } |
src/web/studio/style.ts +1 −1
| @@ -35,7 +35,7 @@ const wordBadges = part(/* css */ ` | ||
| 35 | 35 | const phone = part(/* css */ ` |
| 36 | 36 | @media (max-width: 600px) { |
| 37 | 37 | .feed .card-head { row-gap: 2px; } |
| 38 | .feed .bar .btn, .fcard-form .btn { min-height: 44px; } | |
| 38 | .feed .bar .btn { min-height: 44px; } | |
| 39 | 39 | } |
| 40 | 40 | `); |
| 41 | 41 |
test/flow-card.test.ts +2 −3
| @@ -22,7 +22,7 @@ import { getPull } from "../src/core/pulls.ts"; | ||
| 22 | 22 | import { createForgeApp } from "../src/tui/forge.ts"; |
| 23 | 23 | import { stalledScreen } from "../src/tui/screens/stalled.ts"; |
| 24 | 24 | import { headlessTerminal } from "../src/tui/term/terminal.ts"; |
| 25 | import { feedCss } from "../src/web/studio/feed_style.ts"; | |
| 25 | import { utilities } from "../src/web/style/base.ts"; | |
| 26 | 26 | import { settleApp } from "./helpers/tui.ts"; |
| 27 | 27 | import { unblock } from "../src/flow/unblock.ts"; |
| 28 | 28 | import { stalledRows } from "../src/tui/screens/stalled.ts"; |
| @@ -289,7 +289,6 @@ describe("stalled steps on the home", () => { | ||
| 289 | 289 | const page = await home(); |
| 290 | 290 | expect(page.split("data-flow-card=").length - 1).toBe(stalled().length); |
| 291 | 291 | expect(stalled().length).toBeGreaterThan(6); |
| 292 | expect(feedCss).toContain(".fcard-unblock { display: flex;"); | |
| 293 | expect(feedCss).toContain("flex-wrap: wrap"); | |
| 292 | expect(utilities).toMatch(/\.bar \{[^}]*flex-wrap: wrap/); | |
| 294 | 293 | }); |
| 295 | 294 | }); |
new above
offline