panel: make the status page's "Full queue" a button

It was a bare link trailing the queue-summary sentence, while the two
other card actions on the same page (Re-check DNS, Reload configuration)
are buttons. Pull it out of the paragraph and give it the filled button
style through a new a.btn class — the same base rule a.danger already
used, so an action that happens to be a navigation still looks like
every other action.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-03 16:26:20 +03:00
parent 337c8e8f0e
commit e87a55b657
3 changed files with 16 additions and 12 deletions
+4 -2
View File
@@ -19,8 +19,10 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); version
render as bold blue text while everything else was a button, so the same
kind of control looked like two different things, sometimes within one card.
They are all buttons now: filled for a card's own action, compact and
outlined where actions cluster in a table row or the nav bar. An `<a>` is
once again only used for navigation.
outlined where actions cluster in a table row or the nav bar. The two
actions that are really navigations — "Delete domain" and the status page's
"Full queue" — are anchors carrying the same button styling. A bare link is
left only where it reads as part of a sentence, a table cell or the nav.
- panel: on the domain page **Add an application** now sits directly above the
**Applications** list — the same order the domains page uses for its own add
form — instead of being stranded below the domain rate limit.
+10 -8
View File
@@ -28,18 +28,20 @@ input {
border: 1px solid #cfd4da; border-radius: 6px; background: #fff;
}
/* One vocabulary for actions. Anything that performs an action looks like a
button; an <a> stays a plain link and is only used for navigation. Several
actions used to render as bold blue text instead — a POST wrapped in
form.inline, a <details> toggle, the delete links — which read as links and
left two appearances for the same kind of control. They all get the button
look now: filled for a card's own action, and the compact outlined variant
further down where actions cluster (table rows, the nav bar). */
button, a.danger {
button: a <button>, or an <a> carrying .btn/.danger where the action is a
plain navigation (the delete confirmation page, the full queue view).
Several of these used to render as bold blue text instead — a POST wrapped
in form.inline, a <details> toggle, the delete links — which read as links
and left two appearances for the same kind of control. They all get the
button look now: filled for a card's own action, and the compact outlined
variant further down where actions cluster (table rows, the nav bar). Bare
<a> is left for links that read as part of a sentence or a list. */
button, a.btn, a.danger {
display: inline-block; margin-top: 1.2rem; padding: 0.6rem 1.1rem;
font: inherit; font-size: 1rem; font-weight: 600; text-decoration: none;
color: #fff; background: #2563eb; border: 0; border-radius: 6px; cursor: pointer;
}
button:hover { background: #1d4ed8; }
button:hover, a.btn:hover { background: #1d4ed8; }
.error { color: #b42318; margin: 0.6rem 0 0; font-weight: 600; }
.muted { color: #6b7280; }
.topbar { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.2rem; }
+2 -2
View File
@@ -30,8 +30,8 @@
{{if .QueueError}}
<p class="error">{{.QueueError}}</p>
{{else}}
<p>{{if .QueueSummary}}{{.QueueSummary}}{{else}}Mail queue is empty.{{end}}
<a href="/queue">Full queue</a></p>
<p>{{if .QueueSummary}}{{.QueueSummary}}{{else}}Mail queue is empty.{{end}}</p>
<a class="btn" href="/queue">Full queue</a>
{{end}}
</div>