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

style: wrap service editor in collapsible card and make it narrower
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:26:40 +02:00
parent b3c1fbc9bd
commit 28bf2c5dfe
3 changed files with 39 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
admin.html
View File

@@ -38,13 +38,7 @@
<div class="admin-panel-head"> <div class="admin-panel-head">
<div> <div>
<p class="section-kicker">Konfiguration</p> <p class="section-kicker">Konfiguration</p>
<h2>Dienste & Kategorien</h2> <h2>System-Administration</h2>
</div>
<div class="admin-actions compact">
<button class="ghost-button" id="checkAllButton" type="button">Status pruefen</button>
<button class="ghost-button" id="saveLocalButton" type="button">Lokal speichern</button>
<button class="ghost-button" id="resetLocalButton" type="button">Lokale Aenderungen verwerfen</button>
<button class="ghost-button" id="downloadConfigButton" type="button">JSON exportieren</button>
</div> </div>
</div> </div>
@@ -86,10 +80,22 @@
<div id="containerStatus" class="ops-list">Noch nicht geladen.</div> <div id="containerStatus" class="ops-list">Noch nicht geladen.</div>
</section> </section>
</div> </div>
<section class="ops-card ops-card-wide is-collapsed" id="editorCard" style="margin-top: 14px;">
<div class="ops-card-head">
<span>Dienste &amp; Kategorien (Konfiguration)</span>
</div>
<div class="admin-actions-bar">
<button class="ghost-button mini" id="checkAllButton" type="button">Alle Status pruefen</button>
<button class="ghost-button mini" id="saveLocalButton" type="button">Lokal speichern</button>
<button class="ghost-button mini" id="resetLocalButton" type="button">Aenderungen verwerfen</button>
<button class="ghost-button mini" id="downloadConfigButton" type="button">JSON exportieren</button>
</div>
<div class="admin-table" id="serviceEditor"></div> <div class="admin-table" id="serviceEditor"></div>
</section> </section>
</section>
</main> </main>
<script src="/admin.js?v=16" defer></script> <script src="/admin.js?v=17" defer></script>
</body> </body>
</html> </html>

11
admin.js
View File

@@ -718,12 +718,19 @@ function initCollapsibleCards() {
const card = head.closest('.ops-card'); const card = head.closest('.ops-card');
if (!card) return; if (!card) return;
const bodyEl = card.querySelector('.services-status-board, .ops-list'); const bodyEl = card.querySelector('.services-status-board, .ops-list, .admin-table');
const id = bodyEl ? bodyEl.id : null; const id = bodyEl ? bodyEl.id : null;
const storageKey = id ? `ops-card-collapsed-${id}` : null; const storageKey = id ? `ops-card-collapsed-${id}` : null;
if (storageKey) { if (storageKey) {
const isCollapsed = localStorage.getItem(storageKey) === 'true'; let isCollapsed;
const stored = localStorage.getItem(storageKey);
if (stored === null) {
// Default to collapsed for the service editor, expanded for others
isCollapsed = (id === 'serviceEditor');
} else {
isCollapsed = (stored === 'true');
}
card.classList.toggle('is-collapsed', isCollapsed); card.classList.toggle('is-collapsed', isCollapsed);
} }

15
style.css
View File

@@ -1035,4 +1035,19 @@ main {
} }
} }
#editorCard {
max-width: 900px;
margin-inline: auto;
}
.admin-actions-bar {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 14px;
border-bottom: 1px solid var(--border);
padding-bottom: 12px;
margin-top: 8px;
}