jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +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
class="container"
style=${styleMap({
"--cell-count": String(
(this._config?.sections?.length ?? 0) + (editMode ? 1 : 0)
"--section-count": String(
sectionsConfig.length + (editMode ? 1 : 0)
),
})}
>
@ -249,26 +249,28 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
}
.container {
/* Inputs */
--grid-gap: 20px;
--grid-max-width: 1400px;
--grid-cell-max-width: 500px;
--grid-cell-min-width: 320px;
--grid-max-section-count: 4;
--grid-section-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;
grid-template-columns: repeat(
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;
gap: 8px var(--grid-gap);
padding: var(--grid-gap);
box-sizing: border-box;
max-width: min(
calc(
var(--cell-count) * (var(--grid-cell-max-width) + var(--grid-gap)) +
var(--grid-gap)
),
var(--grid-max-width)
);
max-width: var(--grid-max-width);
margin: 0 auto;
}