fix(stats): move window selector into the page header tab bar
Closes #2720 (partial — stats tab placement + contrast). The time-window nav was in <main> below the page title, so it controlled hash routing but wasn't visually part of the page chrome. Move it into <header> (same row as ← home / ST4TS), fill the remaining header space, and right-align the buttons — consistent with the /logs.html tabbar pattern. Also set explicit color/border on inactive buttons so they remain readable on lower-contrast operator colour schemes (var(--subtext1) fallback to var(--muted)).
This commit is contained in:
parent
c8ed190ccc
commit
a58816d17e
2 changed files with 23 additions and 13 deletions
|
|
@ -16,14 +16,27 @@ body.stats-shell {
|
|||
padding: 1.2em 1.5em 2em;
|
||||
}
|
||||
|
||||
/* Window selector. Buttons keep the shared `.btn` pill look; the active
|
||||
one is flagged by createTabStrip via `.hive-tab--active` (was a bespoke
|
||||
`.active` toggle). */
|
||||
/* Window selector — now lives in the page-header (same row as ← home /
|
||||
ST4TS title). Fills the remaining header space and right-aligns the
|
||||
buttons. The shared `.btn` pill look is kept; createTabStrip flags the
|
||||
active one with `.hive-tab--active`. */
|
||||
.hive-stats-windows {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin: 12px 0;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
justify-content: flex-end;
|
||||
/* Smaller than the default .btn so the pills fit comfortably in the
|
||||
header without competing visually with the page title. */
|
||||
font-size: 0.82em;
|
||||
}
|
||||
/* Inactive buttons: slightly muted to distinguish from the active window,
|
||||
but readable even on low-contrast operator colour schemes. */
|
||||
.hive-stats-windows .btn {
|
||||
color: var(--subtext1, var(--muted));
|
||||
border-color: var(--border);
|
||||
font-size: 1em; /* relative to the .hive-stats-windows 0.82em */
|
||||
}
|
||||
.hive-stats-windows .btn.hive-tab--active {
|
||||
border-color: var(--amber);
|
||||
|
|
|
|||
|
|
@ -18,15 +18,8 @@
|
|||
<header class="page-header">
|
||||
<a class="page-back" href="/">← home</a>
|
||||
<span class="page-title">ST4TS</span>
|
||||
</header>
|
||||
|
||||
<main class="stats-main">
|
||||
<p class="meta">hive-wide turn statistics, aggregated across every agent over the selected window. <strong>cost is a rough estimate</strong> from approximate per-model list prices — it drifts and is a ballpark, not a bill.</p>
|
||||
|
||||
<!-- Window selector — a hash-routed createTabStrip (#1h / #24h / …),
|
||||
like the per-agent /stats page. Buttons keep the `.btn` pill
|
||||
look; createTabStrip toggles `.hive-tab--active` and the page
|
||||
re-fetches on change via onShow. -->
|
||||
<!-- Window selector lives in the header so it behaves like a tab strip
|
||||
(matches the pattern on /logs.html). Hash-routed via createTabStrip. -->
|
||||
<nav class="hive-stats-windows" id="hive-stats-windows" role="tablist">
|
||||
<button type="button" class="btn" data-tab="1h">1h</button>
|
||||
<button type="button" class="btn" data-tab="4h">4h</button>
|
||||
|
|
@ -36,6 +29,10 @@
|
|||
<button type="button" class="btn" data-tab="30d">30d</button>
|
||||
<button type="button" class="btn" data-tab="all">all</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="stats-main">
|
||||
<p class="meta">hive-wide turn statistics, aggregated across every agent over the selected window. <strong>cost is a rough estimate</strong> from approximate per-model list prices — it drifts and is a ballpark, not a bill.</p>
|
||||
|
||||
<div class="hive-stats-chips" id="hive-stats-summary"></div>
|
||||
<h3>◇ busiest agents</h3>
|
||||
|
|
|
|||
Loading…
Reference in a new issue