rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UX: Staging — Bottom-Nav lila statt Top-Banner, kein Content-Verdecken

Browse source
This commit is contained in:
rene 2026-04-29 20:45:53 +02:00
parent 2e7ce5f248
commit f7dfbb5bde
2 changed files with 14 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

9
backend/static/index.html
View file

@ -94,15 +94,6 @@
</head> </head>
<body> <body>
<!-- Staging-Banner (nur auf staging.banyaro.app) -->
<div id="staging-banner"
style="display:none;position:fixed;top:0;left:0;right:0;z-index:10000;
background:#7c3aed;color:#fff;font-size:0.75rem;font-weight:700;
padding:5px 16px;align-items:center;justify-content:center;gap:8px;
letter-spacing:0.04em;text-transform:uppercase">
⚗️ Staging-Umgebung — Keine Produktionsdaten
</div>
<!-- Offline-Banner --> <!-- Offline-Banner -->
<div id="offline-banner" aria-live="polite" <div id="offline-banner" aria-live="polite"
style="display:none;position:fixed;top:0;left:0;right:0;z-index:9999; style="display:none;position:fixed;top:0;left:0;right:0;z-index:9999;

16
backend/static/js/app.js
View file

@ -864,9 +864,21 @@ const App = (() => {
// App starten // App starten
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
if (IS_STAGING) { if (IS_STAGING) {
const b = document.getElementById('staging-banner');
if (b) b.style.display = 'flex';
document.title = '⚗️ ' + document.title; document.title = '⚗️ ' + document.title;
// Bottom-Nav lila einfärben als Staging-Indikator
const style = document.createElement('style');
style.textContent = `
#bottom-nav {
background: #2d1b69 !important;
border-top-color: #7c3aed !important;
}
#bottom-nav .nav-item-label { color: rgba(255,255,255,0.6) !important; }
#bottom-nav .nav-item.active .nav-item-label { color: #c4b5fd !important; }
#bottom-nav .nav-item svg { color: rgba(255,255,255,0.5) !important; }
#bottom-nav .nav-item.active svg { color: #c4b5fd !important; }
#bottom-nav .nav-item-center .plus-btn { background: #7c3aed !important; }
`;
document.head.appendChild(style);
} }
App.init(); App.init();
}); });