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

panel-redesign: Sign out takes the menu's hover tint

Browse Source 
Follows the design: commit before it. panel.css gains the same four rules
theme.css did (TestPanelCSSIsTheMockupStylesheet holds them equal): the form
stretches the button across the user menu and the button is handed Bulma's
hover / focus / active variables. layout.html already had the form; only its
comment changes.

Checked in the browser on the kit page at 1440: Sign out is as wide as
Account and Help (147 px, 36 px tall), shows the pointer cursor, and is
tinted under the pointer like they are.

go test ./internal/web/...
ok  	github.com/mixeme/selfpost/internal/web
ok  	github.com/mixeme/selfpost/internal/web/auth
ok  	github.com/mixeme/selfpost/internal/web/handlers
ok  	github.com/mixeme/selfpost/internal/web/validate
ok  	github.com/mixeme/selfpost/internal/web/view

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
mix
2026-10-09 18:13:24 +03:00
co-authored by Claude Opus 5.5
parent 5be1504cfc
commit 53c83f690c
3 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/view/static/panel.css
+8
View File
@@ -121,6 +121,14 @@ code { background: var(--sp-well); color: var(--sp-ink); border-radius: 3px; pad
.navbar.is-primary .navbar-dropdown .navbar-item .ti { margin-right: .6rem; color: var(--sp-muted); }
.navbar.is-primary .navbar-dropdown .navbar-item.is-active { color: var(--sp-brick); font-weight: 600; background: var(--sp-brick-tint); }
.navbar.is-primary .navbar-dropdown .navbar-item.is-active .ti { color: var(--sp-brick); }
/* Sign out is a POST, so it is a form with a button rather than a link. Bulma
tints only a.navbar-item; the button is handed the same variables, and the
form stretches it across the menu, so it answers the pointer, the keyboard
and a press exactly like the entries above it. */
.navbar-dropdown form { display: flex; }
.navbar-dropdown button.navbar-item { flex: 1; cursor: pointer; }
.navbar-dropdown button.navbar-item:hover, .navbar-dropdown button.navbar-item:focus { --bulma-navbar-item-background-l-delta: var(--bulma-navbar-item-hover-background-l-delta); }
.navbar-dropdown button.navbar-item:active { --bulma-navbar-item-background-l-delta: var(--bulma-navbar-item-active-background-l-delta); }
.navbar.is-primary .sp-current > .navbar-link, .navbar.is-primary a.navbar-item.sp-current { background: rgb(0 0 0 / .18); }
/* The header is built like the mark: a brick field, then the stamp's paper
margin, and the perforation runs along the outer edge of that margin — round
internal/web/view/templates/layout.html
+3 -3
View File
@@ -127,9 +127,9 @@
{{/* Signing out is a POST (the handler answers nothing else), so it
stays a form that works without scripts. The submit button
carries navbar-item: Bulma resets a button to plain text, so
it takes the dropdown's entry styling like the links around it
(only Bulma's hover tint, which it gives to a.navbar-item
alone, is missing). */}}
it takes the dropdown's entry styling like the links around
it, and panel.css hands it the hover tint Bulma gives to
a.navbar-item alone. */}}
<form method="post" action="/logout"><button type="submit" class="navbar-item"><i class="ti ti-logout"></i>Sign out</button></form>
</div>
</div>