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

UX: Admin-Panel Desktop — Sidebar-Navigation, 1200px Breite, keine abgeschnittenen Tabs (SW by-v973)

Browse source
This commit is contained in:
rene 2026-05-15 12:42:04 +02:00
parent af039efe82
commit 5fd86dac4b
6 changed files with 49 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/main.py
View file

@ -408,7 +408,7 @@ async def serve_media(path: str, request: _Request):
raise _HE(404, "Nicht gefunden.") raise _HE(404, "Nicht gefunden.")
return _media_response(filepath) return _media_response(filepath)
APP_VER = "972" # muss mit APP_VER in app.js übereinstimmen APP_VER = "973" # muss mit APP_VER in app.js übereinstimmen
@app.get("/.well-known/assetlinks.json") @app.get("/.well-known/assetlinks.json")
async def assetlinks(): async def assetlinks():

36
backend/static/css/layout.css
View file

@ -592,6 +592,40 @@
/* Etwas breiterer Standard-Container auf großen Screens */ /* Etwas breiterer Standard-Container auf großen Screens */
.page-container { max-width: 860px; } .page-container { max-width: 860px; }
/* Admin: breit + Sidebar-Layout */
#page-admin .page-container { max-width: 1200px; }
#page-admin .adm-shell {
display: flex;
gap: var(--space-4);
align-items: flex-start;
}
#page-admin .adm-tabs {
display: flex !important;
flex-direction: column;
width: 190px;
flex-shrink: 0;
gap: var(--space-1);
padding-bottom: 0;
position: sticky;
top: var(--space-3);
}
#page-admin .adm-tabs .by-tab {
justify-content: flex-start !important;
text-align: left !important;
padding-left: var(--space-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#page-admin #adm-content {
flex: 1;
min-width: 0;
}
/* ---------------------------------------------------------- /* ----------------------------------------------------------
WELCOME: 2-spaltige Feature-Sections, zentrierter Hero WELCOME: 2-spaltige Feature-Sections, zentrierter Hero
---------------------------------------------------------- */ ---------------------------------------------------------- */
@ -688,7 +722,7 @@
white-space: nowrap; white-space: nowrap;
} }
/* Admin: Tabs auf 2 Zeilen */ /* Admin: Tabs als 2-zeiliges Grid (Mobile/Tablet) */
#page-admin .adm-tabs { #page-admin .adm-tabs {
display: grid; display: grid;
grid-template-columns: repeat(var(--adm-tab-cols, 4), minmax(0, 1fr)); grid-template-columns: repeat(var(--adm-tab-cols, 4), minmax(0, 1fr));

2
backend/static/index.html
View file

@ -102,7 +102,7 @@
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung --> <!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=907"> <link rel="stylesheet" href="/css/design-system.css?v=907">
<link rel="stylesheet" href="/css/layout.css?v=907"> <link rel="stylesheet" href="/css/layout.css?v=973">
<link rel="stylesheet" href="/css/components.css?v=907"> <link rel="stylesheet" href="/css/components.css?v=907">
</head> </head>
<body> <body>

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

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. Router, State-Management, Navigation, Initialisierung.
============================================================ */ ============================================================ */
const APP_VER = '972'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '973'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app'; const IS_STAGING = location.hostname === 'staging.banyaro.app';
// Cache-Bust-Parameter nach Update-Reload sofort entfernen // Cache-Bust-Parameter nach Update-Reload sofort entfernen

20
backend/static/js/pages/admin.js
View file

@ -56,17 +56,17 @@ window.Page_admin = (() => {
<!-- Action Items --> <!-- Action Items -->
<div id="adm-action-items" style="padding:var(--space-3) var(--space-3) 0"></div> <div id="adm-action-items" style="padding:var(--space-3) var(--space-3) 0"></div>
<!-- Tabs --> <!-- Sidebar + Content (Desktop: nebeneinander) -->
<div class="by-tabs adm-tabs" id="adm-tabs"> <div class="adm-shell">
${TABS.map(t => ` <div class="by-tabs adm-tabs" id="adm-tabs">
<button class="by-tab${t.id === _tab ? ' active' : ''}" data-tab="${t.id}"> ${TABS.map(t => `
${UI.icon(t.icon)} ${t.label} <button class="by-tab${t.id === _tab ? ' active' : ''}" data-tab="${t.id}">
</button> ${UI.icon(t.icon)} ${t.label}
`).join('')} </button>
`).join('')}
</div>
<div id="adm-content"></div>
</div> </div>
<!-- Inhalt -->
<div id="adm-content"></div>
`; `;
_container.querySelector('#adm-tabs') _container.querySelector('#adm-tabs')

2
backend/static/sw.js
View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache Offline-Cache + Push Notifications + Tile-Cache
============================================================ */ ============================================================ */
const CACHE_VERSION = 'by-v972'; const CACHE_VERSION = 'by-v973';
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache