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> <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=20"> <link rel="stylesheet" href="/style.css?v=21">
</head> </head>
<body> <body>
<header class="shell hero admin-hero"> <header class="shell hero admin-hero">
@@ -94,6 +94,6 @@
</section> </section>
</main> </main>
<script src="/admin.js?v=13" defer></script> <script src="/admin.js?v=14" defer></script>
</body> </body>
</html> </html>

4
admin.js
View File

@@ -386,12 +386,12 @@ function renderServicesStatus(services = []) {
const tooltip = `${item.name}\nDomain: ${item.domain}\nStatus: ${statusLabel}\nLatenz: ${latencyText}`; const tooltip = `${item.name}\nDomain: ${item.domain}\nStatus: ${statusLabel}\nLatenz: ${latencyText}`;
return ` 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> <h4>${item.name}</h4>
<div class="status-board-item-bar"> <div class="status-board-item-bar">
<div class="status-board-item-bar-inner"></div> <div class="status-board-item-bar-inner"></div>
</div> </div>
</div> </a>
`; `;
}).join(''); }).join('');
} }

42
style.css
View File

@@ -915,23 +915,36 @@ main {
========================================================================== */ ========================================================================== */
.services-status-board { .services-status-board {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px 14px; gap: 10px 12px;
margin-top: 8px; margin-top: 10px;
padding: 2px 0; padding: 2px 0;
} }
.status-board-item { .status-board-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 5px; gap: 8px;
cursor: help; 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 { .status-board-item h4 {
margin: 0; margin: 0;
font-size: 0.78rem; font-size: 0.82rem;
font-weight: 500; font-weight: 600;
color: var(--muted); color: var(--muted);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -940,14 +953,14 @@ main {
} }
.status-board-item:hover h4 { .status-board-item:hover h4 {
color: var(--text); color: #fff;
} }
.status-board-item-bar { .status-board-item-bar {
height: 4px; height: 6px;
width: 100%; width: 100%;
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
border-radius: 2px; border-radius: 999px;
overflow: hidden; overflow: hidden;
} }
@@ -973,8 +986,13 @@ main {
@media (max-width: 620px) { @media (max-width: 620px) {
.services-status-board { .services-status-board {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 10px 10px; gap: 8px 8px;
}
.status-board-item {
padding: 8px 10px;
gap: 6px;
} }
} }