Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(topbar): dev-mode banner sits above the topbar, not under it

Browse Source 
Banner was fixed at top: 60px (just below the 60px-tall topbar) at
z-index 999 — same vertical band as the sidebar (top: 60px, z-index
100) and the apps-layout subnav, so it covered the top 36px of both
when dev mode was on.

Moved to top: 0, z-index 1001 (above the topbar). When the banner is
visible, body.has-dev-banner now also shifts every other fixed-
positioned chrome element down by the banner's 36px:

  .topbar       0  → 36
  .sidebar     60  → 96
  .apps-layout 60  → 96
  .mobile-drawer 60 → 96   (already had this override)

Body padding-top stays at 96px (banner + topbar) — content offset is
unchanged. Standard environment-banner placement (Stripe test-mode,
GitHub staff-mode) and makes "you're in dev mode" actually visible
above your nav.

Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-27 20:23:30 +01:00
parent e961c163d5
commit fa751e6cff
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
containers/libreportal/frontend/css/topbar.css
View File

@ -2,17 +2,21 @@
/* Topbar layout, nav pills, donate/logout buttons. Extracted from style.css. Theme via var(--*) tokens. */
/* Developer-mode strip — sits flush under the fixed topbar when CFG_DEV_MODE
is on. Neutral glass so it reads as "system bar" not "warning"; only the
icon picks up the theme accent. Body gets .has-dev-banner to bump
padding-top by the strip's height; dismissal is local and remembered in
/* Developer-mode strip — sits flush at the very top of the viewport above
the topbar when CFG_DEV_MODE is on. Above-chrome is the standard env-
banner placement (Stripe test-mode, GitHub staff-mode); pushing the
topbar down 36px is a deliberate signal that the environment is non-
standard. Neutral glass so it reads as "system bar" not "warning"; only
the icon picks up the theme accent. Body gets .has-dev-banner to bump
padding-top + shift every other fixed-positioned chrome element down
by the strip's height. Dismissal is local and remembered in
localStorage until dev mode is toggled off + on again. */
.dev-banner {
position: fixed;
top: 60px;
top: 0;
left: 0;
right: 0;
z-index: 999;
z-index: 1001;
height: 36px;
display: flex;
align-items: center;
@ -63,6 +67,13 @@
}
body.has-dev-banner { padding-top: 96px; }
/* Shift every other fixed-positioned chrome element down by the banner
height when it's on. Topbar slides from top:0 → 36 (under the banner);
anything that was at top:60 (the topbar's bottom edge — sidebar, apps
layout, mobile-drawer) slides to 96 to clear the now-pushed-down topbar. */
body.has-dev-banner .topbar { top: 36px; }
body.has-dev-banner .sidebar { top: 96px; }
body.has-dev-banner .apps-layout { top: 96px; }
@media (max-width: 768px) {
.dev-banner { padding: 0 48px 0 12px; font-size: 0.8rem; }