iterminate/battery-tracker-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark mode, simplify nav, and UI polish

Browse Source 
- Dark mode via prefers-color-scheme: pure CSS, no JS, follows OS setting
- CSS custom properties for all colors; dark palette redefines variables
- Nav: brand is now a home link, Dashboard link removed, nowrap keeps
  it single-line on mobile; compact padding at 640px breakpoint
- Battery health % uses CSS classes (health-good/warn/bad) instead of
  inline Jinja colors — readable in both light and dark modes
- Stat card counts use CSS color variables for dark mode support
- Fix duplicate display:none on bulk toolbar
- input[type=date] added to themed input selector
This commit is contained in:
Darek
2026-04-12 22:55:23 -05:00
parent 3bc897c1e5
commit 768f83f63a
4 changed files with 180 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/dashboard.html
+4 -4
View File
@@ -15,15 +15,15 @@
<div class="text-muted">Total</div>
</div>
<div class="card" style="flex:1;min-width:120px;text-align:center;">
<div style="font-size:1.8rem;font-weight:700;color:#166534;">{{ available }}</div>
<div style="font-size:1.8rem;font-weight:700;color:var(--count-available);">{{ available }}</div>
<div class="text-muted">Available</div>
</div>
<div class="card" style="flex:1;min-width:120px;text-align:center;">
<div style="font-size:1.8rem;font-weight:700;color:#1e40af;">{{ installed }}</div>
<div style="font-size:1.8rem;font-weight:700;color:var(--count-installed);">{{ installed }}</div>
<div class="text-muted">Installed</div>
</div>
<div class="card" style="flex:1;min-width:120px;text-align:center;">
<div style="font-size:1.8rem;font-weight:700;color:#64748b;">{{ retired }}</div>
<div style="font-size:1.8rem;font-weight:700;color:var(--count-retired);">{{ retired }}</div>
<div class="text-muted">Retired</div>
</div>
</div>
@@ -76,7 +76,7 @@
<form method="post" action="{{ url_for('battery_bulk_action') }}" id="bulk-form">
<div id="bulk-toolbar" style="display:none;margin-bottom:0.75rem;padding:0.6rem 0.75rem;background:#f1f5f9;border-radius:6px;display:none;align-items:center;gap:0.5rem;flex-wrap:wrap;">
<div id="bulk-toolbar" style="display:none;margin-bottom:0.75rem;padding:0.6rem 0.75rem;background:#f1f5f9;border-radius:6px;align-items:center;gap:0.5rem;flex-wrap:wrap;">
<span id="selected-count" style="font-size:0.85rem;color:#64748b;margin-right:0.25rem;"></span>
<button class="btn btn-sm btn-warning" name="action" value="unassign" type="submit">Unassign</button>
<button class="btn btn-sm btn-secondary" name="action" value="retire" type="submit">Retire</button>