dashboard: serve the dashboard at /, fold kept state in as a tab, add a pages menu
Drop the H0M3 tile hub and the core page. The dashboard is now the index; kept state is its fifth tab. A pages menu in the chrome links flow, stats, API docs and the swarm UI. The swarm apex URL comes from services.hyperhive.swarm.domain via HIVE_SWARM_PUBLIC_URL and the new swarm_public_url field of the state snapshot.
This commit is contained in:
parent
265f8a47cc
commit
0622736b30
35 changed files with 661 additions and 986 deletions
|
|
@ -3,9 +3,7 @@
|
|||
component rules that this file depends on. */
|
||||
|
||||
/* SYST3M panel rules (rebuild queue / meta inputs / kept state)
|
||||
live in system-sections.css, shared with /core.html. A few are still
|
||||
referenced from the dashboard (`.rebuild-queue`), so the dashboard
|
||||
pulls them in here. */
|
||||
live in system-sections.css. */
|
||||
@import "./system-sections.css";
|
||||
@import "@hive/shared/jobq-rollup.css";
|
||||
@import "@hive/shared/jobq-graph.css";
|
||||
|
|
@ -29,7 +27,7 @@ body.dashboard-shell {
|
|||
}
|
||||
|
||||
.dashboard-chrome {
|
||||
/* Home back-link + tab strip share one row (flex). The chrome owns the
|
||||
/* Pages menu + tab strip share one row (flex). The chrome owns the
|
||||
horizontal gutter and the single full-width bottom divider; its
|
||||
children drop their own side padding / border so they sit inline. */
|
||||
display: flex;
|
||||
|
|
@ -45,20 +43,64 @@ body.dashboard-shell {
|
|||
padding: 0.3em 1em;
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
/* ← home back-link to the H0M3 hub. Small purple link top-left of the
|
||||
chrome, mirroring the .page-back treatment the standalone pages use
|
||||
(now shared from @hive/shared/chrome.css) so the navigation reads
|
||||
consistently. The dashboard keeps this richer sticky chrome of its
|
||||
own rather than folding into the simple page header. */
|
||||
.dash-home-back {
|
||||
/* Pages menu (links-menu.js): one icon button at the left of the chrome
|
||||
that opens a popover of the standalone pages and the swarm UI. Same
|
||||
shape as the swarm UI's LinksMenu — quiet until hovered or open. The
|
||||
explicit `[hidden]` rule is needed because `display: flex` on the
|
||||
popover would otherwise beat the UA `[hidden]` style. */
|
||||
.links-menu {
|
||||
position: relative;
|
||||
flex: none;
|
||||
}
|
||||
.links-menu-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
padding: 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.4em;
|
||||
background: none;
|
||||
color: var(--purple);
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.links-menu-button:hover,
|
||||
.links-menu-button[aria-expanded="true"] {
|
||||
border-color: var(--border);
|
||||
background: var(--bg-elev);
|
||||
}
|
||||
.links-menu-popover {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.4em);
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 10em;
|
||||
padding: 0.4em;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5em;
|
||||
background: var(--bg-elev);
|
||||
box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.links-menu-popover[hidden] {
|
||||
display: none;
|
||||
}
|
||||
.links-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
padding: 0.4em 0.6em;
|
||||
border-radius: 0.35em;
|
||||
color: var(--fg);
|
||||
text-decoration: none;
|
||||
font-size: 0.82em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dash-home-back:hover {
|
||||
text-decoration: underline;
|
||||
.links-menu-item:hover {
|
||||
background: var(--bg);
|
||||
}
|
||||
.banner-thin {
|
||||
text-align: center;
|
||||
|
|
@ -77,7 +119,7 @@ body.dashboard-shell {
|
|||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
gap: 0.2em;
|
||||
/* On one row with the home link now; the chrome owns the gutter +
|
||||
/* On one row with the pages menu; the chrome owns the gutter +
|
||||
the bottom divider, so no outer padding / border here. */
|
||||
}
|
||||
/* Shares the flat-pill aesthetic of the shared `.hive-tab` (sub-tabs on
|
||||
|
|
|
|||
Loading…
Reference in a new issue