Add admin dashboard card layout
All checks were successful
Build & Push Docker Image / build-and-push (push) Successful in 1m50s

This commit is contained in:
Tom Misch
2026-05-11 16:09:31 +02:00
parent caf56b4117
commit a588bd36d6

View File

@@ -6,7 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/assets/css/main.min.css" /> <link rel="stylesheet" href="/assets/css/main.min.css" />
<style> <style>
.admin-section { background: rgba(0,0,0,0.5); padding: 2em; margin-bottom: 2em; border-radius: 4px; } .admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25em; align-items: start; }
.admin-section { background: rgba(0,0,0,0.5); padding: 1.5em; border-radius: 4px; min-width: 0; }
.admin-section h2 { margin-top: 0; }
.admin-section.wide { grid-column: 1 / -1; }
table { width: 100%; border-collapse: collapse; } table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.2); } th, td { text-align: left; padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.2); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 0.8em; } .badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 0.8em; }
@@ -23,6 +26,10 @@
.folder-status.yes { color: #4CAF50; } .folder-status.yes { color: #4CAF50; }
.folder-status.no { color: #888; } .folder-status.no { color: #888; }
#folder-table-wrap { display: none; margin-top: 1em; } #folder-table-wrap { display: none; margin-top: 1em; }
@media screen and (max-width: 900px) {
.admin-grid { grid-template-columns: 1fr; }
.admin-section { padding: 1.25em; }
}
</style> </style>
</head> </head>
<body class="is-preload"> <body class="is-preload">
@@ -34,7 +41,8 @@
</ul></nav> </ul></nav>
</header> </header>
<div id="main" style="display:block; padding: 2em; max-width: 1000px; margin: 0 auto; width: 100%;"> <div id="main" style="display:block; padding: 2em; max-width: 1180px; margin: 0 auto; width: 100%;">
<div class="admin-grid">
<div class="admin-section"> <div class="admin-section">
<h2>Nutzer erstellen</h2> <h2>Nutzer erstellen</h2>
@@ -62,6 +70,13 @@
</div> </div>
<div class="admin-section"> <div class="admin-section">
<h2>Website aktualisieren</h2>
<p>Laedt das neueste Docker-Image und startet den Website-Container neu.</p>
<button id="sync-site">Sync starten</button>
<span id="sync-status" style="margin-left:10px;"></span>
</div>
<div class="admin-section wide">
<h2>Nutzerverwaltung</h2> <h2>Nutzerverwaltung</h2>
<table> <table>
<thead><tr><th>ID</th><th>Username</th><th>Rolle</th><th>Erstellt</th><th>Aktionen</th></tr></thead> <thead><tr><th>ID</th><th>Username</th><th>Rolle</th><th>Erstellt</th><th>Aktionen</th></tr></thead>
@@ -69,7 +84,7 @@
</table> </table>
</div> </div>
<div class="admin-section"> <div class="admin-section wide">
<h2>Ordner-Zuweisung</h2> <h2>Ordner-Zuweisung</h2>
<p>Waehle einen Nutzer und klicke auf Ordner um sie zuzuweisen oder zu entfernen.</p> <p>Waehle einen Nutzer und klicke auf Ordner um sie zuzuweisen oder zu entfernen.</p>
<select id="user-select"> <select id="user-select">
@@ -84,13 +99,6 @@
</div> </div>
</div> </div>
<div class="admin-section">
<h2>Website aktualisieren</h2>
<p>Laedt das neueste Docker-Image und startet den Website-Container neu.</p>
<button id="sync-site">Sync starten</button>
<span id="sync-status" style="margin-left:10px;"></span>
</div>
<div class="admin-section"> <div class="admin-section">
<h2>Eigenes Passwort aendern</h2> <h2>Eigenes Passwort aendern</h2>
<form id="admin-pw-form" style="display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;"> <form id="admin-pw-form" style="display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;">
@@ -108,6 +116,7 @@
</form> </form>
</div> </div>
</div>
</div> </div>
</div> </div>
<script src="/assets/js/jquery.min.js"></script> <script src="/assets/js/jquery.min.js"></script>