Vanding: flyt smart-knap under sidst vandet; mere plads til liter/tid-kort

dashboards/views/01_home.yaml

@@ -499,72 +499,78 @@ cards:
 
       - type: custom:button-card
         entity: sensor.vanding_liter_i_dag_total
-        icon: mdi:water
-        show_icon: true
-        show_name: true
-        show_state: true
-        name: Liter i dag
+        show_icon: false
+        show_name: false
+        show_state: false
         tap_action:
           action: none
         hold_action:
           action: none
         custom_fields:
-          breakdown: |
+          info: |
             [[[
               const n = (id) => { const s = states[id]; return s ? Math.round(parseFloat(s.state) || 0) : 0; };
-              return `Ærter ${n('sensor.vanding_liter_hb1')} · Kart. ${n('sensor.vanding_liter_hb2')} · Rab. ${n('sensor.vanding_liter_hb3')}`
-                + `<br>Drivhus ${n('sensor.vanding_liter_drivhus')} · Kapillær ${n('sensor.vanding_liter_kapillaer')}`;
+              const total = n('sensor.vanding_liter_i_dag_total');
+              const rows = [
+                ['Ærter', n('sensor.vanding_liter_hb1')],
+                ['Kartofler', n('sensor.vanding_liter_hb2')],
+                ['Rabarber', n('sensor.vanding_liter_hb3')],
+                ['Drivhus', n('sensor.vanding_liter_drivhus')],
+                ['Kapillær', n('sensor.vanding_liter_kapillaer')],
+              ];
+              const list = rows.map(r => `<div style="display:flex;justify-content:space-between;gap:6px"><span>${r[0]}</span><span style="font-variant-numeric:tabular-nums">${r[1]}</span></div>`).join('');
+              return `<div style="display:flex;flex-direction:column;width:100%;text-align:left">
+                <div style="font-size:11px;color:var(--secondary-text-color)">Liter i dag</div>
+                <div style="font-size:20px;font-weight:bold;line-height:1.1;margin:1px 0 4px">${total} L</div>
+                <div style="font-size:10.5px;color:var(--secondary-text-color);line-height:1.5">${list}</div>
+              </div>`;
             ]]]
         styles:
           card:
-            - padding: 8px
-          name:
-            - font-size: 11px
-            - color: var(--secondary-text-color)
-          state:
-            - font-size: 15px
-            - font-weight: bold
+            - padding: 10px
+          grid:
+            - grid-template-areas: '"info"'
           custom_fields:
-            breakdown:
-              - font-size: 9px
-              - color: var(--secondary-text-color)
-              - padding-top: 3px
-              - line-height: 1.3
+            info:
+              - width: 100%
 
       - type: custom:button-card
         entity: sensor.vanding_tid_i_dag_total
-        icon: mdi:timer-sand
-        show_icon: true
-        show_name: true
-        show_state: true
-        name: Tid i dag
+        show_icon: false
+        show_name: false
+        show_state: false
         tap_action:
           action: none
         hold_action:
           action: none
         custom_fields:
-          breakdown: |
+          info: |
             [[[
               const m = (id) => { const s = states[id]; return s ? Math.round((parseFloat(s.state) || 0) * 60) : 0; };
               const cap = () => { const s = states['sensor.vanding_kapillaer_tid_i_dag']; return s ? Math.round(parseFloat(s.state) || 0) : 0; };
-              return `Ærter ${m('sensor.vanding_hojbed_1_i_dag')} · Kart. ${m('sensor.vanding_hojbed_2_i_dag')} · Rab. ${m('sensor.vanding_hojbed_3_i_dag')}`
-                + `<br>Drivhus ${m('sensor.vanding_drivhus_i_dag')} · Kapillær ${cap()}`;
+              const total = (() => { const s = states['sensor.vanding_tid_i_dag_total']; return s ? Math.round(parseFloat(s.state) || 0) : 0; })();
+              const rows = [
+                ['Ærter', m('sensor.vanding_hojbed_1_i_dag')],
+                ['Kartofler', m('sensor.vanding_hojbed_2_i_dag')],
+                ['Rabarber', m('sensor.vanding_hojbed_3_i_dag')],
+                ['Drivhus', m('sensor.vanding_drivhus_i_dag')],
+                ['Kapillær', cap()],
+              ];
+              const list = rows.map(r => `<div style="display:flex;justify-content:space-between;gap:6px"><span>${r[0]}</span><span style="font-variant-numeric:tabular-nums">${r[1]} min</span></div>`).join('');
+              return `<div style="display:flex;flex-direction:column;width:100%;text-align:left">
+                <div style="font-size:11px;color:var(--secondary-text-color)">Tid i dag</div>
+                <div style="font-size:20px;font-weight:bold;line-height:1.1;margin:1px 0 4px">${total} min</div>
+                <div style="font-size:10.5px;color:var(--secondary-text-color);line-height:1.5">${list}</div>
+              </div>`;
             ]]]
         styles:
           card:
-            - padding: 8px
-          name:
-            - font-size: 11px
-            - color: var(--secondary-text-color)
-          state:
-            - font-size: 15px
-            - font-weight: bold
+            - padding: 10px
+          grid:
+            - grid-template-areas: '"info"'
           custom_fields:
-            breakdown:
-              - font-size: 9px
-              - color: var(--secondary-text-color)
-              - padding-top: 3px
-              - line-height: 1.3
+            info:
+              - width: 100%
 
   # �💡 Lys kontrol
   - type: horizontal-stack