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

feat: turn status items into mini clickable cards with pill-shaped status LEDs
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 11s
Details

Browse Source
This commit is contained in:
Kroonk
2026-05-21 18:13:21 +02:00
parent 4cb0e89e92
commit 995a397b2e
3 changed files with 34 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
admin.html
View File

@@ -6,7 +6,7 @@
<title>MischLabs Admin</title>
<meta name="description" content="MischLabs dashboard administration.">
<meta name="theme-color" content="#0f172a">
<link rel="stylesheet" href="/style.css?v=20">
<link rel="stylesheet" href="/style.css?v=21">
</head>
<body>
<header class="shell hero admin-hero">
@@ -94,6 +94,6 @@
</section>
</main>
<script src="/admin.js?v=13" defer></script>
<script src="/admin.js?v=14" defer></script>
</body>
</html>

4
admin.js
View File

@@ -386,12 +386,12 @@ function renderServicesStatus(services = []) {
const tooltip = `${item.name}\nDomain: ${item.domain}\nStatus: ${statusLabel}\nLatenz: ${latencyText}`;
return `
<div class="status-board-item ${statusClass}" title="${tooltip}">
<a class="status-board-item ${statusClass}" href="${item.url}" target="_blank" rel="noopener noreferrer" title="${tooltip}">
<h4>${item.name}</h4>
<div class="status-board-item-bar">
<div class="status-board-item-bar-inner"></div>
</div>
</div>
</a>
`;
}).join('');
}

42
style.css
View File

@@ -915,23 +915,36 @@ main {
========================================================================== */
.services-status-board {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 12px 14px;
margin-top: 8px;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px 12px;
margin-top: 10px;
padding: 2px 0;
}
.status-board-item {
display: flex;
flex-direction: column;
gap: 5px;
cursor: help;
gap: 8px;
padding: 10px 12px;
background: rgba(17, 22, 36, 0.6);
border: 1px solid var(--border);
border-radius: var(--radius);
text-decoration: none;
color: inherit;
transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
cursor: pointer;
}
.status-board-item:hover {
background: rgba(23, 29, 45, 0.85);
border-color: var(--border-strong);
transform: translateY(-1px);
}
.status-board-item h4 {
margin: 0;
font-size: 0.78rem;
font-weight: 500;
font-size: 0.82rem;
font-weight: 600;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
@@ -940,14 +953,14 @@ main {
}
.status-board-item:hover h4 {
color: var(--text);
color: #fff;
}
.status-board-item-bar {
height: 4px;
height: 6px;
width: 100%;
background: rgba(255, 255, 255, 0.08);
border-radius: 2px;
border-radius: 999px;
overflow: hidden;
}
@@ -973,8 +986,13 @@ main {
@media (max-width: 620px) {
.services-status-board {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px 10px;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 8px 8px;
}
.status-board-item {
padding: 8px 10px;
gap: 6px;
}
}