francop/HomeAssistantVS
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

184 files

Browse Source
This commit is contained in:
Home Assistant Version Control committed 2026-09-02 11:49:09 +00:00
1 parent 7b47edbf8d
commit 0c64e47969
184 files changed
+9608 -11572
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

custom_components/maintenance_supporter/frontend-src/panel-styles.ts
+102 -16
View File
@@ -229,6 +229,51 @@ export const panelStyles = css`
}
}
.bulk-check { display: flex; align-items: center; justify-content: center; cursor: pointer; }
/* Master-detail split (>=1500px panel, 2026-09-01): list left, docked task
detail right - the width finally carries content instead of slack. Only
the dashboard tab uses it; below the threshold everything is unchanged. */
.split-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(430px, 41%);
gap: 20px;
align-items: start;
}
.split-list { min-width: 0; }
/* Inside the split the list is ~60% wide — the type and chips columns are
redundant there (the docked detail names the type, assignee and labels),
and squeezed chips read as clutter. Drop both; the task name gets the
room and the list stays calm. */
.split-list .task-table { grid-template-columns: auto minmax(100px, 180px) minmax(120px, 1fr) 150px auto; }
.split-list .task-table.bulk { grid-template-columns: auto auto minmax(100px, 180px) minmax(120px, 1fr) 150px auto; }
.split-list .cell.type { display: none; }
.split-list .task-sub { display: none; }
.split-pane {
min-width: 0;
position: sticky;
top: 8px;
max-height: calc(100vh - 140px);
overflow-y: auto;
border: 1px solid var(--divider-color);
border-radius: 12px;
padding: 4px 16px 16px;
background: var(--card-background-color, #fff);
}
.split-pane-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 240px;
gap: 8px;
color: var(--secondary-text-color);
text-align: center;
}
.split-pane-empty ha-icon { --mdc-icon-size: 40px; opacity: 0.5; }
.task-row.selected {
background: rgba(var(--rgb-primary-color, 3, 169, 244), 0.1);
box-shadow: inset 3px 0 0 var(--primary-color);
}
.bulk-check input, .bulk-selectall input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--primary-color); }
.task-row.bulk-selected { background: color-mix(in srgb, var(--primary-color) 12%, transparent); }
.bulk-bar {
@@ -1457,7 +1502,16 @@ export const panelStyles = css`
width: 100%;
}
:host([narrow]) .task-table { display: block; }
/* Shared column tracks across rows (the wide layout's #66 lesson, applied
to narrow 2026-09-01): with per-row grids the auto badge/actions columns
sized independently, so the object-name column started at a different X
in every row — an "OK" pill vs "Due Soon" + priority chevron made the
list read jittery. The LIST owns the four tracks, rows subgrid them. */
:host([narrow]) .task-table {
display: grid;
grid-template-columns: auto minmax(76px, 1fr) 100px auto;
column-gap: 8px;
}
:host([narrow]) .task-row {
/* Mobile: 4-column grid keeps due-cell + actions at deterministic
@@ -1469,10 +1523,9 @@ export const panelStyles = css`
Task-name spans the full top row (own row above), chips span the
full bottom row. */
display: grid;
grid-column: auto;
grid-template-columns: auto minmax(76px, 1fr) fit-content(100px) auto; /* name column keeps a word-sized floor, the due column hugs its content — at 400 px the object name used to be clipped mid-word (2026-08-30) */
grid-column: 1 / -1;
grid-template-columns: subgrid;
grid-template-rows: auto auto auto;
column-gap: 8px;
row-gap: 4px;
padding: 12px;
}
@@ -1486,6 +1539,13 @@ export const panelStyles = css`
:host([narrow]) .cell-badges {
grid-column: 1;
grid-row: 2;
/* Stack extra badges (priority chevron, NFC, disabled) under the status
pill: in the shared-track table the widest badge ROW sized column 1
for every row, and a pill+chevron combo pushed Complete/Skip off the
right edge at phone widths (2026-09-01). */
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
:host([narrow]) .cell.object-name {
grid-column: 2;
@@ -1540,26 +1600,30 @@ export const panelStyles = css`
the wide subgrid overflowed its last column at that width even before
the buttons. Same rules as the :host([narrow]) block above / the
max-width:768px media mirror below, keyed on the panel's own width. */
:host([tight]:not([narrow])) .task-table { display: block; }
:host([tight]:not([narrow])) .task-table {
display: grid;
grid-template-columns: auto minmax(76px, 1fr) 100px auto;
column-gap: 8px;
}
:host([tight]:not([narrow])) .task-row {
display: grid;
grid-column: auto;
grid-template-columns: auto minmax(76px, 1fr) fit-content(100px) auto; /* name column keeps a word-sized floor, the due column hugs its content — at 400 px the object name used to be clipped mid-word (2026-08-30) */
grid-column: 1 / -1;
grid-template-columns: subgrid;
grid-template-rows: auto auto auto;
column-gap: 8px;
row-gap: 4px;
padding: 12px;
min-width: 0;
}
:host([tight]:not([narrow])) .cell.type { display: none; }
:host([tight]:not([narrow])) .cell.task-name { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
:host([tight]:not([narrow])) .cell-badges { grid-column: 1; grid-row: 2; }
:host([tight]:not([narrow])) .cell-badges { grid-column: 1; grid-row: 2; flex-direction: column; align-items: flex-start; gap: 4px; }
:host([tight]:not([narrow])) .cell.object-name { grid-column: 2; grid-row: 2; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; }
:host([tight]:not([narrow])) .due-cell { grid-column: 3; grid-row: 2; align-items: flex-end; min-width: 0; }
:host([tight]:not([narrow])) .row-actions { grid-column: 4; grid-row: 2; }
:host([tight]:not([narrow])) .task-sub { grid-column: 1 / -1; grid-row: 3; font-size: 11px; gap: 6px; justify-content: flex-start; flex-wrap: wrap; }
:host([tight]:not([narrow])) .task-sub-empty { display: none; }
:host([tight]:not([narrow])) .mini-sparkline { width: 50px; }
:host([tight]:not([narrow])) .mini-sparkline { display: none; }
:host([tight]:not([narrow])) .trend-arrow { display: inline; }
:host([narrow]) .task-sub {
grid-column: 1 / -1;
grid-row: 3;
@@ -1569,7 +1633,22 @@ export const panelStyles = css`
flex-wrap: wrap;
}
:host([narrow]) .task-sub-empty { display: none; }
:host([narrow]) .mini-sparkline { width: 50px; }
:host([narrow]) .mini-sparkline { display: none; }
:host([narrow]) .trend-arrow { display: inline; }
/* Phone band (≤429px): with SHARED tracks the widest badge sizes column 1
for every row, and the fixed 100px due column + both action buttons no
longer fit — Skip fell off the right edge. Tighter floors, slimmer row
padding and a smaller Skip icon-button. Bars stay uniform per
breakpoint (100px above, 84px here). */
@media (max-width: 429px) {
:host([narrow]) .task-table {
grid-template-columns: auto minmax(64px, 1fr) 84px auto;
column-gap: 6px;
}
:host([narrow]) .task-row { padding: 12px 8px; }
:host([narrow]) .row-actions.compact ha-icon-button { --mdc-icon-button-size: 32px; --mdc-icon-size: 20px; }
}
:host([narrow]) .detail-header {
flex-direction: column;
@@ -1691,24 +1770,31 @@ export const panelStyles = css`
.task-header-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
.filter-bar { flex-wrap: wrap; }
.filter-bar select { flex: 1; min-width: 0; }
/* Mirror the :host([narrow]) grid layout for narrow desktop windows */
/* Mirror the :host([narrow]) grid layout for narrow desktop windows —
incl. the shared-track table so rows align (2026-09-01). */
.task-table {
display: grid;
grid-template-columns: auto minmax(76px, 1fr) 100px auto;
column-gap: 8px;
}
.task-row {
display: grid;
grid-template-columns: auto minmax(76px, 1fr) fit-content(100px) auto; /* name column keeps a word-sized floor, the due column hugs its content — at 400 px the object name used to be clipped mid-word (2026-08-30) */
grid-column: 1 / -1;
grid-template-columns: subgrid;
grid-template-rows: auto auto auto;
column-gap: 8px;
row-gap: 4px;
padding: 12px;
}
.cell.type { display: none; }
.cell.task-name { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
.cell-badges { grid-column: 1; grid-row: 2; }
.cell-badges { grid-column: 1; grid-row: 2; flex-direction: column; align-items: flex-start; gap: 4px; }
.cell.object-name { grid-column: 2; grid-row: 2; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; }
.due-cell { grid-column: 3; grid-row: 2; align-items: flex-end; min-width: 0; }
.row-actions { grid-column: 4; grid-row: 2; }
.task-sub { grid-column: 1 / -1; grid-row: 3; font-size: 11px; gap: 6px; justify-content: flex-start; flex-wrap: wrap; }
.task-sub-empty { display: none; }
.mini-sparkline { width: 50px; }
.mini-sparkline { display: none; }
.trend-arrow { display: inline; }
.detail-header { flex-direction: column; align-items: flex-start; }
.info-grid { grid-template-columns: 1fr; }
.history-filters-new { flex-direction: column; }