124 files
This commit is contained in:
Home Assistant Version Control
@@ -287,6 +287,10 @@ export const panelStyles = css`
|
||||
.today-task { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.today-object { color: var(--secondary-text-color); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.today-row .btn-complete { color: var(--success-color, #4caf50); flex: none; }
|
||||
.today-row .today-complete { flex: none; --ha-button-font-size: 13px; white-space: nowrap; }
|
||||
.today-row .today-complete ha-icon { --mdc-icon-size: 18px; }
|
||||
:host([narrow]) .today-row .today-complete,
|
||||
:host([tight]) .today-row .today-complete { min-width: 0; --ha-button-height: 36px; }
|
||||
.today-empty {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 10px;
|
||||
padding: 48px 16px; color: var(--secondary-text-color); text-align: center;
|
||||
@@ -376,6 +380,17 @@ export const panelStyles = css`
|
||||
color: var(--secondary-text-color);
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
/* The chips track is minmax(0, …): when the row gets squeezed the track
|
||||
may shrink below the chips' natural width — clip instead of painting
|
||||
over the neighbouring type column (duty-rotation GIF, 2026-08-30). */
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
/* …and all-or-nothing: below 60 px of track there is no readable chip,
|
||||
only fragments — hide them entirely via the container query below. */
|
||||
container-type: inline-size;
|
||||
}
|
||||
@container (max-width: 60px) {
|
||||
.sub-chip { display: none; }
|
||||
}
|
||||
/* Empty subline still occupies its grid slot so neighbouring columns line up */
|
||||
.task-sub-empty { min-height: 1px; }
|
||||
@@ -388,6 +403,11 @@ export const panelStyles = css`
|
||||
border-radius: 10px;
|
||||
background: var(--secondary-background-color, rgba(127, 127, 127, 0.1));
|
||||
line-height: 1.4;
|
||||
/* A single chip wider than the squeezed track truncates instead of
|
||||
bleeding into the next column. */
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.sub-chip ha-icon {
|
||||
--mdc-icon-size: 14px;
|
||||
@@ -407,6 +427,16 @@ export const panelStyles = css`
|
||||
--mdc-icon-size: 26px;
|
||||
}
|
||||
|
||||
/* DESIGN PROTOTYPE (#145 wish 1): labelled, colour-coded action buttons
|
||||
instead of bare icons. Complete = filled success pill, Skip = outlined
|
||||
neutral pill; both keep the icon as a leading glyph. */
|
||||
.row-actions.as-buttons { gap: 4px; }
|
||||
.row-actions.as-buttons ha-button {
|
||||
--ha-button-font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.row-actions.as-buttons ha-icon { --mdc-icon-size: 18px; }
|
||||
|
||||
/* Custom elements default to display:inline; the task-detail component
|
||||
renders light-DOM and must behave like the block it wraps. */
|
||||
maintenance-task-detail-view { display: block; }
|
||||
@@ -1440,7 +1470,7 @@ export const panelStyles = css`
|
||||
full bottom row. */
|
||||
display: grid;
|
||||
grid-column: auto;
|
||||
grid-template-columns: auto minmax(0, 1fr) 100px 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-template-rows: auto auto auto;
|
||||
column-gap: 8px;
|
||||
row-gap: 4px;
|
||||
@@ -1480,6 +1510,56 @@ export const panelStyles = css`
|
||||
grid-column: 4;
|
||||
grid-row: 2;
|
||||
}
|
||||
/* Prototype: on phones the two labelled pills stack, so the row keeps its
|
||||
deterministic column X-positions and neither label gets truncated. */
|
||||
/* Labelled buttons stack when the row cannot hold them side by side:
|
||||
narrow viewports AND a tight panel (iPad portrait with the sidebar
|
||||
docked — the viewport is not narrow but the panel is ~768 px). */
|
||||
:host([narrow]) .row-actions.as-buttons,
|
||||
:host([tight]) .row-actions.as-buttons {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 4px;
|
||||
}
|
||||
:host([narrow]) .row-actions.as-buttons ha-button,
|
||||
:host([tight]) .row-actions.as-buttons ha-button { --ha-button-font-size: 12px; }
|
||||
/* buttons_compact: the labelled buttons collapse to an icon-only ha-button
|
||||
plus ha-icon-button side by side — the colour carries the meaning, the
|
||||
row keeps the icon-era height. */
|
||||
:host([narrow]) .row-actions.as-buttons.compact,
|
||||
:host([tight]) .row-actions.as-buttons.compact { flex-direction: row; align-items: center; gap: 2px; }
|
||||
:host([narrow]) .row-actions.compact ha-button,
|
||||
:host([tight]) .row-actions.compact ha-button { --ha-button-height: 36px; min-width: 0; }
|
||||
:host([narrow]) .row-actions.compact ha-icon-button,
|
||||
:host([tight]) .row-actions.compact ha-icon-button { --mdc-icon-button-size: 40px; --mdc-icon-size: 22px; color: var(--secondary-text-color); }
|
||||
:host([narrow]) .row-actions.compact ha-icon,
|
||||
:host([tight]) .row-actions.compact ha-icon { --mdc-icon-size: 20px; }
|
||||
|
||||
/* A TIGHT panel that is not narrow (iPad portrait with HA's sidebar
|
||||
docked: 1024 px viewport, ~768 px panel) gets the narrow row layout too —
|
||||
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-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-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.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([narrow]) .task-sub {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 3;
|
||||
@@ -1614,7 +1694,7 @@ export const panelStyles = css`
|
||||
/* Mirror the :host([narrow]) grid layout for narrow desktop windows */
|
||||
.task-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) 100px 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-template-rows: auto auto auto;
|
||||
column-gap: 8px;
|
||||
row-gap: 4px;
|
||||
|
||||
Reference in New Issue
Block a user