From 4c074fce056817dc75716b10b218a481d9f93f0f Mon Sep 17 00:00:00 2001 From: Bartosz Dokurno Date: Sun, 16 Apr 2023 22:47:44 +0200 Subject: [PATCH 1/4] Add `getCardSize()` --- src/components/horizonCard/HorizonCard.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/horizonCard/HorizonCard.ts b/src/components/horizonCard/HorizonCard.ts index d60f3d1..9321aaa 100644 --- a/src/components/horizonCard/HorizonCard.ts +++ b/src/components/horizonCard/HorizonCard.ts @@ -42,6 +42,10 @@ export class HorizonCard extends LitElement { this.processLastHass() } + public getCardSize (): number { + return 6 + } + static getConfigElement (): HTMLElement { return document.createElement(HorizonCardEditor.cardType) } From f89718bdbfa7d5f5f05c78636a3ca25f1b5218c7 Mon Sep 17 00:00:00 2001 From: Bartosz Dokurno Date: Mon, 17 Apr 2023 13:09:18 +0200 Subject: [PATCH 2/4] Add docs and make this function dynamic --- src/components/horizonCard/HorizonCard.ts | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/horizonCard/HorizonCard.ts b/src/components/horizonCard/HorizonCard.ts index 7355808..12603a5 100644 --- a/src/components/horizonCard/HorizonCard.ts +++ b/src/components/horizonCard/HorizonCard.ts @@ -41,8 +41,26 @@ export class HorizonCard extends LitElement { this.processLastHass() } + /** + * called by HASS to properly distribute card in lovelace view. It should return height + * of the card as a number where 1 is equivalent of 50 pixels. + * @see https://developers.home-assistant.io/docs/frontend/custom-ui/custom-card/#api + */ public getCardSize (): number { - return 6 + let height = 4 // Smallest possible card (only graph) is roughly 200px + + // Each element of card (header, content, footer) adds roughly 50px to the height + if(this.config.fields?.sunrise || this.config.fields?.sunset) { + height += 1 + } + if(this.config.fields?.dawn || this.config.fields?.noon || this.config.fields?.dusk) { + height += 1 + } + if(this.config.fields?.azimuth || this.config.fields?.elevation) { + height += 1 + } + + return height } // Visual editor disabled because it's broken, see https://developers.home-assistant.io/blog/2022/02/18/paper-elements/ From ffea38da81f81b1f299cbc0fb7433fc01be88510 Mon Sep 17 00:00:00 2001 From: Bartosz Dokurno Date: Mon, 17 Apr 2023 13:32:12 +0200 Subject: [PATCH 3/4] review --- src/components/horizonCard/HorizonCard.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/horizonCard/HorizonCard.ts b/src/components/horizonCard/HorizonCard.ts index 12603a5..71d4596 100644 --- a/src/components/horizonCard/HorizonCard.ts +++ b/src/components/horizonCard/HorizonCard.ts @@ -49,13 +49,19 @@ export class HorizonCard extends LitElement { public getCardSize (): number { let height = 4 // Smallest possible card (only graph) is roughly 200px - // Each element of card (header, content, footer) adds roughly 50px to the height + // Each element of card (title, header, content, footer) adds roughly 50px to the height + if(this.config.title && this.config.title.length > 0) { + height += 1 + } + if(this.config.fields?.sunrise || this.config.fields?.sunset) { height += 1 } + if(this.config.fields?.dawn || this.config.fields?.noon || this.config.fields?.dusk) { height += 1 } + if(this.config.fields?.azimuth || this.config.fields?.elevation) { height += 1 } From 910f1742ed852a43543dfd6d7eec5a24f79a7b64 Mon Sep 17 00:00:00 2001 From: Bartosz Dokurno Date: Mon, 17 Apr 2023 13:57:15 +0200 Subject: [PATCH 4/4] Add spaces --- src/components/horizonCard/HorizonCard.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/horizonCard/HorizonCard.ts b/src/components/horizonCard/HorizonCard.ts index 71d4596..f381424 100644 --- a/src/components/horizonCard/HorizonCard.ts +++ b/src/components/horizonCard/HorizonCard.ts @@ -50,19 +50,19 @@ export class HorizonCard extends LitElement { let height = 4 // Smallest possible card (only graph) is roughly 200px // Each element of card (title, header, content, footer) adds roughly 50px to the height - if(this.config.title && this.config.title.length > 0) { + if (this.config.title && this.config.title.length > 0) { height += 1 } - if(this.config.fields?.sunrise || this.config.fields?.sunset) { + if (this.config.fields?.sunrise || this.config.fields?.sunset) { height += 1 } - if(this.config.fields?.dawn || this.config.fields?.noon || this.config.fields?.dusk) { + if (this.config.fields?.dawn || this.config.fields?.noon || this.config.fields?.dusk) { height += 1 } - if(this.config.fields?.azimuth || this.config.fields?.elevation) { + if (this.config.fields?.azimuth || this.config.fields?.elevation) { height += 1 }