Public: anyone can read this; the crew can change it.
.front-controls, .app-shelf leave the stylesheet and docs/DESIGN.md §5d #4672
Check · Review · Land · Live done — Landed and live in production.
mason/forge:mason/4297-front-controls-app-shelf-leave-the-style → main 9 commits fork 1 thread · 1 unresolved
3 files
changed +7
−7
docs/DESIGN.md +1 −1
| @@ -396,7 +396,7 @@ gone, so this list only shrinks. | ||
| 396 | 396 | - **`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` `.comment` `.comment-body` `.comment-form` `.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` `.preview` `.sep` `.split` `.sprite` `.swatch` `.table-scroll` `.tell-here` `.theme-apply` `.theme-option` `.tick` `.timeline` `.tl-dot` `.toast-body` `.topbar-search` |
| 397 | 397 | `.split` is the one two-column page: main, then an `<aside>` rail of 260px that sticks from 960px. `data-rail="wide"` on it (the studio's home and an app's page) widens the rail to 320px from 900px, drops the top margin, and lets the rail scroll with the page, since a column of cards runs taller than a screen |
| 398 | 398 | - **`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` |
| 399 | - **`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` `.headroom` `.issue-head` `.issue-meta` `.number` `.owner` `.page-head` `.policy-line` `.qf` `.repo-actions` `.repo-audience` `.repo-desc` `.repo-layout` `.repo-lineage` `.repo-title` `.search` `.slash` `.sub` `.table-wrap` `.tok` `.where-sep` | |
| 399 | - **`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-crew` `.front-featured` `.front-featured-body` `.front-featured-look` `.front-issues` `.front-live` `.front-more` `.front-pick` `.headroom` `.issue-head` `.issue-meta` `.number` `.owner` `.page-head` `.policy-line` `.qf` `.repo-actions` `.repo-audience` `.repo-desc` `.repo-layout` `.repo-lineage` `.repo-title` `.search` `.slash` `.sub` `.table-wrap` `.tok` `.where-sep` | |
| 400 | 400 | - **`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` |
| 401 | 401 | - **`style/content.ts`, prose (markdown)** — table cell alignment, built by `markdown.ts` as `ta-${align}`: `.ta-c` `.ta-r` |
| 402 | 402 | - **`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` `.dn` `.dn-comment` `.nonl` `.wd` |
src/web/studio/home.ts +1 −1
| @@ -473,7 +473,7 @@ function frontControls(ctx: Ctx, front: FrontPage): Html { | ||
| 473 | 473 | { |
| 474 | 474 | head: html`${icon("settings")} |
| 475 | 475 | <h2>The front page</h2>`, |
| 476 | extra: "front-controls", | |
| 476 | attrs: html`data-front-settings`, | |
| 477 | 477 | }, |
| 478 | 478 | ); |
| 479 | 479 | } |
src/web/style/content.ts +5 −5
| @@ -313,11 +313,11 @@ form.inline { display: inline; margin-left: auto; } | ||
| 313 | 313 | .front-admin { max-width: 1040px; margin-inline: auto; } |
| 314 | 314 | .front-pick { gap: 8px; } |
| 315 | 315 | .front-pick form.inline { margin-left: 0; } |
| 316 | .front-controls .bar { padding: 12px 16px; gap: 8px 12px; } | |
| 317 | .front-controls .bar:has(> [name=repo]) { flex-wrap: nowrap; } | |
| 318 | .front-controls .bar > [name=repo] { flex: 1; min-width: 0; } | |
| 319 | .front-controls label .input { width: 4.5em; margin-left: 4px; } | |
| 320 | .front-controls .small { padding: 0 16px 14px; } | |
| 316 | .card[data-front-settings] .bar { padding: 12px 16px; gap: 8px 12px; } | |
| 317 | .card[data-front-settings] .bar:has(> [name=repo]) { flex-wrap: nowrap; } | |
| 318 | .card[data-front-settings] .bar > [name=repo] { flex: 1; min-width: 0; } | |
| 319 | .card[data-front-settings] label .input { width: 4.5em; margin-left: 4px; } | |
| 320 | .card[data-front-settings] .small { padding: 0 16px 14px; } | |
| 321 | 321 | @media (max-width: 520px) { |
| 322 | 322 | /* Two to a row on a phone: a few live apps in one screen, not a scroll. */ |
| 323 | 323 | .stack[data-shelf] { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } |
new above
offline