mix/selfpost
1
0
Fork 0
Code Issues Pull Requests Actions 21 Packages Projects Releases Wiki Activity

dns-record-collapse: a published record is drawn folded
test / test (push) Waiting to run
Details

Browse Source 
The dns_record partial draws a record whose tag is "published" and that
has no "In DNS now" (Record.Folded) as a <details> whose summary is the
head - name, tag, "Show values" - with the host, type and value behind
it, as the mockup of fffee9c. Every other record stays a <div>, open.
One partial, so the outbound domain's page, the inbound domain's and
Settings › Notification mail change together; panel.css takes the
mockup's rules, help.go the help's sentence word for word.

Re-check DNS posts and redirects to the page, which is drawn from the
fresh check: a record that has just turned right comes back folded. No
page that draws records polls them, so nothing has to keep a fold open.

Tests: the dns_record partial folds only a published record and closes
the block it opened (TestDNSRecordFoldsOnlyWhenPublished); the mismatch
test reads the folded head. go vet + go test (26 packages) and make e2e
on the test server for this tree.

CHANGELOG [Unreleased]; roadmap row done, its section says what was
decided.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
mix
2026-10-16 12:34:28 +03:00
co-authored by Claude Opus 5.5
parent fffee9cb5d
commit 51f303c466
7 changed files with 74 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/view/static/panel.css
+13 -1
View File
@@ -269,6 +269,17 @@ code { background: var(--sp-well); color: var(--sp-ink); border-radius: 3px; pad
.sp-record-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.sp-record-head h3 { font-size: 1rem; font-weight: 600; margin: 0; }
.sp-record-head small { margin-left: auto; color: var(--sp-muted); text-align: right; }
/* A record DNS already holds as shown is folded to its head: a <details>
whose summary is the head, opened without script. */
details.sp-record > summary { list-style: none; cursor: pointer; }
details.sp-record > summary::-webkit-details-marker { display: none; }
details.sp-record:not([open]) > summary { margin-bottom: 0; }
details.sp-record:not([open]) > summary small { display: none; }
details.sp-record[open] .sp-record-head small + .sp-record-toggle { margin-left: 0; }
.sp-record-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; color: var(--sp-brick); font-size: var(--sp-fs-s); white-space: nowrap; }
.sp-record-toggle span + span { display: none; }
details.sp-record[open] .sp-record-toggle span { display: none; }
details.sp-record[open] .sp-record-toggle span + span { display: inline; }
.sp-record .label, .sp-form .label { font-weight: 500; color: var(--sp-ink-2); margin-bottom: .25rem; }
.sp-record .label { font-weight: 400; color: var(--sp-muted); }
.input[readonly], .textarea[readonly] { font-family: var(--sp-mono); font-size: var(--sp-fs-s); background: var(--sp-well); box-shadow: none; }
@@ -324,7 +335,8 @@ code { background: var(--sp-well); color: var(--sp-ink); border-radius: 3px; pad
.sp-health { grid-template-columns: repeat(2, 1fr); }
.sp-row, .sp-pair { grid-template-columns: 1fr; }
.sp-record-head { flex-wrap: wrap; }
.sp-record-head small { margin-left: 0; text-align: left; flex-basis: 100%; }
.sp-record-head small { margin-left: 0; text-align: left; flex-basis: 100%; order: 1; }
details.sp-record[open] .sp-record-head small + .sp-record-toggle { margin-left: auto; }
.sp-postmark { display: none; }
.sp-cards { display: flex; flex-direction: column; padding-inline: .75rem; }
.sp-cards > .column { display: contents; }