Micha/homelab-infra
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(dashboard): redesign quick access as visual tiles

Browse Source
This commit is contained in:
Micha
2026-04-06 06:10:46 +00:00
parent 80750558a5
commit af602723d0
1 changed files with 47 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/dashboard.html
+47 -3
View File
@@ -341,7 +341,8 @@
.service-grid,
.quick-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.stats-grid {
@@ -761,6 +762,10 @@
grid-template-columns: 1fr 1fr;
}
.quick-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.status-stack {
grid-template-columns: 1fr;
}
@@ -793,6 +798,45 @@
grid-template-columns: 1fr;
}
}
/* Quick Access Tiles */
.quick-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 18px 10px 14px;
border-radius: 8px;
border: 1px solid rgba(0, 220, 140, 0.12);
background: rgba(4, 12, 10, 0.6);
text-decoration: none;
color: inherit;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
cursor: pointer;
}
.quick-tile:hover {
background: rgba(0, 220, 140, 0.09);
border-color: rgba(0, 220, 140, 0.35);
transform: translateY(-1px);
}
.quick-tile-icon {
font-size: 1.5rem;
line-height: 1;
}
.quick-tile-label {
color: var(--text-dim);
font-size: 0.68rem;
letter-spacing: 0.08em;
}
</style>
</head>
<body>
@@ -1097,7 +1141,7 @@
<section class="section">
<div class="section-head">
<span class="section-label">Network &amp; Health</span>
<p>DNS filtering · Disk integrity</p>
<p>DNS filtering · Disk integrity</p>
</div>
<div class="net-health-grid">
@@ -1145,7 +1189,7 @@
<h2 class="card-title">Disk Health</h2>
<div class="scrutiny-stats" id="scrutiny-list">
<div class="storage-row"><strong style="color:var(--text-dim)">No data</strong><span>—</span><span></span><span></span></div>
<div class="storage-row"><strong style="color:var(--text-dim)">No data</strong><span>—</span><span></span><span></span></div>
</div>
</div>
</article>