Skip to content

Commit bb712f8

Browse files
decoded-cipherdecoded-cipher
committed
feat: enhance button responsiveness and layout adjustments for improved UI
1 parent 42c29b7 commit bb712f8

1 file changed

Lines changed: 72 additions & 26 deletions

File tree

‎web/index.html‎

Lines changed: 72 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -160,10 +160,13 @@
160160

161161
.duration-btn {
162162
background: var(--card); border: 1px solid var(--border); border-radius: 8px;
163-
height: 36px; padding: 0 10px; cursor: pointer;
164-
display: flex; align-items: center; gap: 5px; transition: all 0.2s ease;
163+
height: 32px; padding: 0 8px; cursor: pointer;
164+
display: flex; align-items: center; gap: 4px; transition: all 0.2s ease;
165165
color: var(--subtle); white-space: nowrap;
166166
}
167+
@media (min-width: 640px) {
168+
.duration-btn { height: 36px; padding: 0 10px; gap: 5px; }
169+
}
167170
.duration-btn:hover { border-color: var(--border-hover); background: var(--input-hover-bg); color: var(--fg); }
168171
.duration-btn .dur-chevron { transition: transform 0.2s ease; flex-shrink: 0; }
169172
.duration-btn.open .dur-chevron { transform: rotate(180deg); }
@@ -215,11 +218,14 @@
215218

216219
.theme-toggle {
217220
background: var(--card); border: 1px solid var(--border); border-radius: 8px;
218-
width: 36px; height: 36px; cursor: pointer;
221+
width: 32px; height: 32px; cursor: pointer;
219222
display: flex; align-items: center; justify-content: center; transition: all 0.2s ease;
220223
color: var(--subtle);
221224
}
222225
.theme-toggle:hover { border-color: var(--border-hover); background: var(--input-hover-bg); color: var(--fg); }
226+
@media (min-width: 640px) {
227+
.theme-toggle { width: 36px; height: 36px; }
228+
}
223229

224230
.target-table {
225231
width: 100%; border-collapse: collapse; font-size: 0.75rem;
@@ -284,6 +290,18 @@
284290
display: flex; align-items: center; gap: 0.375rem;
285291
}
286292

293+
@media (min-width: 1024px) {
294+
#chartGrid {
295+
grid-template-rows: 1fr 1fr;
296+
}
297+
#chartGrid .card {
298+
display: flex; flex-direction: column; min-height: 0;
299+
}
300+
#chartGrid .card > div[id$="Chart"] {
301+
flex: 1; min-height: 0;
302+
}
303+
}
304+
287305
@media (max-width: 639px) {
288306
.metric-value { font-size: 1.125rem; }
289307
.metric-card { padding: 0.75rem 0.875rem; }
@@ -311,22 +329,28 @@
311329
/* Settings button */
312330
.settings-btn {
313331
background: var(--card); border: 1px solid var(--border); border-radius: 8px;
314-
width: 36px; height: 36px; cursor: pointer;
332+
width: 32px; height: 32px; cursor: pointer;
315333
display: flex; align-items: center; justify-content: center;
316334
transition: all 0.2s ease; color: var(--subtle);
317335
}
336+
@media (min-width: 640px) {
337+
.settings-btn { width: 36px; height: 36px; }
338+
}
318339
.settings-btn:hover { border-color: var(--border-hover); background: var(--input-hover-bg); color: var(--fg); }
319340

320341
/* Icon button shared */
321342
.icon-btn svg { display: block; }
322343

323344
/* App logo */
324345
.app-logo {
325-
width: 38px; height: 38px; border-radius: 10px;
346+
width: 32px; height: 32px; border-radius: 8px;
326347
background: var(--accent-soft); color: var(--accent);
327348
display: flex; align-items: center; justify-content: center;
328349
flex-shrink: 0;
329350
}
351+
@media (min-width: 640px) {
352+
.app-logo { width: 38px; height: 38px; border-radius: 10px; }
353+
}
330354

331355
/* Section label with icon */
332356
.section-label {
@@ -443,31 +467,33 @@
443467
</head>
444468

445469
<body>
446-
<div class="flex flex-col h-screen px-4 sm:px-6 lg:px-8 py-4 max-w-[1680px] mx-auto overflow-y-auto lg:overflow-hidden">
470+
<div class="flex flex-col h-screen px-4 sm:px-6 lg:px-8 py-4 max-w-[1680px] mx-auto overflow-hidden">
447471

448472
<!-- Header -->
449-
<header class="flex flex-wrap justify-between items-center gap-3 mb-4 flex-shrink-0">
450-
<div class="flex items-center gap-3 sm:gap-4">
451-
<div class="app-logo">
473+
<header class="flex justify-between items-center gap-2 mb-3 flex-shrink-0 min-w-0">
474+
<div class="flex items-center gap-2.5 min-w-0">
475+
<div class="app-logo flex-shrink-0">
452476
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><circle cx="12" cy="20" r="1" fill="currentColor" stroke="none"/></svg>
453477
</div>
454-
<div>
455-
<div class="flex items-center gap-2.5">
456-
<h1 class="text-xl sm:text-2xl font-extrabold tracking-tight">netmon</h1>
457-
<span class="status-badge online" id="statusBadge">
478+
<div class="min-w-0">
479+
<div class="flex items-center gap-2">
480+
<h1 class="text-lg sm:text-2xl font-extrabold tracking-tight leading-none">netmon</h1>
481+
<span class="status-badge online flex-shrink-0" id="statusBadge">
458482
<span class="status-dot"></span>
459483
Online
460484
</span>
461485
</div>
462-
<p class="text-xs mt-0.5 flex items-center gap-1" style="color: var(--subtle)">
463-
<span class="live-dot"></span>
464-
Home network · <span id="targetCount" class="font-semibold" style="color: var(--fg)">—</span> probes
465-
· <span id="lastUpdated" style="color: var(--muted)">—</span>
466-
· <span id="networkLabel" class="font-semibold" style="color: var(--accent)">—</span>
486+
<p class="text-xs mt-0.5 flex items-center gap-1 truncate" style="color: var(--subtle)">
487+
<span class="live-dot flex-shrink-0"></span>
488+
<span id="targetCount" class="font-semibold flex-shrink-0" style="color: var(--fg)">—</span>
489+
<span class="flex-shrink-0">probes ·</span>
490+
<span id="lastUpdated" class="flex-shrink-0" style="color: var(--muted)">—</span>
491+
<span class="hidden sm:inline flex-shrink-0"> · </span>
492+
<span id="networkLabel" class="font-semibold hidden sm:inline" style="color: var(--accent)">—</span>
467493
</p>
468494
</div>
469495
</div>
470-
<div class="flex gap-2 items-center">
496+
<div class="flex gap-1.5 items-center flex-shrink-0">
471497
<div class="duration-wrapper" id="durationWrapper">
472498
<button class="duration-btn" id="durationBtn" title="Time range">
473499
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
@@ -591,17 +617,20 @@ <h2 id="modalTitle">
591617
</div>
592618
</div>
593619

620+
<!-- Scroll wrapper: scrollable on mobile, clipped on desktop -->
621+
<div class="flex-1 min-h-0 overflow-y-auto lg:overflow-hidden">
622+
594623
<!-- Main grid -->
595-
<div class="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-4 pb-4 lg:pb-0">
624+
<div class="grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-3 lg:h-full">
596625

597626
<!-- Left column: metrics + charts -->
598-
<div class="flex flex-col gap-4">
627+
<div class="flex flex-col gap-3 lg:min-h-0">
599628

600629
<!-- Summary metric cards -->
601-
<div id="summaryCards" class="grid grid-cols-2 sm:grid-cols-4 xl:grid-cols-4 gap-3 flex-shrink-0"></div>
630+
<div id="summaryCards" class="grid grid-cols-2 sm:grid-cols-4 gap-3 flex-shrink-0"></div>
602631

603632
<!-- Charts 2x2 -->
604-
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
633+
<div id="chartGrid" class="grid grid-cols-1 md:grid-cols-2 gap-3 lg:flex-1 lg:min-h-0">
605634
<div class="card chart-box">
606635
<div class="chart-header">
607636
<h3><span class="chart-dot" style="background:var(--accent)"></span> Latency</h3>
@@ -634,7 +663,7 @@ <h3><span class="chart-dot" style="background:var(--purple)"></span> DNS Resolut
634663
</div>
635664

636665
<!-- Right sidebar -->
637-
<div class="flex flex-col gap-4 min-h-0 lg:overflow-y-auto">
666+
<div class="flex flex-col gap-3 lg:min-h-0 lg:overflow-y-auto pb-4 lg:pb-0">
638667

639668
<!-- Health score card -->
640669
<div class="card p-4 flex flex-col items-center" id="healthCard">
@@ -743,6 +772,7 @@ <h3><span class="chart-dot" style="background:var(--purple)"></span> DNS Resolut
743772

744773
</div>
745774
</div>
775+
</div><!-- /scroll wrapper -->
746776
</div>
747777

748778
<script>
@@ -752,6 +782,17 @@ <h3><span class="chart-dot" style="background:var(--purple)"></span> DNS Resolut
752782
let isLoading = false;
753783
let currentMinutes = 60;
754784

785+
function getChartHeight() {
786+
if (window.innerWidth >= 1024) {
787+
const grid = document.getElementById('chartGrid');
788+
if (grid && grid.offsetHeight > 0) {
789+
// 2 rows with 12px gap; each card has ~52px overhead (padding + header)
790+
return Math.max(80, Math.floor((grid.offsetHeight - 12) / 2) - 52);
791+
}
792+
}
793+
return window.innerWidth < 640 ? 160 : 185;
794+
}
795+
755796
// ── Live "Xs ago" ticker ──────────────────────────────────────────────
756797
setInterval(() => {
757798
if (!lastUpdateTime) return;
@@ -867,8 +908,7 @@ <h3><span class="chart-dot" style="background:var(--purple)"></span> DNS Resolut
867908

868909
const times = history.map(h => h.time);
869910
const isSmall = window.innerWidth < 640;
870-
const isMd = window.innerWidth < 1024;
871-
const chartH = isSmall ? 180 : isMd ? 200 : 220;
911+
const chartH = getChartHeight();
872912
const tickCount = Math.min(times.length, isSmall ? 4 : 6);
873913
const dark = document.body.classList.contains("dark-mode");
874914
const labelStyle = { colors: "var(--muted)", fontSize: isSmall ? "9px" : "10px" };
@@ -1126,6 +1166,12 @@ <h3><span class="chart-dot" style="background:var(--purple)"></span> DNS Resolut
11261166
loadData();
11271167
setInterval(loadData, 15000); // poll every 15s
11281168
});
1169+
1170+
let resizeTimer;
1171+
window.addEventListener("resize", () => {
1172+
clearTimeout(resizeTimer);
1173+
resizeTimer = setTimeout(() => loadData(true), 250);
1174+
});
11291175
</script>
11301176
</body>
11311177
</html>

0 commit comments

Comments
 (0)