jedarden/spaxel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(dashboard): move live panel positioning from inline to layout.css

Browse source 
Extract ID-based panel positioning (#node-panel, #chart-panel,
#presence-panel) from live.html inline styles into shared layout.css
with proper responsive breakpoints for tablet and mobile.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
jedarden 2026-04-24 15:49:40 -04:00
parent 18b7d7d1d0
commit 87192aa410
2 changed files with 60 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
dashboard/css/layout.css
View file

@ -293,13 +293,70 @@
padding: var(--space-3);
}
/* Legacy ID-based selectors (match live.html panel IDs) */
#node-panel {
position: fixed;
top: 60px;
left: 20px;
width: 280px;
max-height: calc(100vh - 80px);
background: var(--live-node-bg);
border-radius: var(--radius-card);
padding: var(--space-3);
z-index: 100;
overflow-y: auto;
}
#chart-panel {
position: fixed;
bottom: 20px;
right: 20px;
width: 400px;
height: 260px;
background: var(--live-chart-bg);
border-radius: var(--radius-card);
padding: var(--space-3);
z-index: 100;
}
#presence-panel {
position: fixed;
top: 60px;
right: 20px;
width: 300px;
background: var(--live-panel-bg);
border-radius: var(--radius-card);
padding: var(--space-3);
z-index: 100;
}
/* ── Tablet breakpoint for live panels ── */
@media (max-width: 1023px) {
.live-panel--left,
.live-panel--right,
.live-panel--presence {
.live-panel--presence,
#node-panel,
#presence-panel {
display: none;
}
#chart-panel {
width: calc(100% - 16px);
right: 8px;
left: 8px;
bottom: calc(8px + env(safe-area-inset-bottom));
}
}
/* ── Mobile breakpoint for live panels ── */
@media (max-width: 639px) {
#chart-panel {
width: calc(100% - 16px);
right: 8px;
left: 8px;
bottom: 8px;
height: 200px;
}
}
/* ── Mobile bottom nav safe-area on live page ── */

19
dashboard/live.html
View file

@ -91,17 +91,10 @@
background: var(--alert);
}
/* Amplitude chart overlay */
/* Amplitude chart overlay — base positioning in layout.css */
#chart-panel {
position: fixed;
bottom: 20px;
right: 20px;
width: 400px;
height: 260px;
background: var(--live-chart-bg);
border-radius: 8px;
padding: 12px;
z-index: 100;
}
#chart-title {
@ -139,18 +132,10 @@
display: block;
}
/* Node list panel */
/* Node list panel — base positioning in layout.css */
#node-panel {
position: fixed;
top: 60px;
left: 20px;
width: 280px;
max-height: calc(100vh - 80px);
background: var(--live-node-bg);
border-radius: 8px;
padding: 12px;
z-index: 100;
overflow-y: auto;
}
#node-panel h3 {