mixandClaude Opus 5.5
9d330bed77
Follows the two design commits before it (owner's decisions quoted there). Kit: a new component, Sheet / SheetRow (components.go), partials sheet_tag and sheet (components.html), its rules in panel.css as in theme.css, and its sample on the kit page next to status_tag. It is the browser's popover: no script. Inbound log: the Why column is gone; the decision tag opens a sheet with who decided, then either the filter's verdict and its symbols one a line (a detail the journal milter wrote) or the reply (a detail the tailer read from mail.log - it starts with its code), and the subject whole. The sheet's id is the journal row's. A row Postfix itself refused no longer links to the filter lists. Tests: the page fixture and view tests for the sheet's markup and content (TestWhyRows), the link rule, three Deny and two Allow on the mockup's six rows; e2e reads "Decided by" and "Reply" from the sheet and wants no sender link on the refused row. Seen: the fixture page with a sheet open, headless Edge at 1360 px - the same as the accepted drawing. Checked on the test server, uncommitted tree: go vet ./... ok, go test ./... ok (22 packages), make e2e ok. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
155 lines
6.5 KiB
HTML
155 lines
6.5 KiB
HTML
{{/* The kit page (GET /server/components): every partial of components.html in
|
|
every state, filled from kit.go — the mockup components page rebuilt with
|
|
the real templates. Like any page it is thin: partial calls with structs,
|
|
Bulma layout classes, and the page utilities; the markup of a component is
|
|
written in components.html and nowhere else. */}}
|
|
{{define "content"}}
|
|
{{template "page_head" .Head}}
|
|
|
|
{{template "flash" .Flash}}
|
|
{{template "flash" .FlashError}}
|
|
|
|
{{template "box_open" .Layouts}}
|
|
{{template "body_open"}}
|
|
{{template "facts" .LayoutFacts}}
|
|
{{template "body_close"}}
|
|
{{template "box_close"}}
|
|
|
|
<div class="columns">
|
|
<div class="column is-6">
|
|
{{template "box_open" .Postmark}}
|
|
{{template "body_open"}}
|
|
<div class="buttons">{{range .Postmarks}}
|
|
{{template "postmark" .}}{{end}}
|
|
</div>
|
|
<p class="sp-muted">Only inside page_head, at most one per page, and only where the page has a verdict to give.</p>
|
|
{{template "body_close"}}
|
|
{{template "box_close"}}
|
|
|
|
{{template "box_open" .StatusTag}}
|
|
<div class="table-container"><table class="table is-fullwidth">
|
|
<thead><tr><th>Status</th><th>Tag</th><th>Bulma classes</th></tr></thead>
|
|
<tbody>{{range .StatusRows}}
|
|
<tr><td>{{.Words}}</td><td>{{template "tag" .Tag}}</td><td class="sp-mono sp-small">{{status_tag .Tag.Status}}</td></tr>{{end}}
|
|
<tr><td>a tag that opens a <code>sheet</code></td><td>{{template "sheet_tag" .Sheet}}</td><td class="sp-mono sp-small">button.tag + sp-sheet (popover)</td></tr>
|
|
</tbody>
|
|
</table></div>
|
|
{{template "box_close"}}
|
|
</div>
|
|
|
|
<div class="column is-6">
|
|
{{template "box_open" .BoxHead}}
|
|
{{template "body_open"}}
|
|
<p class="mb-2">The <i class="ti ti-help-circle"></i> after the end slot is <code>sp-help</code>: an optional link to the section's topic on the Help page. It replaces today's help drawer.</p>
|
|
<p>box_body — padded content. A <code>table</code> or a run of <code>sp-record</code> blocks sits directly in the box, without box_body.</p>
|
|
{{template "body_close"}}
|
|
{{template "box_foot" .BoxFoot}}
|
|
{{template "box_close"}}
|
|
|
|
{{template "box_open" .DangerZone}}
|
|
{{template "body_open"}}
|
|
<p>For destructive confirmations and the "delete" entry of a settings page. The number may be an icon when the box is not part of a sequence.</p>
|
|
{{template "body_close"}}
|
|
{{template "box_close"}}
|
|
|
|
{{template "box_open" .Credential}}
|
|
{{template "body_open"}}
|
|
<p>Only for a secret the panel will never show again.</p>
|
|
{{template "body_close"}}
|
|
{{template "box_close"}}
|
|
</div>
|
|
</div>
|
|
|
|
{{template "box_open" .HealthCard}}
|
|
{{template "health_cards" .HealthCards}}
|
|
{{template "box_close"}}
|
|
|
|
<div class="columns">
|
|
<div class="column is-7">
|
|
{{template "box_open" .DNSRecord}}
|
|
{{range .Records}}{{template "dns_record" .}}
|
|
{{end}}{{template "box_close"}}
|
|
|
|
{{template "box_open" .Tables}}
|
|
<div class="table-container"><table class="table is-fullwidth is-hoverable">
|
|
<thead><tr><th>Time, UTC</th><th>Name</th><th>sp-clip</th><th>Status</th><th></th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="sp-mono sp-muted sp-nowrap sp-small">09-21 14:01:52</td><td><a href="#"><strong>the row's link</strong></a></td><td class="sp-clip">A long subject is clipped with an ellipsis instead of wrapping the row</td><td><span class="{{status_tag "sent"}}">sent</span></td><td class="sp-actions"><a href="#">Details</a>{{template "row_action" .RowAction}}</td></tr>
|
|
</tbody>
|
|
</table></div>
|
|
{{template "box_foot" .TablesFoot}}
|
|
{{template "box_close"}}
|
|
|
|
{{template "box_open" .LogPane}}
|
|
{{template "log_pane" .LogLines}}
|
|
{{template "box_close"}}
|
|
</div>
|
|
|
|
<div class="column is-5">
|
|
{{template "box_open" .Facts}}
|
|
{{template "body_open"}}
|
|
{{template "facts" .FactList}}
|
|
{{template "body_close"}}
|
|
{{template "box_close"}}
|
|
|
|
{{template "box_open" .Timeline}}
|
|
{{template "body_open"}}
|
|
{{template "timeline" .Steps}}
|
|
{{template "body_close"}}
|
|
{{template "box_close"}}
|
|
|
|
{{template "box_open" .EmptyState}}
|
|
{{template "empty_state" .Empty}}
|
|
{{template "box_close"}}
|
|
|
|
{{template "box_open" .ConfirmList}}
|
|
{{template "body_open"}}
|
|
{{template "confirm_list" .Confirm}}
|
|
{{template "body_close"}}
|
|
{{template "box_close"}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column is-3">
|
|
{{template "side_menu" .SideMenu}}
|
|
</div>
|
|
<div class="column is-9">
|
|
{{template "box_open" .FormRows}}
|
|
{{template "body_open"}}
|
|
<div class="sp-form">
|
|
<div class="sp-row">
|
|
<div class="field"><label class="label">sp-row — a wide field</label><div class="control"><input class="input" value="host"></div></div>
|
|
<div class="field"><label class="label">and a short one</label><div class="control"><input class="input" value="25"></div></div>
|
|
</div>
|
|
<div class="sp-pair">
|
|
<div class="field"><label class="label">sp-pair — two equal fields</label><div class="control"><input class="input" type="password"></div></div>
|
|
<div class="field"><label class="label">Repeat</label><div class="control"><input class="input" type="password"></div><p class="help">Help text lives in Bulma's <code>help</code>.</p></div>
|
|
</div>
|
|
</div>
|
|
{{template "route" .Route}}
|
|
{{template "body_close"}}
|
|
{{template "help_topic" .HelpTopic}}
|
|
{{template "box_close"}}
|
|
</div>
|
|
</div>
|
|
|
|
{{template "box_open" .Shell}}
|
|
{{template "body_open"}}
|
|
{{template "facts" .ShellFacts}}
|
|
{{template "body_close"}}
|
|
{{template "box_close"}}
|
|
|
|
{{template "box_open" .TypeScale}}
|
|
<div class="table-container"><table class="table is-fullwidth">
|
|
<thead><tr><th>Size</th><th>Looks like</th><th>Used for</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="sp-mono sp-small">body · 16px</td><td>The quick brown fox, 203.0.113.25</td><td class="sp-muted">Text, table cells, inputs, selects, buttons, menus and their dropdowns</td></tr>
|
|
<tr><td class="sp-mono sp-small">--sp-fs-s · 14px</td><td class="sp-small">The quick brown fox, <span class="sp-mono">203.0.113.25</span></td><td class="sp-muted">Supporting text: labels, <code>help</code>, notes in a box head or foot, mono values (<code>sp-small</code>), logs, the footer</td></tr>
|
|
<tr><td class="sp-mono sp-small">--sp-fs-xs · 13px</td><td>{{template "kicker" .KickerSample}} <span class="tag is-light">tag</span></td><td class="sp-muted">Upper-case mono micro-labels (kicker, table head, <code>dt</code>, box title) and tags — nothing else</td></tr>
|
|
</tbody>
|
|
</table></div>
|
|
{{template "box_foot" .TypeScaleFoot}}
|
|
{{template "box_close"}}
|
|
{{end}}
|