release: 0.6.0: Delivery detail page, DNS badge, machine metrics, wide layout

A page per delivery (`/deliveries/{id}`), reached from the *Details* link on
Added:
  - A page per delivery (`/deliveries/{id}`), reached from the *Details* link on
  - A **DNS** badge in the domain list, one per row, carrying the same
  - Machine metrics on the status page: a **Machine** card reporting the
  - An index of the current page's own sections in the navigation column, for the
Changed:
  - Every panel page is laid out in one column of the same width, so moving
  - The mark's small-size variant — the tab icon and the `SP` initials it
  - The stamp's `SELF-HOSTED SMTP RELAY` line is set at 11.5/0.15 instead of
  - The delivery log lists what identifies a message and nothing else: time,
  - Subjects are decoded for display as well as on the way in, so the rows the
  … (4 more in CHANGELOG)

Full detail: CHANGELOG.md (0.6.0).

internal/web/templates/layout.html

@@ -22,13 +22,20 @@
 <script src="/static/panel.js" defer></script>
 </head>
 <body>
-{{/* The page name travels onto <main> as a class so the stylesheet can size a
-     page to what it holds — the monitoring pages are wider than the panel's
-     form pages (see main.page-* in panel.css). It is .Active, already carried
-     for the navigation, rather than a second field every handler would have to
-     remember to set. */}}
-<main class="page-{{.Active}}">
+{{/* Two columns: the navigation on the left and the page beside it, centred
+     together (see .shell in panel.css). The signed-out pages have no navigation
+     and the shell holds their card alone. */}}
+<div class="shell">
 {{if .User}}{{template "nav" .}}{{end}}
+{{/* The page name travels onto <main> as a class so the stylesheet can size a
+     page to what it holds — the signed-out pages are narrower than the rest
+     (see main.page-* in panel.css). It is .Active, already carried for the
+     navigation, rather than a second field every handler would have to
+     remember to set. The "wide" block beside it is how a page made of data
+     asks for the whole column instead of the reading measure; it is the page's
+     own declaration rather than a name in the stylesheet, since .Active cannot
+     tell the send log from a single delivery's page. */}}
+<main class="page-{{.Active}} {{template "wide" .}}">
 {{template "content" .}}
 {{/* The running version, on every authenticated page: it is what a backup
      manifest is checked against on restore and the first thing to establish
@@ -36,6 +43,7 @@
      the login and setup pages must not advertise it to the internet. */}}
 {{if .User}}<footer class="version">SelfPost {{.Version}}</footer>{{end}}
 </main>
+</div>
 </body>
 </html>{{end}}
 
@@ -46,21 +54,11 @@
      .User and get no nav. */}}
 {{define "nav"}}
 <nav class="nav">
-  {{/* The top row is first here because it is drawn first (see .nav in
-       panel.css), which keeps the tab order matching the visual one. It holds
-       the mark on the left and the session block on the right; the page entries
-       follow underneath. The mark goes to /status, the page the panel opens on —
-       named outright rather than as "/", which is only a redirect to it. */}}
-  <div class="top">
-    <a class="brand" href="/status"><img src="/static/logo-compact.svg" width="110" height="50" alt="SelfPost"></a>
-    <div class="session">
-      <span class="muted">{{.User}}</span>
-      {{if eq .Active "account"}}<span aria-current="page">{{template "icon-account"}}Account</span>{{else}}<a href="/account">{{template "icon-account"}}Account</a>{{end}}
-      <form class="inline" method="post" action="/logout">
-        <button type="submit" class="danger">{{template "icon-sign-out"}}Sign out</button>
-      </form>
-    </div>
-  </div>
+  {{/* The order of the blocks is the order they are read in, top to bottom of
+       the column: the mark, the panel's pages, the current page's own sections,
+       and the session last. The mark goes to /status, the page the panel opens
+       on — named outright rather than as "/", which is only a redirect to it. */}}
+  <a class="brand" href="/status"><img src="/static/logo-compact.svg" width="220" height="100" alt="SelfPost"></a>
   <div class="links">
     {{if eq .Active "status"}}<span aria-current="page">{{template "icon-status"}}Status</span>{{else}}<a href="/status">{{template "icon-status"}}Status</a>{{end}}
     {{if eq .Active "domains"}}<span aria-current="page">{{template "icon-domains"}}Domains</span>{{else}}<a href="/domains">{{template "icon-domains"}}Domains</a>{{end}}
@@ -69,9 +67,35 @@
     {{if eq .Active "system_log"}}<span aria-current="page">{{template "icon-system-log"}}System log</span>{{else}}<a href="/system-log">{{template "icon-system-log"}}System log</a>{{end}}
     {{if eq .Active "backup"}}<span aria-current="page">{{template "icon-backup"}}Backup</span>{{else}}<a href="/backup">{{template "icon-backup"}}Backup</a>{{end}}
   </div>
+  {{template "sections" .}}
+  <div class="session">
+    <span class="muted">{{.User}}</span>
+    {{if eq .Active "account"}}<span aria-current="page">{{template "icon-account"}}Account</span>{{else}}<a href="/account">{{template "icon-account"}}Account</a>{{end}}
+    <form class="inline" method="post" action="/logout">
+      <button type="submit" class="danger">{{template "icon-sign-out"}}Sign out</button>
+    </form>
+  </div>
 </nav>
 {{end}}
 
+{{/* The index of the current page's own sections, shown in the navigation
+     column under the page entries. Most pages are one or two cards and need no
+     index, so the block is empty here and only the pages that are genuinely
+     long — the domain page, the status page — redefine it with their own list
+     (see .sections in panel.css for what it looks like, and panel.js for the
+     marking of the section in view). Each page's template file is parsed after
+     this one, so its definition replaces this empty one; a page that defines
+     nothing keeps it and renders no index. */}}
+{{define "sections"}}{{end}}
+
+{{/* Whether the page takes the column whole. Empty here, so a page is held to
+     the reading measure unless it says otherwise; the three pages that are
+     tables of data or raw log lines redefine this as the word "wide", which
+     lands in <main>'s class list (see main.wide in panel.css). Same mechanism
+     as "sections" above: each page's template file is parsed after this one,
+     so its definition replaces the empty one. */}}
+{{define "wide"}}{{end}}
+
 {{/* Navigation icons. Inline SVG rather than an icon font or sprite file: they
      inherit the link's colour through currentColor, cost no extra request, and
      need no exemption from the panel's "default-src 'self'" policy. Each is