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

Dashboard Studio 1.13.1: car card battery bar along the bottom

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Mel van Veen
2026-10-26 16:22:23 +01:00
parent a28f8227c6
commit 93bb42dcbb
5 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard_studio/web/style.css
+5 -6
View File
@@ -976,7 +976,7 @@ body.kiosk #tabnav { top: 6px; max-height: calc(100vh - 20px); }
.car-act .i { font-size: 18px; }
/* car: in the style of the Tesla app. Square cards show the car from the front, wide ones from the side. */
.tz { --tz-c: var(--d-text); --tz-paint: color-mix(in srgb, var(--d-text) 22%, #b9bec6);
display: grid; grid-template-areas: "head" "art" "charge" "ctrls" "rows"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto; row-gap: 10px; height: 100%; min-height: 0; min-width: 0; }
display: grid; grid-template-areas: "head" "art" "ctrls" "charge" "rows"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto; row-gap: 10px; height: 100%; min-height: 0; min-width: 0; }
.tz.charging { --tz-c: var(--ok); }
.tz.low { --tz-c: var(--crit); }
.tz.fuel:not(.low) { --tz-c: var(--warn); }
@@ -1014,7 +1014,6 @@ body.kiosk #tabnav { top: 6px; max-height: calc(100vh - 20px); }
.tz.charging .tz-port, .tz.charging .tz-bar i { animation: tz-pulse 2s ease-in-out infinite; }
@keyframes tz-pulse { 50% { opacity: .55; } }
.tz-charge { grid-area: charge; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tz-charge.tz-idle { display: none; }
.tz-cl, .tz-cs { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.tz-ct { font-size: 13px; font-weight: 600; white-space: nowrap; flex: none; }
.tz.charging .tz-ct { color: var(--ok); }
@@ -1062,7 +1061,7 @@ body.kiosk #tabnav { top: 6px; max-height: calc(100vh - 20px); }
.tz-btn { width: 36px; height: 36px; font-size: 18px; }
}
/* wide: the car from the side on the right, the numbers on the left */
.tz.tz-wide { grid-template-areas: "head art" "big art" "charge ctrls"; grid-template-columns: minmax(170px, .8fr) minmax(0, 1.2fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 24px; }
.tz.tz-wide { grid-template-areas: "head art" "big art" "big ctrls" "charge charge"; grid-template-columns: minmax(170px, .8fr) minmax(0, 1.2fr); grid-template-rows: auto minmax(0, 1fr) auto auto; column-gap: 24px; }
.tz.tz-wide .tz-batt { display: none; }
.tz.tz-wide .tz-big { display: flex; }
.tz.tz-wide .tz-front { display: none; }
@@ -1073,7 +1072,7 @@ body.kiosk #tabnav { top: 6px; max-height: calc(100vh - 20px); }
.tz.tz-wide .tz-art { align-self: stretch; }
.tz.tz-wide .tz-big { align-self: start; }
@container (min-aspect-ratio: 8 / 5) {
.tz.tz-auto { grid-template-areas: "head art" "big art" "charge ctrls"; grid-template-columns: minmax(170px, .8fr) minmax(0, 1.2fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 24px; }
.tz.tz-auto { grid-template-areas: "head art" "big art" "big ctrls" "charge charge"; grid-template-columns: minmax(170px, .8fr) minmax(0, 1.2fr); grid-template-rows: auto minmax(0, 1fr) auto auto; column-gap: 24px; }
.tz.tz-auto .tz-batt { display: none; }
.tz.tz-auto .tz-big { display: flex; }
.tz.tz-auto .tz-front { display: none; }
@@ -1087,10 +1086,10 @@ body.kiosk #tabnav { top: 6px; max-height: calc(100vh - 20px); }
/* very short, whatever the width: name, battery and the bar */
@container (max-height: 170px) {
.tz.tz { grid-template-areas: "head" "charge" "ctrls"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
.tz.tz { grid-template-areas: "head" "ctrls" "charge"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
.tz.tz .tz-art, .tz.tz .tz-big, .tz.tz .tz-cs, .tz.tz .tz-rows { display: none; }
.tz.tz .tz-batt { display: grid; }
.tz.tz .tz-charge, .tz.tz .tz-charge.tz-idle { display: flex; align-self: center; }
.tz.tz .tz-ctrls { align-self: center; }
}
@container (max-height: 120px) { .tz.tz .tz-ctrls { display: none; } }
dashboard_studio/web/widgets.js
+2 -2
View File
@@ -1235,7 +1235,7 @@
const bar = pct != null ? `<div class="tz-bar"><i style="width:${p}%"></i>${limPct != null ? `<b style="left:${Math.max(0, Math.min(100, limPct))}%"></b>` : ""}</div>` : "";
const chargeInfo = plugged
? `<div class="tz-charge"><div class="tz-cl"><span class="tz-ct">${charging ? t("Charging") : t("Plugged in")}${charging && power && Number(power.state) > 0 ? ` <span class="num">${esc(fmtState(power))}</span>` : ""}</span><span class="tz-cr num">${esc(left || (limPct != null ? t("Charges to {0}%", Math.round(limPct)) : ""))}</span></div>${bar}${fullAt || limPct != null ? `<div class="tz-cs"><span>${esc(fullAt)}</span><span>${limPct != null ? esc(t("Limit {0}%", Math.round(limPct))) : ""}</span></div>` : ""}</div>`
: `<div class="tz-charge tz-idle">${bar}</div>`;
: bar ? `<div class="tz-charge tz-idle">${bar}</div>` : "";
// icon buttons
const ctrl = (act, eid, ico, label, cls = "", extra = "") => `<button class="tz-btn wbtn ${cls}" data-act="${act}" data-e="${esc(eid)}" ${extra} aria-label="${esc(label)}" title="${esc(label)}">${Icons.svg(ico)}</button>`;
@@ -1259,8 +1259,8 @@
<div class="tz-head"><div class="tz-title"><div class="tz-name">${esc(c.name || t("Car"))}</div>${status ? `<div class="tz-status">${esc(status)}</div>` : ""}</div>${batt}</div>
${big}
<div class="tz-art">${art}</div>
${chargeInfo}
${ctrls.length ? `<div class="tz-ctrls">${ctrls.join("")}</div>` : ""}
${chargeInfo}
${rows ? `<div class="tz-rows">${rows}</div>` : ""}
</div>`;
},