relay: burger menu for mobile, admin reachable, badge matches header buttons
The relay's nav row used to flatten on mobile by hiding admin / user
identity / compose buttons outright, leaving only "account" + "logout".
Admin was completely unreachable from a phone. Replaces that with a
proper burger menu and exposes every nav target.
* layout.php: new <button id="nav-burger"> with a ph-list icon between
the spacer and #nav-buttons. Inline `style="display:flex"` removed
from #nav-buttons — display is now CSS-driven, so the burger
popover and the desktop row don't fight each other.
* app.js showView(): the mobile-block on `name === 'admin'` is gone.
Burger button visibility is now mirrored against the same
setup/login/change-password gating that hides #nav-buttons. Picking
any view also clears `.menu-open` so the popover collapses behind
the freshly-shown view.
* app.js toggleNavMenu(): exposed on window for the inline onclick.
Document-level click outside closes the menu.
* style.css: default `#nav-buttons:not(.hidden)` becomes flex (same
semantics as the old inline). #nav-burger is `display:none` on
desktop, `inline-flex` on mobile. Mobile media query drops the old
display:none rules for #nav-admin / #view-admin / #nav-compose,
keeps #nav-user hidden (redundant with the menu), and adds a
`.menu-open` rule that turns #nav-buttons into a popover anchored
to the header (position:absolute, right:12px, surface bg, border,
shadow, z-index 50). Buttons inside the popover go full-width
left-aligned. header { position:relative } so the absolute
positioning has an anchor.
* style.css: also #view-admin .section gets a simple display:block
override on mobile so the desktop grid-area layout doesn't break
the page when admin is opened from a phone.
header .user .badge sizing (carried over from the previous turn): the
admin badge in the relay header now matches the .nav-btn box-model
exactly (5px 10px padding, 9px font, 1px border, 3px radius, line-
height:1, pixel font), so it sits flush with the nav buttons instead
of being a tiny pill in the middle of the row.
chore: bump version to 0.9.8
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
923de0cdd6
commit
a67bedc6f2
4 files changed
+76
-12
No files matched your search
+2
-1
@@ -17,7 +17,8 @@ if (!defined('RELAY_BOOTSTRAPPED')) { http_response_code(404); exit; }
|
||||
<h1>hyprcrd relay</h1>
|
||||
<span id="header-status" class="pixel" style="font-size:9px;color:var(--dim);"></span>
|
||||
<span class="spacer"></span>
|
||||
<div id="nav-buttons" class="hidden" style="display:flex;gap:6px;align-items:center;">
|
||||
<button id="nav-burger" class="nav-btn hidden" aria-label="menu" onclick="toggleNavMenu()"><i class="ph ph-list"></i></button>
|
||||
<div id="nav-buttons" class="hidden">
|
||||
<span id="nav-user" class="user"></span>
|
||||
<button id="nav-compose" class="nav-btn active" onclick="showView('compose')"><i class="ph ph-pencil-line"></i> compose</button>
|
||||
<button id="nav-account" class="nav-btn" onclick="showView('account')"><i class="ph ph-user-circle"></i> account</button>
|
||||
|
||||
Reference in new issue
Block a user