ico/pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: groups

Browse Source
This commit is contained in:
nate
2026-04-10 02:37:38 +04:00
parent 992570341a
commit 671a9a59cd
2 changed files with 37 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/status/src/static/app.css
+12 -9
View File
@@ -44,23 +44,26 @@ h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; }
.overall { padding: 1rem 1.25rem; border-radius: 10px; font-weight: 600; font-size: 1rem; margin: 1.5rem 0 2rem; display: flex; align-items: center; gap: 0.75rem; border: 1px solid; }
.overall .dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.group-section { margin: 1.5rem 0; background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
/* Group sections - styled like monitor cards */
.group-section { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.group-toggle { display: none; }
.group-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; cursor: pointer; }
.group-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; }
.group-header:hover { background: rgba(255,255,255,0.02); }
.group-header-left { display: flex; align-items: center; gap: 0.5rem; }
.group-header-left { display: flex; align-items: center; gap: 0.75rem; }
.group-chev { color: var(--muted); transition: transform 0.15s; flex-shrink: 0; }
.group-toggle:checked ~ .group-header .group-chev { transform: rotate(90deg); }
.group-name { font-size: 0.85rem; font-weight: 600; color: var(--fg); }
.group-header-right { display: flex; align-items: center; gap: 1rem; }
.group-status { font-size: 0.75rem; font-weight: 600; }
.group-aggregate { padding: 0 1.25rem 0.75rem; }
.group-aggregate .bars { height: 24px; }
.group-name { font-weight: 600; }
.group-header-right { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; color: var(--muted); }
.group-status { font-weight: 600; }
.group-aggregate { padding: 0 1.25rem 1rem; }
.group-toggle:checked ~ .group-aggregate { display: none; }
.group-body { display: none; padding: 0 0.75rem 0.75rem; }
.group-toggle:checked ~ .group-body { display: block; }
.group-body .monitors { gap: 0.35rem; }
.group-body .monitor { border-radius: 8px; }
/* Compact monitor inside a group - no collapse, no uptime cells */
.monitor-compact { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; }
.monitor-compact-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.monitor-compact .bars { height: 24px; }
.monitors { display: flex; flex-direction: column; gap: 0.5rem; }
/* All monitors share one structure: a clickable header row + a collapsible
detail panel. display_mode just controls whether `expanded-state` is set