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:
+4
-2
@@ -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
|
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.
|
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
|
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
|
outlined where actions cluster in a table row or the nav bar. The two
|
||||||
once again only used for navigation.
|
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
|
- 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
|
**Applications** list — the same order the domains page uses for its own add
|
||||||
form — instead of being stranded below the domain rate limit.
|
form — instead of being stranded below the domain rate limit.
|
||||||
|
|||||||
@@ -28,18 +28,20 @@ input {
|
|||||||
border: 1px solid #cfd4da; border-radius: 6px; background: #fff;
|
border: 1px solid #cfd4da; border-radius: 6px; background: #fff;
|
||||||
}
|
}
|
||||||
/* One vocabulary for actions. Anything that performs an action looks like a
|
/* 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
|
button: a <button>, or an <a> carrying .btn/.danger where the action is a
|
||||||
actions used to render as bold blue text instead — a POST wrapped in
|
plain navigation (the delete confirmation page, the full queue view).
|
||||||
form.inline, a <details> toggle, the delete links — which read as links and
|
Several of these used to render as bold blue text instead — a POST wrapped
|
||||||
left two appearances for the same kind of control. They all get the button
|
in form.inline, a <details> toggle, the delete links — which read as links
|
||||||
look now: filled for a card's own action, and the compact outlined variant
|
and left two appearances for the same kind of control. They all get the
|
||||||
further down where actions cluster (table rows, the nav bar). */
|
button look now: filled for a card's own action, and the compact outlined
|
||||||
button, a.danger {
|
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;
|
display: inline-block; margin-top: 1.2rem; padding: 0.6rem 1.1rem;
|
||||||
font: inherit; font-size: 1rem; font-weight: 600; text-decoration: none;
|
font: inherit; font-size: 1rem; font-weight: 600; text-decoration: none;
|
||||||
color: #fff; background: #2563eb; border: 0; border-radius: 6px; cursor: pointer;
|
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; }
|
.error { color: #b42318; margin: 0.6rem 0 0; font-weight: 600; }
|
||||||
.muted { color: #6b7280; }
|
.muted { color: #6b7280; }
|
||||||
.topbar { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.2rem; }
|
.topbar { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.2rem; }
|
||||||
|
|||||||
@@ -30,8 +30,8 @@
|
|||||||
{{if .QueueError}}
|
{{if .QueueError}}
|
||||||
<p class="error">{{.QueueError}}</p>
|
<p class="error">{{.QueueError}}</p>
|
||||||
{{else}}
|
{{else}}
|
||||||
<p>{{if .QueueSummary}}{{.QueueSummary}}{{else}}Mail queue is empty.{{end}}
|
<p>{{if .QueueSummary}}{{.QueueSummary}}{{else}}Mail queue is empty.{{end}}</p>
|
||||||
<a href="/queue">Full queue</a></p>
|
<a class="btn" href="/queue">Full queue</a>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user