jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use max column count instead of max width for section grid (#19932)

Browse Source
This commit is contained in:
Paul Bottein 2024-03-01 13:09:21 +01:00
parent 67d8765624
commit 730cd9f983
No known key found for this signature in database
1 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/panels/lovelace/views/hui-sections-view.ts
View File

@ -73,8 +73,8 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
<div <div
class="container" class="container"
style=${styleMap({ style=${styleMap({
"--cell-count": String( "--section-count": String(
(this._config?.sections?.length ?? 0) + (editMode ? 1 : 0) sectionsConfig.length + (editMode ? 1 : 0)
), ),
})} })}
> >
@ -249,26 +249,28 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
} }
.container { .container {
/* Inputs */
--grid-gap: 20px; --grid-gap: 20px;
--grid-max-width: 1400px; --grid-max-section-count: 4;
--grid-cell-max-width: 500px; --grid-section-min-width: 320px;
--grid-cell-min-width: 320px;
/* Calculated */
--max-count: min(var(--section-count), var(--grid-max-section-count));
--grid-max-width: calc(
(var(--max-count) + 1) * var(--grid-section-min-width) +
(var(--max-count) + 2) * var(--grid-gap) - 1px
);
display: grid; display: grid;
grid-template-columns: repeat( grid-template-columns: repeat(
auto-fit, auto-fit,
minmax(var(--grid-cell-min-width), 1fr) minmax(var(--grid-section-min-width), 1fr)
); );
grid-gap: 8px var(--grid-gap);
justify-content: center; justify-content: center;
gap: 8px var(--grid-gap);
padding: var(--grid-gap); padding: var(--grid-gap);
box-sizing: border-box; box-sizing: border-box;
max-width: min( max-width: var(--grid-max-width);
calc(
var(--cell-count) * (var(--grid-cell-max-width) + var(--grid-gap)) +
var(--grid-gap)
),
var(--grid-max-width)
);
margin: 0 auto; margin: 0 auto;
} }