189 files

custom_components/maintenance_supporter/frontend-src/styles.ts

@@ -472,7 +472,34 @@ export const nativeFieldStyles = css`
   .field-input:focus { outline: none; border-color: var(--primary-color); }
 `;
 
+/** Household member avatar (#169 follow-up): initials in the member's
+ *  palette colour. Part of sharedStyles (panel, card, dialogs) and pulled
+ *  in on its own by surfaces with their own stylesheet (settings view). */
+export const personStyles = css`
+  .person-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; vertical-align: middle; }
+  .person-avatar {
+    width: 22px; height: 22px; border-radius: 50%; flex: none;
+    display: inline-flex; align-items: center; justify-content: center;
+    background: var(--person-color, #546e7a); color: #fff;
+    font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; line-height: 1;
+    font-variant-numeric: tabular-nums;
+  }
+  .person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+`;
+
+/** #170: the muted reference-number chip ("#8.3") — shared by every surface. */
+export const refStyles = css`
+  .ref-chip {
+    display: inline-block; font-size: 11.5px; font-weight: 500; line-height: 1; padding: 3px 6px;
+    border-radius: 6px; border: 1px solid var(--divider-color); color: var(--secondary-text-color);
+    font-variant-numeric: tabular-nums; letter-spacing: .02em; vertical-align: middle; white-space: nowrap;
+    user-select: all;
+  }
+`;
+
 export const sharedStyles = css`
+  ${personStyles}
+  ${refStyles}
   :host {
     --maint-ok-color: var(--success-color, #4caf50);
     --maint-due-soon-color: var(--warning-color, #ff9800);
@@ -731,6 +758,37 @@ export const sharedStyles = css`
   .history-phase-badge:has(+ .history-auto-badge) {
     margin-right: 0;
   }
+  /* #161 — a completion can carry several photos; thumbnails wrap. */
+  .history-photos {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  /* #161 phase 2 — named readings of a completion: a compact
+     name / value grid, wrapping into columns on wide screens. */
+  .history-readings {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 280px));
+    gap: 2px 24px;
+    margin: 4px 0;
+    font-size: 13px;
+  }
+  .history-reading {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    min-width: 0;
+  }
+  .history-reading-name {
+    color: var(--secondary-text-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .history-reading-value {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
   .history-edit-btn {
     background: transparent;
     color: var(--secondary-text-color);
@@ -1625,15 +1683,24 @@ export const sharedStyles = css`
     .sparkline-container { max-width: 100%; overflow: hidden; }
     .sparkline-svg { height: 100px; }
 
-    .stats-bar { gap: 8px; padding: 12px; }
+    /* #150 — phones get a FIXED 10-track grid instead of auto-fit: the five
+       KPI tiles span 2 tracks each (= one full row on any width ≥ 320 px),
+       the two budget tiles span 5 each (= a full second row). auto-fit with
+       a px floor rewrapped to 3-4 columns on 360-412 px phones and left one
+       or two tiles orphaned on their own row. */
+    .stats-bar { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; padding: 12px; }
     /* min-width: 0 (NOT a fixed floor) — a fixed min-width re-enables the
        grid's auto minimum, so the 5 KPI tracks couldn't shrink below their
        label text and the last KPI clipped off-screen on phones (the header
        only *looked* cut — .content scrolls sideways, but nothing hints so).
        With 0 the tracks compress and the labels wrap to a second line. */
-    .stat-item { min-width: 0; }
-    .stat-item.clickable { padding: 4px 4px; }
-    .stat-item .stat-label { font-size: 11px; white-space: normal; text-align: center; line-height: 1.2; }
+    .stat-item { min-width: 0; grid-column: span 2; }
+    .stat-item.budget-tile { grid-column: span 5; }
+    .stat-item.clickable { padding: 4px 2px; }
+    /* ~60 px tracks: multi-word labels wrap at the space, single overlong
+       words (nl "Achterstallig") hyphenate where the browser can and hard-
+       break as the last resort — never clip. */
+    .stat-item .stat-label { font-size: 11px; white-space: normal; text-align: center; line-height: 1.2; hyphens: auto; overflow-wrap: anywhere; }
     .stat-value { font-size: 20px; }
   }
 `;