refactor(frontend): invert the dashboard + H0M3 gutter (#1537)
Follow-up from #1532. Previously `body.dashboard-shell` / `body.home-shell` carried the 1.5em horizontal gutter, and full-width chrome broke out of it with negative margins (`.dashboard-chrome { margin: 0 -1.5em }`, the `#server-warnings { margin: 0 -1.5em }` override). Invert it: `<body>` is now full-bleed, and the padded page content lives in a single inner `.page-content` wrapper that carries the gutter. The server-warnings banner, the sticky tab strip, and the footer then span the full width for free — so the `-1.5em` breakout hacks are gone. - `.page-content { padding: 0 1.5em }` is a shared primitive in common.css (the dashboard + H0M3 both opt in by wrapping their content; FL0W / L0GS / ST4TS / S3TT1NGS stay full-bleed with their own `.<page>-main` padding). - dashboard.html / index.html wrap their content in `.page-content`. - dashboard.css / home.css: drop the body horizontal gutter (keep `padding-bottom` for foot breathing room); `.dashboard-chrome` margin `0 -1.5em 1em` → `0 0 1em`. - common.css: drop the `#server-warnings` breakout override. Behaviour/visual-neutral by intent (content gutter unchanged; chrome + banner already rendered full-width via the old breakout). Worth a gui screenshot-diff to confirm — esp. the now-full-width footer divider. Last fold-in of #1464 step 2.
This commit is contained in:
iris
parent
df3058e311
commit
293e608ca4
5 changed files with 38 additions and 19 deletions
|
|
@ -519,6 +519,16 @@ body.side-panel-resizing * { cursor: ew-resize !important; }
|
||||||
padding: 0.2em 0.5em;
|
padding: 0.2em 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ─── page-content gutter ─────────────────────────────────────────────
|
||||||
|
Inverted-gutter layout: the dashboard + H0M3 keep `<body>` full-bleed
|
||||||
|
and wrap their padded content in a single `.page-content` div that
|
||||||
|
carries the horizontal gutter. Full-width chrome (the tab strip, the
|
||||||
|
server-warnings banner, the footer) then spans edge-to-edge for free,
|
||||||
|
with no negative-margin breakout hacks. Only matches on pages that opt
|
||||||
|
in by adding the wrapper (dashboard.html, index.html); FL0W / L0GS /
|
||||||
|
ST4TS / S3TT1NGS are full-bleed with their own `.<page>-main` padding. */
|
||||||
|
.page-content { padding: 0 1.5em; }
|
||||||
|
|
||||||
/* ─── server warnings banner ──────────────────────────────────────────
|
/* ─── server warnings banner ──────────────────────────────────────────
|
||||||
Generic top-of-page strip, injected at the top of <body> by
|
Generic top-of-page strip, injected at the top of <body> by
|
||||||
common.js (renderServerWarnings) on every page. One row per warning;
|
common.js (renderServerWarnings) on every page. One row per warning;
|
||||||
|
|
@ -530,16 +540,11 @@ body.side-panel-resizing * { cursor: ew-resize !important; }
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
}
|
}
|
||||||
/* The bar is prepended as a direct child of <body>. On pages that pad
|
/* The bar is prepended as a direct child of <body> and spans the full
|
||||||
the body gutter (the dashboard + H0M3 use a 1.5em horizontal gutter),
|
width edge-to-edge. The dashboard + H0M3 are full-bleed at the body
|
||||||
break out of that padding so the warning spans the full width
|
level — their 1.5em horizontal gutter lives on an inner `.page-content`
|
||||||
edge-to-edge — the same trick `.dashboard-chrome` uses. FL0W + L0GS
|
wrapper (see below), so the banner is full-width for free with no
|
||||||
are already full-bleed (no body padding), so they need no override. */
|
breakout. FL0W + L0GS are full-bleed too. */
|
||||||
body.dashboard-shell #server-warnings,
|
|
||||||
body.home-shell #server-warnings {
|
|
||||||
margin-left: -1.5em;
|
|
||||||
margin-right: -1.5em;
|
|
||||||
}
|
|
||||||
.server-warnings[hidden] { display: none; }
|
.server-warnings[hidden] { display: none; }
|
||||||
.server-warn {
|
.server-warn {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
|
|
@ -9,14 +9,15 @@
|
||||||
routing model. */
|
routing model. */
|
||||||
|
|
||||||
body.dashboard-shell {
|
body.dashboard-shell {
|
||||||
/* Full-width layout — no max-width cap so wide screens don't
|
/* Full-bleed body (no horizontal gutter). The 1.5em side gutter lives
|
||||||
waste real estate on empty side margins. `padding: 0 1.5em
|
on the inner `.page-content` wrapper (see common.css), so the sticky
|
||||||
1.5em` keeps a small gutter on the left/right so cards don't
|
chrome bar, the server-warnings banner, and the footer span the full
|
||||||
kiss the viewport edge; `.dashboard-chrome { margin: 0 -1.5em
|
width edge-to-edge with no negative-margin breakout. `padding-bottom`
|
||||||
... }` still pulls the chrome bar edge-to-edge through that
|
keeps a little breathing room above the viewport edge (overridden to
|
||||||
gutter. */
|
clear the selection bar via `.has-selection` below). No max-width cap
|
||||||
|
— wide screens use the full width rather than empty side margins. */
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 1.5em 1.5em;
|
padding-bottom: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-chrome {
|
.dashboard-chrome {
|
||||||
|
|
@ -28,7 +29,7 @@ body.dashboard-shell {
|
||||||
backdrop-filter: blur(8px) saturate(120%);
|
backdrop-filter: blur(8px) saturate(120%);
|
||||||
border-bottom: 1px solid var(--purple-dim);
|
border-bottom: 1px solid var(--purple-dim);
|
||||||
padding: 0.4em 0 0;
|
padding: 0.4em 0 0;
|
||||||
margin: 0 -1.5em 1em;
|
margin: 0 0 1em;
|
||||||
}
|
}
|
||||||
/* ← home back-link to the H0M3 hub. Small purple link top-left of the
|
/* ← home back-link to the H0M3 hub. Small purple link top-left of the
|
||||||
chrome, mirroring the .logs-back treatment the sub-pages use so the
|
chrome, mirroring the .logs-back treatment the sub-pages use so the
|
||||||
|
|
|
||||||
|
|
@ -83,6 +83,10 @@
|
||||||
visible by toggling the `hidden` attribute, resolved from the URL
|
visible by toggling the `hidden` attribute, resolved from the URL
|
||||||
hash (default SW4RM). Panes start `hidden` to avoid a flash before
|
hash (default SW4RM). Panes start `hidden` to avoid a flash before
|
||||||
the script runs. -->
|
the script runs. -->
|
||||||
|
<!-- Padded content wrapper: carries the 1.5em side gutter
|
||||||
|
(.page-content, common.css) while <body> stays full-bleed so the
|
||||||
|
sticky chrome above + the footer below span the full width. -->
|
||||||
|
<div class="page-content">
|
||||||
<main class="dashboard-main">
|
<main class="dashboard-main">
|
||||||
|
|
||||||
<!-- SW4RM: the swarm itself. Container cards (the central thing
|
<!-- SW4RM: the swarm itself. Container cards (the central thing
|
||||||
|
|
@ -254,6 +258,7 @@
|
||||||
localStorage + browser permission the settings page sets). -->
|
localStorage + browser permission the settings page sets). -->
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
</div><!-- /.page-content -->
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<pre class="banner banner-thin">░▒▓█▓▒░ HYPERHIVE / HIVE-C0RE / WE ARE THE WIRED ░▒▓█▓▒░</pre>
|
<pre class="banner banner-thin">░▒▓█▓▒░ HYPERHIVE / HIVE-C0RE / WE ARE THE WIRED ░▒▓█▓▒░</pre>
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,11 @@
|
||||||
styling can fold into it. */
|
styling can fold into it. */
|
||||||
|
|
||||||
body.home-shell {
|
body.home-shell {
|
||||||
|
/* Full-bleed body; the 1.5em side gutter lives on the inner
|
||||||
|
`.page-content` wrapper (common.css) so the server-warnings banner
|
||||||
|
spans full width. `padding-bottom` keeps breathing room at the foot. */
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 1.5em 2em;
|
padding-bottom: 2em;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,10 @@
|
||||||
surface. This is the page served at `/` — the landing page — with
|
surface. This is the page served at `/` — the landing page — with
|
||||||
the dashboard relocated to /dashboard.html. No tabbar / SSE —
|
the dashboard relocated to /dashboard.html. No tabbar / SSE —
|
||||||
it's a static portal. -->
|
it's a static portal. -->
|
||||||
|
<!-- Padded content wrapper: carries the 1.5em side gutter
|
||||||
|
(.page-content, common.css) while <body> stays full-bleed so the
|
||||||
|
server-warnings banner spans the full width. -->
|
||||||
|
<div class="page-content">
|
||||||
<header class="home-header">
|
<header class="home-header">
|
||||||
<p class="banner-thin" id="hive-identity" hidden></p>
|
<p class="banner-thin" id="hive-identity" hidden></p>
|
||||||
<pre class="banner">░▒▓█▓▒░ ░▒▓█▓▒░ H Y P E R H I V E · H0M3 ░▒▓█▓▒░ ░▒▓█▓▒░</pre>
|
<pre class="banner">░▒▓█▓▒░ ░▒▓█▓▒░ H Y P E R H I V E · H0M3 ░▒▓█▓▒░ ░▒▓█▓▒░</pre>
|
||||||
|
|
@ -59,6 +63,7 @@
|
||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
</main>
|
</main>
|
||||||
|
</div><!-- /.page-content -->
|
||||||
|
|
||||||
<script type="module" src="/static/home.js" defer></script>
|
<script type="module" src="/static/home.js" defer></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue