trevato/forge

Public: anyone can read this; the crew can change it.

More
Forks1g fMapg aRuns18g rEventsFlows

.merge-box, .merge-form, .merge-headline and .merge-sub leave the stylesheet #4639

Merged masoncrew opened this

Check · Review · Land · Live done — Landed and live in production.

ConversationFiles
Merged

mason/forge:mason/4609-merge-box-merge-form-merge-headline-and → main 5 commits fork

  • Merged. mason/4609-merge-box-merge-form-merge-headline-and was merged into main as aef4cca.

Review

Sign in to review this change.
5 files changed +5 −29
docs/DESIGN.md +1 −1
@@ -395,7 +395,7 @@ gone, so this list only shrinks.
395395 A `.field` directly inside a `.bar` drops its bottom margin and the bar aligns to the end, so a labelled input and its button share a baseline
396396 - **`style/components.ts`** — parts of the §5 components that the table does not spell out — the palette's list, the menu's items, a dialog's head and foot, comments, the theme picker — and a few small helpers beside them: `.cat` `.clone` `.clone-text` `.comment` `.comment-body` `.comment-form` `.dash` `.dialog-body` `.dialog-foot` `.dialog-head` `.empty-title` `.error-note` `.field-row` `.form-actions` `.hex` `.ico` `.ico-loader` `.list` `.menu-item` `.menu-panel` `.menu-sep` `.menu-title` `.palette-empty` `.palette-foot` `.palette-group` `.palette-heading` `.palette-input` `.palette-item` `.palette-list` `.passkey` `.passkey-off` `.passkey-on` `.preview` `.sep` `.split` `.sprite` `.swatch` `.table-scroll` `.tell-here` `.theme-apply` `.theme-option` `.tick` `.timeline` `.tl-dot` `.toast-body` `.topbar-search`
397397 - **`style/components.ts`, settings rows** — a list whose rows are settings (limits, capacity): the `<ul class="list setting-list">` lets title and meta wrap instead of ellipsizing, and a row's controls take their own line under 640px. `.row-fields` is the form in that row's trail (input, Save, Default): always visible, never hover-gated, wrapping under the text before it would clip. Use both for any page whose rows show a name, a current value, and a control to change it; use `.row-actions` only for secondary actions (delete, wake, pin, revoke). Flags, telemetry, cloud, people, crew roles and subscription headroom/budget use `.row-fields`. Classes: `.row-fields` `.setting-list`
398 - **`style/content.ts`, page furniture** — what frames a page's content: page and repo heads, the merge box, the front page and its tiles, explore, backups, boards, the fleet chart's series colours, lineage: `.bform` `.bgrid` `.bmanage` `.bp-h2` `.bp-h3` `.bp-w2` `.bp-w3` `.break` `.bt-bar` `.bt-grid` `.bt-group` `.bt-hist` `.bt-name` `.bt-procs` `.bt-row` `.bt-val` `.commit-body` `.commit-head` `.domain-records` `.fg-s0` `.fg-s1` `.fg-s2` `.fg-s3` `.fg-s4` `.fg-s5` `.fg-s6` `.fg-s7` `.filters` `.flag-form` `.front-admin` `.front-controls` `.front-crew` `.front-featured` `.front-featured-body` `.front-featured-look` `.front-issues` `.front-live` `.front-more` `.front-pick` `.frozen` `.frozen-form` `.frozen-sentence` `.headroom` `.issue-head` `.issue-meta` `.merge-box` `.merge-form` `.merge-headline` `.merge-sub` `.mirror-form` `.number` `.origin-mark` `.origin-name` `.origin-row` `.owner` `.page-head` `.path-head` `.policy-line` `.qf` `.repo-actions` `.repo-audience` `.repo-desc` `.repo-layout` `.repo-lineage` `.repo-title` `.search` `.slash` `.stage-detail` `.stage-dot` `.steps` `.sub` `.sys-pair` `.table-wrap` `.tok` `.wall-cells` `.where-sep`
398 - **`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: `.bform` `.bgrid` `.bmanage` `.bp-h2` `.bp-h3` `.bp-w2` `.bp-w3` `.break` `.bt-bar` `.bt-grid` `.bt-group` `.bt-hist` `.bt-name` `.bt-procs` `.bt-row` `.bt-val` `.commit-body` `.commit-head` `.domain-records` `.fg-s0` `.fg-s1` `.fg-s2` `.fg-s3` `.fg-s4` `.fg-s5` `.fg-s6` `.fg-s7` `.filters` `.flag-form` `.front-admin` `.front-controls` `.front-crew` `.front-featured` `.front-featured-body` `.front-featured-look` `.front-issues` `.front-live` `.front-more` `.front-pick` `.frozen` `.frozen-form` `.frozen-sentence` `.headroom` `.issue-head` `.issue-meta` `.mirror-form` `.number` `.origin-mark` `.origin-name` `.origin-row` `.owner` `.page-head` `.path-head` `.policy-line` `.qf` `.repo-actions` `.repo-audience` `.repo-desc` `.repo-layout` `.repo-lineage` `.repo-title` `.search` `.slash` `.stage-detail` `.stage-dot` `.steps` `.sub` `.sys-pair` `.table-wrap` `.tok` `.wall-cells` `.where-sep`
399399 - **`style/content.ts`, code view** — the source view and the syntax-highlight token classes `highlight-html.ts` builds as `tok-${kind}`: `.blob-view` `.ln` `.tok-attribute` `.tok-comment` `.tok-constant` `.tok-decorator` `.tok-deleted` `.tok-emphasis` `.tok-function` `.tok-heading` `.tok-inserted` `.tok-keyword` `.tok-link` `.tok-meta` `.tok-number` `.tok-operator` `.tok-plain` `.tok-property` `.tok-punctuation` `.tok-regex` `.tok-string` `.tok-tag` `.tok-type` `.tok-variable`
400400 - **`style/content.ts`, prose (markdown)** — table cell alignment, built by `markdown.ts` as `ta-${align}`: `.ta-c` `.ta-r`
401401 - **`style/content.ts`, diff viewer** — the diff table: its gutters, line kinds, file head and inline review comments: `.add` `.del` `.dh` `.diff` `.diff-body` `.diff-head` `.diff-note` `.diff-path` `.diff-stat` `.diff-stub` `.diff-summary` `.diff-table` `.dl` `.dl-review` `.dn` `.dn-comment` `.nonl` `.rc-hidden` `.rc-resolve` `.rc-resolved` `.wd`
src/web/style/content.ts −21
@@ -224,27 +224,6 @@ a.origin-chip:hover { border-color: var(--border-strong); color: var(--fg); }
224224 .bar .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
225225 @media (max-width: 420px) { .bar .seg > a { padding: 0 8px; } }
226226
227 .merge-box { margin-top: 14px; }
228 .merge-box .card-body { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
229 /* Only the verdict glyph, never the merge button's own icon. */
230 .merge-box .card-body > .ico { margin-top: 2px; flex: none; color: var(--muted-fg); }
231 .merge-box[data-tone="success"] .card-body > .ico { color: var(--success); }
232 .merge-box[data-tone="danger"] .card-body > .ico { color: var(--danger); }
233 .merge-box[data-tone="merged"] .card-body > .ico { color: var(--merged); }
234 .merge-box .card-body > .grow { flex: 1 1 220px; }
235 .merge-headline { font-weight: 600; text-wrap: pretty; }
236 .merge-sub { color: var(--muted-fg); font-size: 13px; margin-top: 2px; text-wrap: pretty; }
237 .merge-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: none; }
238 .merge-form select { min-width: 150px; width: auto; }
239 /* On a phone the sentence gets the width and the controls go under it, with
240 the primary action full-width where the thumb already is. */
241 @media (max-width: 719px) {
242 .merge-box .card-body > .grow { flex-basis: 100%; }
243 .merge-box .merge-form, .merge-box .merge-form > form { width: 100%; }
244 .merge-box .merge-form select { flex: 1 1 140px; }
245 .merge-box .merge-form .btn { flex: 1 1 180px; }
246 }
247
248227 .commit-head .card-body { padding: 14px 16px; }
249228 .commit-body {
250229 white-space: pre-wrap; font-family: var(--mono); font-size: 12.5px;
test/policy.test.ts +1 −2
@@ -245,8 +245,7 @@ describe("a pull at the wall", () => {
245245 );
246246 expect(body).toContain("note.create as anon: was no, now yes");
247247 // The wall is §5's card, its headline in the head: no merge-* class.
248 for (const name of ["merge-box", "merge-form", "merge-headline", "merge-sub"])
249 expect(body).not.toContain(name);
248 expect(body).not.toMatch(/\bmerge-(?:box|form|headline|sub)\b/);
250249 expect(body).toMatch(
251250 /<div class="card-head">[\s\S]*?<strong\s*>This pull changes the policy: one door opens wider\.<\/strong/,
252251 );
test/pull-merge-box.test.ts +2 −3
@@ -29,8 +29,7 @@ const boxOf = async (repo: string): Promise<string> => {
2929 { headers: { cookie: `forge_session=${createSession(app.db, alice.id).token}` } },
3030 );
3131 const body = await res.text();
32 for (const name of ["merge-box", "merge-form", "merge-headline", "merge-sub"])
33 expect(body).not.toContain(name);
32 expect(body).not.toMatch(/\bmerge-(?:box|form|headline|sub)\b/);
3433 const at = body.search(/<div\s+class="card mt"[^>]*data-tone=/);
3534 expect(at).toBeGreaterThan(-1);
3635 return body.slice(at, body.indexOf("</ul>", at)).replace(/\s+/g, " ");
@@ -38,7 +37,7 @@ const boxOf = async (repo: string): Promise<string> => {
3837
3938 beforeAll(async () => {
4039 process.env["FORGE_CELLS"] = "off";
41 dataDir = await mkdtemp(join(tmpdir(), "forge-merge-box-"));
40 dataDir = await mkdtemp(join(tmpdir(), "forge-merge-card-"));
4241 app = createApp({ dataDir, port: 0 });
4342 servers = await serve(app);
4443 const made = await createUser(app.db, {
test/web-browse.test.ts +1 −2
@@ -477,8 +477,7 @@ describe("browsing an origin repository on the web", () => {
477477
478478 test("a live pull's merge box is §5's card and row, with no merge-* class", async () => {
479479 const pull = await bodyOf(alice, `${browse}/pulls/9`);
480 for (const name of ["merge-box", "merge-form", "merge-headline", "merge-sub"])
481 expect(pull).not.toContain(name);
480 expect(pull).not.toMatch(/\bmerge-(?:box|form|headline|sub)\b/);
482481 const box =
483482 (pull.match(/<div\s+class="card mt"[^>]*data-tone="attn"[\s\S]*?<\/ul>/)?.[0] ?? "")
484483 .replace(/\s+/g, " ");

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs