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

feat: make ops cards collapsible, hide notice and user display, increase button sizes
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:21:47 +02:00
parent 995a397b2e
commit 76b7a96673
3 changed files with 74 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
admin.html
View File

@@ -6,7 +6,7 @@
<title>MischLabs Admin</title> <title>MischLabs Admin</title>
<meta name="description" content="MischLabs dashboard administration."> <meta name="description" content="MischLabs dashboard administration.">
<meta name="theme-color" content="#0f172a"> <meta name="theme-color" content="#0f172a">
<link rel="stylesheet" href="/style.css?v=21"> <link rel="stylesheet" href="/style.css?v=22">
</head> </head>
<body> <body>
<header class="shell hero admin-hero"> <header class="shell hero admin-hero">
@@ -48,11 +48,7 @@
</div> </div>
</div> </div>
<div class="notice"> <div id="adminUser" style="display: none;"></div>
Hinweis: Betriebsdaten kommen aus dem MischLabs-Statusproxy. Kachel-Aenderungen werden aktuell lokal im Browser gespeichert oder als `services.json` exportiert; fuer globale Live-Aenderungen folgt spaeter ein Gitea-Commit-Workflow.
</div>
<div class="admin-user" id="adminUser"></div>
<div class="ops-grid" id="opsGrid"> <div class="ops-grid" id="opsGrid">
<section class="ops-card ops-card-wide"> <section class="ops-card ops-card-wide">
<div class="ops-card-head"> <div class="ops-card-head">
@@ -94,6 +90,6 @@
</section> </section>
</main> </main>
<script src="/admin.js?v=14" defer></script> <script src="/admin.js?v=15" defer></script>
</body> </body>
</html> </html>

27
admin.js
View File

@@ -695,6 +695,32 @@ function startOpsAutoRefresh() {
}, 60000); }, 60000);
} }
function initCollapsibleCards() {
document.querySelectorAll('.ops-card-head').forEach((head) => {
const card = head.closest('.ops-card');
if (!card) return;
const bodyEl = card.querySelector('.services-status-board, .ops-list');
const id = bodyEl ? bodyEl.id : null;
const storageKey = id ? `ops-card-collapsed-${id}` : null;
if (storageKey) {
const isCollapsed = localStorage.getItem(storageKey) === 'true';
card.classList.toggle('is-collapsed', isCollapsed);
}
head.addEventListener('click', (event) => {
if (event.target.closest('button')) {
return;
}
card.classList.toggle('is-collapsed');
if (storageKey) {
localStorage.setItem(storageKey, card.classList.contains('is-collapsed'));
}
});
});
}
async function boot() { async function boot() {
await handleCallback(); await handleCallback();
tokenSet = getStoredTokens(); tokenSet = getStoredTokens();
@@ -717,6 +743,7 @@ async function boot() {
logoutButton.hidden = false; logoutButton.hidden = false;
adminUser.textContent = `Angemeldet als ${claims.preferred_username || claims.email}`; adminUser.textContent = `Angemeldet als ${claims.preferred_username || claims.email}`;
renderEditor(); renderEditor();
initCollapsibleCards();
refreshOps(); refreshOps();
startOpsAutoRefresh(); startOpsAutoRefresh();
} }

49
style.css
View File

@@ -423,14 +423,16 @@ main {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 38px; min-height: 42px;
padding: 0 13px; padding: 0 18px;
color: var(--text); color: var(--text);
font-size: 0.92rem;
text-decoration: none; text-decoration: none;
background: rgba(17, 22, 36, 0.86); background: rgba(17, 22, 36, 0.86);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: var(--radius);
cursor: pointer; cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
} }
.ghost-button:hover, .ghost-button:hover,
@@ -542,12 +544,49 @@ main {
margin-bottom: 10px; margin-bottom: 10px;
color: #fff; color: #fff;
font-weight: 700; font-weight: 700;
cursor: pointer;
user-select: none;
transition: color 0.15s ease;
}
.ops-card-head:hover {
color: #67e8f9;
}
.ops-card-head > div:first-child,
.ops-card-head > span:first-child {
display: inline-flex;
align-items: center;
gap: 8px;
}
.ops-card-head > div:first-child::before,
.ops-card-head > span:first-child::before {
content: '▾';
display: inline-block;
font-size: 0.92rem;
color: var(--dim);
transition: transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform: rotate(0deg);
}
.ops-card.is-collapsed .ops-card-head > div:first-child::before,
.ops-card.is-collapsed .ops-card-head > span:first-child::before {
transform: rotate(-90deg);
}
.ops-card.is-collapsed .ops-card-head {
margin-bottom: 0;
}
.ops-card.is-collapsed > *:not(.ops-card-head) {
display: none !important;
} }
.ghost-button.mini { .ghost-button.mini {
min-height: 30px; min-height: 34px;
padding: 0 10px; padding: 0 14px;
font-size: 0.78rem; font-size: 0.82rem;
} }
.ops-list { .ops-list {