WildDragonLLC/dragonflight
1
0
Fork 0
Code Issues 18 Pull requests 3 Projects Releases Packages Wiki Activity Actions

Revert shell.css primitive rework (5 commits eea1ed6..a8f5bce)

Browse source
This commit is contained in:
Zac 2026-05-21 20:34:08 +00:00
parent a8f5bce9ee
commit ddd3b3eca1
5 changed files with 31 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
services/web-ui/public/containers.html
View file

@ -7,6 +7,7 @@
<title>Containers — Z-AMPP</title> <title>Containers — Z-AMPP</title>
<link rel="stylesheet" href="/dist/app.css"> <link rel="stylesheet" href="/dist/app.css">
<style> <style>
body { margin: 0; }
/* Page-only auto-refresh indicator (preserves original IDs + look-and-feel) */ /* Page-only auto-refresh indicator (preserves original IDs + look-and-feel) */
.refresh-indicator { .refresh-indicator {
@ -58,7 +59,7 @@
</head> </head>
<body> <body>
<div class="wd-shell"> <div class="wd-shell" style="display:flex;min-height:100vh;">
<nav class="wd-sidebar" aria-label="Main navigation"> <nav class="wd-sidebar" aria-label="Main navigation">
<div class="wd-sidebar-header"> <div class="wd-sidebar-header">
<img src="img/dragon-logo.png?v=1" alt="Wild Dragon" style="width:18px;height:18px;"> <img src="img/dragon-logo.png?v=1" alt="Wild Dragon" style="width:18px;height:18px;">

2
services/web-ui/public/home.html
View file

@ -9,6 +9,8 @@
<style> <style>
/* Page-only layout. Sidebar + all chrome is from /dist/app.css primitives. /* Page-only layout. Sidebar + all chrome is from /dist/app.css primitives.
Hero / cards / SVG art are bespoke to the home landing page. */ Hero / cards / SVG art are bespoke to the home landing page. */
body { margin: 0; }
.wd-shell { display: flex; min-height: 100vh; }
.home-main { .home-main {
flex: 1; flex: 1;

3
services/web-ui/public/users.html
View file

@ -7,6 +7,7 @@
<title>Users — Z-AMPP</title> <title>Users — Z-AMPP</title>
<link rel="stylesheet" href="/dist/app.css"> <link rel="stylesheet" href="/dist/app.css">
<style> <style>
body { margin: 0; }
/* Local-only tabs styling — JS toggles .tab.active and .tab-content.active, /* Local-only tabs styling — JS toggles .tab.active and .tab-content.active,
so we keep those class names and just retheme. */ so we keep those class names and just retheme. */
@ -118,7 +119,7 @@
</style> </style>
</head> </head>
<body> <body>
<div class="wd-shell"> <div class="wd-shell" style="display:flex;min-height:100vh;">
<!-- Sidebar --> <!-- Sidebar -->
<nav class="wd-sidebar" aria-label="Main navigation"> <nav class="wd-sidebar" aria-label="Main navigation">

34
services/web-ui/src/css/app.css
View file

@ -2,12 +2,11 @@
* *
* IMPORTANT: All @import must come first per CSS spec / postcss-import * IMPORTANT: All @import must come first per CSS spec / postcss-import
* requirements. Tailwind directives below; cascade order in the emitted * requirements. Tailwind directives below; cascade order in the emitted
* bundle is: tokens → shell → primitives → tailwind base → tailwind * bundle is: tokens → primitives → tailwind base → tailwind components
* components → tailwind utilities. Utilities win on specificity, * → tailwind utilities. Utilities win on specificity, primitives win
* primitives win over base where they share specificity. * over base where they share specificity.
*/ */
@import "./components/tokens.css"; @import "./components/tokens.css";
@import "./components/shell.css";
@import "./components/sidebar.css"; @import "./components/sidebar.css";
@import "./components/topbar.css"; @import "./components/topbar.css";
@import "./components/button.css"; @import "./components/button.css";
@ -30,25 +29,42 @@
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
src: url('/fonts/inter-400.woff2') format('woff2'); src: url('/fonts/inter-400.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap; font-weight: 400;
font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
src: url('/fonts/inter-500.woff2') format('woff2'); src: url('/fonts/inter-500.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display: swap; font-weight: 500;
font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
src: url('/fonts/inter-600.woff2') format('woff2'); src: url('/fonts/inter-600.woff2') format('woff2');
font-weight: 600; font-style: normal; font-display: swap; font-weight: 600;
font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
src: url('/fonts/jetbrains-mono-400.woff2') format('woff2'); src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap; font-weight: 400;
font-style: normal;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
src: url('/fonts/jetbrains-mono-600.woff2') format('woff2'); src: url('/fonts/jetbrains-mono-600.woff2') format('woff2');
font-weight: 600; font-style: normal; font-display: swap; font-weight: 600;
font-style: normal;
font-display: swap;
}
html {
font-family: var(--font);
background: var(--bg-base);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
} }

61
services/web-ui/src/css/components/shell.css
View file

@ -1,61 +0,0 @@
/* shell.css ─ root document + app shell primitives.
*
* Defines the html/body baseline AND the .wd-shell horizontal layout
* (sidebar + main pane). Every authenticated app page mounts inside
* .wd-shell; this is the only correct way to lay out the app.
*
* History: pre-shell.css, each page rolled its own
* body { margin: 0; } .wd-shell { display: flex; min-height: 100vh; }
* inline. Pages that forgot rendered with the sidebar stacking on top
* of the content (8px default body margin + display:block .wd-shell),
* which read as "dead space at top, left-shifted content at bottom".
* Codifying it here prevents that footgun.
*/
html, body {
height: 100%;
}
body {
margin: 0;
background: var(--bg-base);
color: var(--text-primary);
font-family: var(--font);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* App shell: sidebar (fixed width) + main pane (flex-fills viewport).
* 100dvh handles mobile chrome resize; 100vh as fallback. */
.wd-shell {
display: flex;
min-height: 100vh;
min-height: 100dvh;
width: 100%;
}
/* Default main-pane container. Pages may override background/scroll,
* but the sizing contract is fixed: fill remaining horizontal space,
* scroll vertically, never escape viewport horizontally. */
.wd-main {
flex: 1;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
background: var(--bg-base);
}
/* Content wrapper inside .wd-main. Caps width for readability on
* ultrawide displays; --full opts out for dense data pages. */
.wd-content {
flex: 1;
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 24px 32px;
}
.wd-content--full { max-width: none; padding: 0; }
.wd-content--narrow { max-width: 780px; }