alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Split monolithic index.html and style.css for maintainability

Browse Source 
- Extract 15 modals and 3 partials from index.html into Jinja2 templates
  (templates/modals/*.html, templates/partials/*.html)
- Split style.css (3,712 lines) into 11 feature-scoped CSS files under
  static/css/ (base, layout, components, cards, modal, calibration,
  dashboard, streams, patterns, profiles, tutorials)
- Switch root route from FileResponse to Jinja2Templates
- Add jinja2 dependency
- Consolidate duplicate @keyframes spin definition
- Browser receives identical assembled HTML — zero JS changes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-20 00:42:50 +03:00
parent 755077607a
commit 2b90fafb9c
35 changed files with 4986 additions and 4990 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
server/src/wled_controller/static/css/dashboard.css Normal file
View File

@@ -0,0 +1,281 @@
/* ── Dashboard ── */
.dashboard-section {
margin-bottom: 16px;
}
.dashboard-section-header {
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 6px;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
user-select: none;
}
.dashboard-section-chevron {
font-size: 0.6rem;
color: var(--text-secondary);
width: 10px;
display: inline-block;
}
.dashboard-section-count {
background: var(--border-color);
color: var(--text-secondary);
border-radius: 10px;
padding: 0 6px;
font-size: 0.75rem;
font-weight: 600;
}
.dashboard-subsection {
margin-bottom: 10px;
padding-left: 16px;
}
.dashboard-subsection .dashboard-section-header {
font-size: 0.72rem;
}
.dashboard-stop-all {
margin-left: auto;
padding: 2px 8px;
font-size: 0.7rem;
white-space: nowrap;
flex: 0 0 auto;
}
.dashboard-poll-wrap {
margin-left: auto;
display: flex;
align-items: center;
gap: 3px;
}
.dashboard-poll-slider {
width: 48px;
height: 12px;
accent-color: var(--primary-color);
cursor: pointer;
}
.dashboard-poll-value {
font-size: 0.6rem;
color: var(--text-secondary);
min-width: 18px;
}
.dashboard-target {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 12px;
padding: 6px 12px;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 6px;
margin-bottom: 4px;
}
.dashboard-target-info {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
overflow: hidden;
}
.dashboard-target-icon {
font-size: 1rem;
flex-shrink: 0;
}
.dashboard-target-name {
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 4px;
}
.dashboard-target-name .health-dot {
margin-right: 0;
flex-shrink: 0;
}
.dashboard-target-subtitle {
font-size: 0.7rem;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dashboard-target-metrics {
display: flex;
gap: 12px;
align-items: center;
}
.dashboard-metric {
text-align: center;
min-width: 48px;
}
.dashboard-metric-value {
font-size: 0.85rem;
font-weight: 700;
color: var(--primary-color);
line-height: 1.2;
}
.dashboard-metric-label {
font-size: 0.6rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.dashboard-fps-metric {
display: flex;
align-items: center;
gap: 6px;
min-width: auto;
}
.dashboard-fps-sparkline {
position: relative;
width: 100px;
height: 36px;
}
.dashboard-fps-label {
display: flex;
flex-direction: column;
align-items: center;
min-width: 36px;
line-height: 1.1;
}
.dashboard-fps-target {
font-weight: 400;
opacity: 0.5;
font-size: 0.75rem;
}
.dashboard-target-actions {
display: flex;
align-items: center;
gap: 4px;
}
.dashboard-status-dot {
font-size: 1rem;
line-height: 1;
}
.dashboard-status-dot.active {
color: #4CAF50;
animation: pulse 2s infinite;
}
.dashboard-no-targets {
text-align: center;
padding: 32px 16px;
color: var(--text-secondary);
font-size: 0.9rem;
}
.dashboard-badge-stopped {
padding: 2px 8px;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
background: var(--border-color);
color: var(--text-secondary);
flex-shrink: 0;
}
.dashboard-badge-active {
padding: 2px 8px;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
background: var(--success-color, #28a745);
color: #fff;
flex-shrink: 0;
}
.dashboard-profile .dashboard-target-metrics {
min-width: 48px;
}
@media (max-width: 768px) {
.dashboard-target {
grid-template-columns: 1fr auto;
gap: 6px;
}
.dashboard-target-metrics {
display: none;
}
}
/* ===== PERFORMANCE CHARTS ===== */
.perf-charts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.perf-chart-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 10px 12px;
}
.perf-chart-wrap {
position: relative;
height: 60px;
}
.perf-chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.perf-chart-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--text-secondary);
}
.perf-chart-value {
font-size: 0.85rem;
font-weight: 700;
}
.perf-chart-value.cpu { color: #2196F3; }
.perf-chart-value.ram { color: #4CAF50; }
.perf-chart-value.gpu { color: #FF9800; }
.perf-chart-unavailable {
text-align: center;
padding: 20px 0;
color: var(--text-secondary);
font-size: 0.8rem;
}