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

Dashboard Studio 2.1.0: every card redesigned for desktop, tablet and phone

Browse Source 
- One card system in three device bands, applied automatically: compact with
  hover on desktop; larger type and 44px controls on tablets and wall panels;
  touch sizes in a tighter frame on phones; narrow-card layouts by container
- Answers as the largest thing, in regular-weight tabular figures; plain
  outline icons instead of tinted chips; pale status pills; flat buttons and
  sliders without shadows or gradients
- Energy: power flow (sun, house, battery, grid and the flows between them)
- Garage: state in large type with one wide button; vacuum: state and a
  battery bar
- The first heading on a tab is the page's h1

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Mel van Veen
2026-10-26 23:56:31 +01:00
parent 3d958d0411
commit f4c98e27af
7 changed files with 484 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard_studio/DOCS.md
+3 -1
View File
@@ -62,6 +62,8 @@ More editing tools:
## Look and feel
- **Cards for every screen:** each card has a desktop, a tablet and a phone design, applied by itself. On a computer with a mouse, cards are compact with hover states. On a tablet or wall panel (any touch screen, or a screen 641-1100px wide) the type is larger and every button, switch and key is at least 44px, so it can be read and used from across the room. On a phone the same touch sizes sit in a tighter frame, and rows such as a light's colours scroll sideways instead of wrapping. Within that, each card still adapts to its own size: a narrow card puts its figures under the names instead of beside them.
- **How cards look:** the answer is the largest thing on each card (the temperature, the battery, *Closed*), in thin, even figures with the unit in grey. Icons are plain outlines that take colour only when something is on or needs attention; status shows as a pale pill; buttons are flat.
- **Light and dark versions:** turn on **Switch to a dark or light version with the device** under a theme to use a matching dark version of a light theme when the device is in dark mode, and the other way round. *System* always does this.
- **Theme:** *System* follows your device's light or dark appearance. The other 14 themes are fixed: Light, Dark, Nord, Dusk, Forest, Graphite, Indigo, Rose, Ocean, Sunrise, Lavender, Mint, Sand, and High contrast for maximum readability. Text meets accessibility contrast levels in every theme. Changing any color switches the theme to *Custom*.
- **Tile style:** *Cards* puts every widget on a tile. *Outlined* draws a thin border instead. *Plain* removes the cards completely, so widgets sit straight on the background. You can also turn off the background for a single widget under **Style → No background**.
@@ -184,7 +186,7 @@ A live picture of where your power goes. Choose the sensors you have; all are op
- **Home use**, or leave it empty and the card works it out from the others.
- **Totals for today**, such as kWh produced and used, shown underneath.
Solar, the grid, the battery and your home are connected by lines. Moving dots show where power is flowing, and the more power, the thicker and faster the line. Solar power goes to the home first, then into the battery, and the rest back to the grid.
The card shows the sun, the house, the battery and the grid with their power right now, then each flow that is running, largest first, such as *Sun to the grid 1.3 kW*, with a bar in proportion (sunshine in amber, the grid in grey). The flows add up: what comes from the sun, the grid and the battery is what goes to the house, the battery and the grid. Solar power goes to the house first, then into the battery, and the rest back to the grid. On a square card the four places sit two by two.
### Room