veenm/ha-dashboard-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dashboard Studio 2.6.0 and Haven 2.3.0: easier to use on a phone

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Mel van Veen
2026-10-31 18:48:32 +01:00
parent 3b2cbbc96c
commit 1bca71ff7e
12 changed files with 365 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard_studio/web/style.css
+22
View File
@@ -125,6 +125,10 @@ h2, h3 { margin: 0; }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--crit); padding: 0 6px; }
.conn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.conn.ok { display: none; }
.conn.connecting { color: var(--text-2); }
.conn.connecting::before { animation: conn-pulse 1.2s ease-in-out infinite; }
@keyframes conn-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .conn.connecting::before { animation: none; } }
.save-status { font-size: 13px; color: var(--text-2); padding: 0 6px; white-space: nowrap; }
.menu {
@@ -1215,6 +1219,8 @@ body.phone-ui:not(.peek) #topbar { display: none; }
background: rgba(120, 120, 128, .28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
#phone-menu svg { width: 20px; height: 20px; stroke-width: 2.6; }
body.phone-ui:not(.peek):not(.kiosk) #phone-menu { display: grid; }
#phone-menu { transition: opacity .2s, transform .2s; }
body.menu-away #phone-menu { opacity: 0; transform: translateY(-12px); pointer-events: none; }
/* the install button in the top bar is for phones and tablets; computers have it in the menu */
@media (pointer: fine) { #btn-app { display: none; } }
#btn-app[hidden] { display: none; }
@@ -2142,3 +2148,19 @@ button.fader-input { cursor: pointer; }
.phc-m:not(:has(.phc-bottom)) { justify-content: center; }
.phc-m:not(:has(.phc-bottom)) .phc-name { font-size: 20px; }
.phc-l:not(:has(.phc-val)) .phc-name { font-size: 24px; }
/* the details sheet: the state in words, a day's history, the controls; the technical details folded away */
.mi-head { display: flex; align-items: center; gap: 10px; }
.mi-head h3 { margin: 0; }
.mi-ico { display: flex; font-size: 22px; color: var(--text-2); }
.mi-state { font-size: 34px; font-weight: 400; letter-spacing: -0.02em; margin: 14px 0 2px; }
.mi-graph { margin-top: 14px; }
.mi-graph svg { display: block; width: 100%; height: 90px; }
.mi-graph-legend { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.mi-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mi-actions .btn { flex: 1; min-width: 0; justify-content: center; }
.mi-more { margin-top: 16px; }
.mi-more summary { cursor: pointer; font-size: 13px; color: var(--text-2); padding: 6px 0; }
.mi-more .attr-table { margin-top: 4px; }
/* lit tiles keep the lamp's dark text */
.phc { color: inherit; }