vinzenz/hyperhive
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

dashboard: slug to page footer, not chrome (#389 follow-up)

Browse source 
PR #392 moved the slug below the tab strip but kept it INSIDE the
sticky chrome — Mara's report ("still at old position everywhere
except flow tab") makes the original intent clearer: the slug
should be at the page BOTTOM, with the chrome reduced to pure
navigation.

## index.html
- Remove the banner-thin from `.dashboard-chrome` entirely.
- Move it into the existing `<footer>` element (above the divider
  + project-link line). Sits at the bottom of every tab pane after
  the main content scrolls past.

## flow.html
- Remove the banner-thin from the chrome. The flow page is a
  full-viewport terminal with `body { overflow: hidden }` and
  no normal-flow footer position — the slug simply doesn't appear
  here. The frosted chrome is purely the tab strip now.

## dashboard.css
- `--flow-header-h: 4.7em → 3.6em` — chrome is shorter without
  the banner; terminal padding-top + tail-pill offset + inbox-pill
  top all derive from this variable, so they follow automatically.
- `footer .banner-thin { margin-bottom: 0.8em }` so the slug
  doesn't crash into the divider + link line below it.

No JS changes. Build clean.
This commit is contained in:
iris 2026-05-25 01:19:31 +02:00 • committed by Mara
parent 4559a56e2e
commit c08218acdc
3 changed files with 24 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

19
frontend/packages/dashboard/src/dashboard.css
View file

@ -1211,6 +1211,12 @@ footer {
font-size: 0.9em; font-size: 0.9em;
} }
footer a { color: var(--purple); } footer a { color: var(--purple); }
/* Slug banner now lives at the page footer (#389 follow-up) — give
it a slim top margin so it doesn't crash into the prior content,
and bottom margin separating from the divider/link line. */
footer .banner-thin {
margin-bottom: 0.8em;
}
/* ─── side panel ───────────────────────────────────────────────── /* ─── side panel ─────────────────────────────────────────────────
Long content (file previews, diffs, journald, applied config) Long content (file previews, diffs, journald, applied config)
@ -1348,12 +1354,13 @@ footer a { color: var(--purple); }
ergonomics without stealing terminal real estate. */ ergonomics without stealing terminal real estate. */
:root { :root {
/* Approximate height of the flow chrome (banner-thin + tabbar + /* Approximate height of the flow chrome (tabbar + dashboard-chrome
dashboard-chrome padding). Bumped slightly above the natural padding). The banner-thin slug used to live in the chrome and
content height so the terminal padding-top clears the bottom padded this up to 4.7em; with the slug moved out (#389 follow-up:
border. Tweaked once after #383 took over the chrome from the slug lives at the page footer on /, simply omitted on /flow.html
simpler title bar. */ since there's no normal-flow footer position in the full-viewport
--flow-header-h: 4.7em; terminal), the chrome is just tabs now and shrinks accordingly. */
--flow-header-h: 3.6em;
--flow-composer-h: 3.6em; --flow-composer-h: 3.6em;
--flow-frost-bg: rgba(30, 30, 46, 0.74); --flow-frost-bg: rgba(30, 30, 46, 0.74);
--flow-frost-blur: blur(12px) saturate(140%); --flow-frost-blur: blur(12px) saturate(140%);

15
frontend/packages/dashboard/src/flow.html
View file

@ -8,13 +8,13 @@
</head> </head>
<body class="flow-shell"> <body class="flow-shell">
<!-- Fixed-overlay chrome with the same tab strip as the dashboard <!-- Fixed-overlay chrome — just the tab strip (#389 follow-up:
(#383) — operator never has to navigate back to the dashboard slug moved to the dashboard's page footer; the flow page is a
to switch tabs. FL0W is the current page, the SW4RM / Y3R C4LL full-viewport terminal with no normal-flow footer position, so
/ SYST3M tabs cross-link to the dashboard with the matching the slug simply doesn't appear here). The operator can still
hash so the destination tab is pre-active. Tab strip on top, switch tabs from the flow page without navigating back; FL0W is
banner-thin below (#389 — tabs are navigation, slug is the current page, SW4RM / Y3R C4LL / SYST3M cross-link to the
decoration). --> dashboard with the matching hash. -->
<header class="dashboard-chrome flow-chrome" id="flow-header"> <header class="dashboard-chrome flow-chrome" id="flow-header">
<nav class="tabbar" id="tabbar" role="tablist"> <nav class="tabbar" id="tabbar" role="tablist">
<a class="tab" href="/#swarm" role="tab" data-tab="swarm"> <a class="tab" href="/#swarm" role="tab" data-tab="swarm">
@ -46,7 +46,6 @@
<span id="notif-status" class="meta" hidden></span> <span id="notif-status" class="meta" hidden></span>
</div> </div>
</nav> </nav>
<pre class="banner banner-thin">░▒▓█▓▒░ HYPERHIVE / HIVE-C0RE / WE ARE THE WIRED ░▒▓█▓▒░</pre>
</header> </header>
<!-- Operator inbox flyout trigger — count + click → side panel <!-- Operator inbox flyout trigger — count + click → side panel

7
frontend/packages/dashboard/src/index.html
View file

@ -8,8 +8,9 @@
</head> </head>
<body class="dashboard-shell"> <body class="dashboard-shell">
<!-- Sticky chrome — tab strip on top, banner below (#389: tabs are <!-- Sticky chrome — just the tab strip now (#389 follow-up: the
the navigation surface, slug is decoration; tabs go first). "WE ARE THE WIRED" slug moved out of chrome entirely and lives
at the page footer below `<main>`; chrome is navigation only).
Tabs route via the URL hash so F5 / back-button / shared links Tabs route via the URL hash so F5 / back-button / shared links
keep you on the same view. JS owns the actual show/hide; this keep you on the same view. JS owns the actual show/hide; this
is just the menu. --> is just the menu. -->
@ -55,7 +56,6 @@
<span id="notif-status" class="meta" hidden></span> <span id="notif-status" class="meta" hidden></span>
</div> </div>
</nav> </nav>
<pre class="banner banner-thin">░▒▓█▓▒░ HYPERHIVE / HIVE-C0RE / WE ARE THE WIRED ░▒▓█▓▒░</pre>
</header> </header>
<!-- Tab panes. Exactly one is `.tab-pane-active` at a time; <!-- Tab panes. Exactly one is `.tab-pane-active` at a time;
@ -136,6 +136,7 @@
</main> </main>
<footer> <footer>
<pre class="banner banner-thin">░▒▓█▓▒░ HYPERHIVE / HIVE-C0RE / WE ARE THE WIRED ░▒▓█▓▒░</pre>
<div class="divider">══════════════════════════════════════════════════════════════</div> <div class="divider">══════════════════════════════════════════════════════════════</div>
<p>▲△▲ <a href="https://git.berlin.ccc.de/vinzenz/hyperhive">hyperhive</a> ▲△▲ hive-c0re on this host ▲△▲</p> <p>▲△▲ <a href="https://git.berlin.ccc.de/vinzenz/hyperhive">hyperhive</a> ▲△▲ hive-c0re on this host ▲△▲</p>
</footer> </footer>