jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-03 14:37:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP: Allow to resize section

Browse Source
This commit is contained in:
Paul Bottein 2024-08-19 18:30:42 +02:00
parent 0ff2f1bf75
commit 3de4dffa02
No known key found for this signature in database
2 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/data/lovelace/config/view.ts
View File

@ -25,6 +25,7 @@ export interface LovelaceBaseViewConfig {
// Only used for section view, it should move to a section view config type when the views will have dedicated editor.
max_columns?: number;
dense_section_placement?: boolean;
column_breakpoints: Record<string, number>;
}
export interface LovelaceViewConfig extends LovelaceBaseViewConfig {

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

@ -32,6 +32,15 @@ export const DEFAULT_MAX_COLUMNS = 4;
const parsePx = (value: string) => parseInt(value.replace("px", ""));
export const BREAKPOINTS: Record<string, number> = {
"0": 1,
"768": 2,
"1280": 3,
"1600": 4,
"1920": 5,
"2560": 6,
};
@customElement("hui-sections-view")
export class SectionsView extends LitElement implements LovelaceViewElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@ -321,20 +330,50 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
:host {
--row-height: var(--ha-view-sections-row-height, 56px);
--row-gap: var(--ha-view-sections-row-gap, 8px);
--column-gap: var(--ha-view-sections-column-gap, 32px);
--column-gap: var(--ha-view-sections-column-gap, 24px);
--column-max-width: var(--ha-view-sections-column-max-width, 500px);
--column-min-width: var(--ha-view-sections-column-min-width, 320px);
display: block;
}
:host {
--column-count: 1;
}
@media (min-width: 768px) {
:host {
--column-count: 2;
}
}
@media (min-width: 1280px) {
:host {
--column-count: 3;
}
}
@media (min-width: 1600px) {
:host {
--column-count: 4;
}
}
@media (min-width: 1920px) {
:host {
--column-count: 5;
}
}
@media (min-width: 2560px) {
:host {
--column-count: 6;
}
}
.container > * {
position: relative;
width: 100%;
}
.section {
--section-column-span: min(var(--column-span, 1), var(--column-count));
border-radius: var(--ha-card-border-radius, 12px);
grid-column: span var(--column-span);
grid-column: span var(--section-column-span);
grid-row: span var(--row-span);
}