MrDiderot/mischlabs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add hamburger menu navigation drawer and tabbed views for admin sections
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 12s
Details

Browse Source
This commit is contained in:
Kroonk
2026-05-21 18:32:30 +02:00
parent 28bf2c5dfe
commit 223f5abf78
3 changed files with 364 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
admin.html
View File

@@ -20,9 +20,14 @@
</div>
<div class="admin-actions">
<a class="ghost-button" href="/">Dashboard</a>
<a class="ghost-button" id="headerDashboardBtn" href="/">Dashboard</a>
<button class="ghost-button" id="loginButton" type="button">Mit Keycloak anmelden</button>
<button class="ghost-button" id="logoutButton" type="button" hidden>Abmelden</button>
<button class="hamburger-menu-btn" id="hamburgerMenuBtn" aria-label="Menü öffnen" type="button" style="display: none;">
<span class="hamburger-bar"></span>
<span class="hamburger-bar"></span>
<span class="hamburger-bar"></span>
</button>
</div>
</header>
@@ -44,7 +49,7 @@
<div id="adminUser" style="display: none;"></div>
<div class="ops-grid" id="opsGrid">
<section class="ops-card ops-card-wide">
<section class="ops-card ops-card-wide admin-tab-content" id="card-services">
<div class="ops-card-head">
<div style="display: flex; align-items: center; gap: 8px;">
<span>Dienste-Status (Live-Proxy)</span>
@@ -55,7 +60,7 @@
<div id="servicesStatusBoard" class="services-status-board">Lade Status...</div>
</section>
<section class="ops-card">
<section class="ops-card admin-tab-content" id="card-disks">
<div class="ops-card-head">
<span>NAS Speicher</span>
<button class="ghost-button mini" id="refreshOpsButton" type="button">Aktualisieren</button>
@@ -63,7 +68,7 @@
<div id="diskStatus" class="ops-list">Noch nicht geladen.</div>
</section>
<section class="ops-card">
<section class="ops-card admin-tab-content" id="card-watchtower">
<div class="ops-card-head">
<span>Watchtower</span>
<button class="ghost-button mini" id="runWatchtowerButton" type="button">Jetzt pruefen</button>
@@ -71,7 +76,7 @@
<div id="watchtowerStatus" class="ops-list">Noch nicht geladen.</div>
</section>
<section class="ops-card ops-card-wide">
<section class="ops-card ops-card-wide admin-tab-content" id="card-containers">
<div class="ops-card-head">
<span>Container</span>
<button class="ghost-button mini danger-button" id="dangerModeButton" type="button">Danger entsperren</button>
@@ -81,7 +86,7 @@
</section>
</div>
<section class="ops-card ops-card-wide is-collapsed" id="editorCard" style="margin-top: 14px;">
<section class="ops-card ops-card-wide admin-tab-content" id="editorCard" style="margin-top: 14px;">
<div class="ops-card-head">
<span>Dienste &amp; Kategorien (Konfiguration)</span>
</div>
@@ -96,6 +101,48 @@
</section>
</main>
<script src="/admin.js?v=17" defer></script>
<!-- Hamburger Navigation Drawer -->
<div class="admin-nav-backdrop" id="adminNavBackdrop"></div>
<aside class="admin-nav-drawer" id="adminNavDrawer">
<div class="drawer-header">
<h3>MischLabs Admin</h3>
<button class="drawer-close-btn" id="drawerCloseBtn" aria-label="Menü schließen" type="button">&times;</button>
</div>
<nav class="drawer-nav">
<button class="drawer-nav-item" data-tab="services" type="button">
<span class="drawer-nav-icon">🌐</span>
<span class="drawer-nav-text">Dienste-Status</span>
</button>
<button class="drawer-nav-item" data-tab="disks" type="button">
<span class="drawer-nav-icon">💾</span>
<span class="drawer-nav-text">NAS Speicher</span>
</button>
<button class="drawer-nav-item" data-tab="watchtower" type="button">
<span class="drawer-nav-icon">🐳</span>
<span class="drawer-nav-text">Watchtower</span>
</button>
<button class="drawer-nav-item" data-tab="containers" type="button">
<span class="drawer-nav-icon">📦</span>
<span class="drawer-nav-text">Container</span>
</button>
<button class="drawer-nav-item" data-tab="config" type="button">
<span class="drawer-nav-icon">⚙️</span>
<span class="drawer-nav-text">Dienste &amp; Kategorien</span>
</button>
<div class="drawer-divider"></div>
<a class="drawer-nav-item" href="/">
<span class="drawer-nav-icon">🏠</span>
<span class="drawer-nav-text">Dashboard</span>
</a>
<button class="drawer-nav-item drawer-logout-btn" id="drawerLogoutBtn" type="button">
<span class="drawer-nav-icon">🚪</span>
<span class="drawer-nav-text">Abmelden</span>
</button>
</nav>
</aside>
<script src="/admin.js?v=18" defer></script>
</body>
</html>