From c1dba462e8d1b060b86c3c15c269af966506a711 Mon Sep 17 00:00:00 2001 From: Zack Barett Date: Thu, 15 Oct 2020 10:46:29 -0500 Subject: [PATCH] Lovelace Cards: Update size calcs and add height fixes for horizontal stacks (#7177) --- .../lovelace/cards/hui-alarm-panel-card.ts | 8 +++--- src/panels/lovelace/cards/hui-button-card.ts | 2 +- .../lovelace/cards/hui-calendar-card.ts | 4 ++- .../lovelace/cards/hui-entities-card.ts | 2 +- src/panels/lovelace/cards/hui-gauge-card.ts | 13 +++------- src/panels/lovelace/cards/hui-glance-card.ts | 11 ++++++-- .../lovelace/cards/hui-history-graph-card.ts | 16 ++++++++---- .../cards/hui-horizontal-stack-card.ts | 1 + .../lovelace/cards/hui-humidifier-card.ts | 8 +++--- src/panels/lovelace/cards/hui-iframe-card.ts | 2 +- src/panels/lovelace/cards/hui-light-card.ts | 6 +---- src/panels/lovelace/cards/hui-map-card.ts | 17 ++++++------- .../lovelace/cards/hui-markdown-card.ts | 7 ++++-- .../lovelace/cards/hui-media-control-card.ts | 1 + src/panels/lovelace/cards/hui-picture-card.ts | 3 ++- .../cards/hui-picture-elements-card.ts | 4 ++- .../lovelace/cards/hui-picture-entity-card.ts | 8 +++--- .../lovelace/cards/hui-picture-glance-card.ts | 4 ++- .../lovelace/cards/hui-plant-status-card.ts | 8 ++++-- .../lovelace/cards/hui-shopping-list-card.ts | 10 +++++--- .../lovelace/cards/hui-thermostat-card.ts | 2 +- .../lovelace/cards/hui-vertical-stack-card.ts | 1 + .../cards/hui-weather-forecast-card.ts | 25 ++++++++++++------- .../common/generate-lovelace-config.ts | 2 +- .../hui-buttons-header-footer.ts | 4 +-- .../header-footer/hui-graph-header-footer.ts | 6 ++--- src/util/bytes-to-string.ts | 18 ++++++------- 27 files changed, 112 insertions(+), 81 deletions(-) diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts index 639c5c705d..634941cfcf 100644 --- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts +++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts @@ -78,14 +78,14 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { public async getCardSize(): Promise { if (!this._config || !this.hass) { - return 5; + return 9; } const stateObj = this.hass.states[this._config.entity]; return !stateObj || stateObj.attributes.code_format !== FORMAT_NUMBER - ? 3 - : 8; + ? 4 + : 9; } public setConfig(config: AlarmPanelCardConfig): void { @@ -270,6 +270,8 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { ha-card { padding-bottom: 16px; position: relative; + height: 100%; + box-sizing: border-box; --alarm-color-disarmed: var(--label-badge-green); --alarm-color-pending: var(--label-badge-yellow); --alarm-color-triggered: var(--label-badge-red); diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts index 2d75c7e33b..c7fd8ba8ab 100644 --- a/src/panels/lovelace/cards/hui-button-card.ts +++ b/src/panels/lovelace/cards/hui-button-card.ts @@ -80,7 +80,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard { public getCardSize(): number { return ( - (this._config?.show_icon ? 3 : 0) + (this._config?.show_name ? 1 : 0) + (this._config?.show_icon ? 4 : 0) + (this._config?.show_name ? 1 : 0) ); } diff --git a/src/panels/lovelace/cards/hui-calendar-card.ts b/src/panels/lovelace/cards/hui-calendar-card.ts index 625e915fac..9e373f2f19 100644 --- a/src/panels/lovelace/cards/hui-calendar-card.ts +++ b/src/panels/lovelace/cards/hui-calendar-card.ts @@ -101,7 +101,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard { } public getCardSize(): number { - return 4; + return this._config?.header ? 1 : 0 + 11; } public connectedCallback(): void { @@ -208,6 +208,8 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard { ha-card { position: relative; padding: 0 8px 8px; + box-sizing: border-box; + height: 100%; } .header { diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 185f256617..cc9332790d 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -96,7 +96,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { } // +1 for the header let size = - (this._config.title || this._showHeaderToggle ? 1 : 0) + + (this._config.title || this._showHeaderToggle ? 2 : 0) + (this._config.entities.length || 1); if (this._headerElement) { const headerSize = computeCardSize(this._headerElement); diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index 686f36a480..c6ce2aa379 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -4,26 +4,25 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; - +import { styleMap } from "lit-html/directives/style-map"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { isValidEntityId } from "../../../common/entity/valid_entity_id"; import "../../../components/ha-card"; +import "../../../components/ha-gauge"; import type { HomeAssistant } from "../../../types"; import { findEntities } from "../common/find-entites"; import { hasConfigOrEntityChanged } from "../common/has-changed"; import { createEntityNotFoundWarning } from "../components/hui-warning"; import type { LovelaceCard, LovelaceCardEditor } from "../types"; import type { GaugeCardConfig } from "./types"; -import "../../../components/ha-gauge"; -import { styleMap } from "lit-html/directives/style-map"; export const severityMap = { red: "var(--label-badge-red)", @@ -69,7 +68,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { @internalProperty() private _config?: GaugeCardConfig; public getCardSize(): number { - return 2; + return 4; } public setConfig(config: GaugeCardConfig): void { @@ -195,10 +194,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { static get styles(): CSSResult { return css` - :host { - display: block; - } - ha-card { cursor: pointer; height: 100%; diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts index 0da08a86a1..f3e9fb7f55 100644 --- a/src/panels/lovelace/cards/hui-glance-card.ts +++ b/src/panels/lovelace/cards/hui-glance-card.ts @@ -73,13 +73,14 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard { public getCardSize(): number { const rowHeight = (this._config!.show_icon ? 1 : 0) + - (this._config!.show_name && this._config!.show_state ? 1 : 0) || 1; + (this._config!.show_name ? 1 : 0) + + (this._config!.show_state ? 1 : 0); const numRows = Math.ceil( this._configEntities!.length / (this._config!.columns || 5) ); - return (this._config!.title ? 1 : 0) + rowHeight * numRows; + return (this._config!.title ? 2 : 0) + rowHeight * numRows; } public setConfig(config: GlanceCardConfig): void { @@ -189,10 +190,16 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard { static get styles(): CSSResult { return css` + ha-card { + height: 100%; + } .entities { display: flex; padding: 0 16px 4px; flex-wrap: wrap; + height: 100%; + box-sizing: border-box; + align-content: center; } .entities.no-header { padding-top: 16px; diff --git a/src/panels/lovelace/cards/hui-history-graph-card.ts b/src/panels/lovelace/cards/hui-history-graph-card.ts index 457ba8c0a5..57b932c2db 100644 --- a/src/panels/lovelace/cards/hui-history-graph-card.ts +++ b/src/panels/lovelace/cards/hui-history-graph-card.ts @@ -3,25 +3,25 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; +import { throttle } from "../../../common/util/throttle"; import "../../../components/ha-card"; import "../../../components/state-history-charts"; import { CacheConfig, getRecentWithCache } from "../../../data/cached-history"; +import { HistoryResult } from "../../../data/history"; import { HomeAssistant } from "../../../types"; import { findEntities } from "../common/find-entites"; +import { hasConfigOrEntitiesChanged } from "../common/has-changed"; import { processConfigEntities } from "../common/process-config-entities"; import { EntityConfig } from "../entity-rows/types"; import { LovelaceCard } from "../types"; import { HistoryGraphCardConfig } from "./types"; -import { HistoryResult } from "../../../data/history"; -import { hasConfigOrEntitiesChanged } from "../common/has-changed"; -import { throttle } from "../../../common/util/throttle"; @customElement("hui-history-graph-card") export class HuiHistoryGraphCard extends LitElement implements LovelaceCard { @@ -67,7 +67,9 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard { private _throttleGetStateHistory?: () => void; public getCardSize(): number { - return 4; + return this._config?.title + ? 2 + : 0 + 2 * (this._configEntities?.length || 1); } public setConfig(config: HistoryGraphCardConfig): void { @@ -185,6 +187,10 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard { static get styles(): CSSResult { return css` + ha-card { + height: 100%; + overflow-y: auto; + } .content { padding: 16px; } diff --git a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts index 22b2cd4c49..2ae05adaf1 100644 --- a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts +++ b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts @@ -25,6 +25,7 @@ class HuiHorizontalStackCard extends HuiStackCard { css` #root { display: flex; + height: 100%; } #root > * { flex: 1 1 0; diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts index 2f8ba20d7c..614e359c05 100644 --- a/src/panels/lovelace/cards/hui-humidifier-card.ts +++ b/src/panels/lovelace/cards/hui-humidifier-card.ts @@ -1,4 +1,3 @@ -import "../../../components/ha-icon-button"; import "@thomasloven/round-slider"; import { HassEntity } from "home-assistant-js-websocket"; import { @@ -6,9 +5,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, svg, TemplateResult, @@ -18,8 +17,9 @@ import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { computeRTLDirection } from "../../../common/util/compute_rtl"; import "../../../components/ha-card"; -import { HumidifierEntity } from "../../../data/humidifier"; +import "../../../components/ha-icon-button"; import { UNAVAILABLE_STATES } from "../../../data/entity"; +import { HumidifierEntity } from "../../../data/humidifier"; import { HomeAssistant } from "../../../types"; import { findEntities } from "../common/find-entites"; import { hasConfigOrEntityChanged } from "../common/has-changed"; @@ -61,7 +61,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard { @internalProperty() private _setHum?: number; public getCardSize(): number { - return 5; + return 6; } public setConfig(config: HumidifierCardConfig): void { diff --git a/src/panels/lovelace/cards/hui-iframe-card.ts b/src/panels/lovelace/cards/hui-iframe-card.ts index 3e464d76d4..c2fd589e03 100644 --- a/src/panels/lovelace/cards/hui-iframe-card.ts +++ b/src/panels/lovelace/cards/hui-iframe-card.ts @@ -40,7 +40,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard { public getCardSize(): number { if (!this._config) { - return 3; + return 5; } const aspectRatio = this._config.aspect_ratio ? Number(this._config.aspect_ratio.replace("%", "")) diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts index 0a9bc908b2..a959e518b3 100644 --- a/src/panels/lovelace/cards/hui-light-card.ts +++ b/src/panels/lovelace/cards/hui-light-card.ts @@ -68,7 +68,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard { private _brightnessTimout?: number; public getCardSize(): number { - return 4; + return 5; } public setConfig(config: LightCardConfig): void { @@ -267,10 +267,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard { static get styles(): CSSResult { return css` - :host { - display: block; - } - ha-card { height: 100%; box-sizing: border-box; diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts index 4c207b800f..4d19b18848 100644 --- a/src/panels/lovelace/cards/hui-map-card.ts +++ b/src/panels/lovelace/cards/hui-map-card.ts @@ -1,4 +1,3 @@ -import "../../../components/ha-icon-button"; import { HassEntity } from "home-assistant-js-websocket"; import { Circle, @@ -23,24 +22,25 @@ import { import { classMap } from "lit-html/directives/class-map"; import { LeafletModuleType, - setupLeafletMap, replaceTileLayer, + setupLeafletMap, } from "../../../common/dom/setup-leaflet-map"; import { computeDomain } from "../../../common/entity/compute_domain"; import { computeStateDomain } from "../../../common/entity/compute_state_domain"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { debounce } from "../../../common/util/debounce"; import parseAspectRatio from "../../../common/util/parse-aspect-ratio"; +import "../../../components/ha-card"; +import "../../../components/ha-icon-button"; import { fetchRecent } from "../../../data/history"; import { HomeAssistant } from "../../../types"; import "../../map/ha-entity-marker"; import { findEntities } from "../common/find-entites"; +import { installResizeObserver } from "../common/install-resize-observer"; import { processConfigEntities } from "../common/process-config-entities"; import { EntityConfig } from "../entity-rows/types"; import { LovelaceCard } from "../types"; -import "../../../components/ha-card"; import { MapCardConfig } from "./types"; -import { installResizeObserver } from "../common/install-resize-observer"; @customElement("hui-map-card") class HuiMapCard extends LitElement implements LovelaceCard { @@ -162,7 +162,7 @@ class HuiMapCard extends LitElement implements LovelaceCard { public getCardSize(): number { if (!this._config?.aspect_ratio) { - return 5; + return 7; } const ratio = parseAspectRatio(this._config.aspect_ratio); @@ -660,17 +660,14 @@ class HuiMapCard extends LitElement implements LovelaceCard { static get styles(): CSSResult { return css` - :host([ispanel]) ha-card { - width: 100%; - height: 100%; - } - :host([ispanel][editMode]) ha-card { height: calc(100% - 51px); } ha-card { overflow: hidden; + width: 100%; + height: 100%; } #map { diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts index a802a79c46..ba2aa6f901 100644 --- a/src/panels/lovelace/cards/hui-markdown-card.ts +++ b/src/panels/lovelace/cards/hui-markdown-card.ts @@ -4,9 +4,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -15,8 +15,8 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen import "../../../components/ha-card"; import "../../../components/ha-markdown"; import { - subscribeRenderTemplate, RenderTemplateResult, + subscribeRenderTemplate, } from "../../../data/ws-templates"; import type { HomeAssistant } from "../../../types"; import type { LovelaceCard, LovelaceCardEditor } from "../types"; @@ -170,6 +170,9 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard { static get styles(): CSSResult { return css` + ha-card { + height: 100%; + } ha-markdown { padding: 0 16px 16px; } diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index 91831a601c..0f521e96c9 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -761,6 +761,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { return css` ha-card { overflow: hidden; + height: 100%; } .background { diff --git a/src/panels/lovelace/cards/hui-picture-card.ts b/src/panels/lovelace/cards/hui-picture-card.ts index 479c504ad9..a165d0b688 100644 --- a/src/panels/lovelace/cards/hui-picture-card.ts +++ b/src/panels/lovelace/cards/hui-picture-card.ts @@ -43,7 +43,7 @@ export class HuiPictureCard extends LitElement implements LovelaceCard { @property() protected _config?: PictureCardConfig; public getCardSize(): number { - return 3; + return 5; } public setConfig(config: PictureCardConfig): void { @@ -113,6 +113,7 @@ export class HuiPictureCard extends LitElement implements LovelaceCard { return css` ha-card { overflow: hidden; + height: 100%; } ha-card.clickable { diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts index d189f885bd..55bc376386 100644 --- a/src/panels/lovelace/cards/hui-picture-elements-card.ts +++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts @@ -3,9 +3,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -149,6 +149,8 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard { ha-card { overflow: hidden; + height: 100%; + box-sizing: border-box; } `; } diff --git a/src/panels/lovelace/cards/hui-picture-entity-card.ts b/src/panels/lovelace/cards/hui-picture-entity-card.ts index 60b1384670..d20181536f 100644 --- a/src/panels/lovelace/cards/hui-picture-entity-card.ts +++ b/src/panels/lovelace/cards/hui-picture-entity-card.ts @@ -3,9 +3,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -139,9 +139,9 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard { `; } else if (this._config.show_name) { - footer = html`
${name}
`; + footer = html`
${name}
`; } else if (this._config.show_state) { - footer = html`
${state}
`; + footer = html`
${state}
`; } return html` @@ -182,6 +182,8 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard { min-height: 75px; overflow: hidden; position: relative; + height: 100%; + box-sizing: border-box; } hui-image.clickable { diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index 0c04eeccf3..b5a6ed9e1f 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -266,7 +266,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { `} > ${this._config!.show_state !== true && entityConf.show_state !== true - ? html`
` + ? html`
` : html`
${entityConf.attribute @@ -297,6 +297,8 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { position: relative; min-height: 48px; overflow: hidden; + height: 100%; + box-sizing: border-box; } hui-image.clickable { diff --git a/src/panels/lovelace/cards/hui-plant-status-card.ts b/src/panels/lovelace/cards/hui-plant-status-card.ts index 18ecd2a0ed..d263c26b80 100644 --- a/src/panels/lovelace/cards/hui-plant-status-card.ts +++ b/src/panels/lovelace/cards/hui-plant-status-card.ts @@ -4,9 +4,9 @@ import { CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -19,9 +19,9 @@ import { HomeAssistant } from "../../../types"; import { actionHandler } from "../common/directives/action-handler-directive"; import { findEntities } from "../common/find-entites"; import { hasConfigOrEntityChanged } from "../common/has-changed"; +import { createEntityNotFoundWarning } from "../components/hui-warning"; import { LovelaceCard, LovelaceCardEditor } from "../types"; import { PlantAttributeTarget, PlantStatusCardConfig } from "./types"; -import { createEntityNotFoundWarning } from "../components/hui-warning"; const SENSORS = { moisture: "hass:water", @@ -163,6 +163,10 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard { static get styles(): CSSResult { return css` + ha-card { + height: 100%; + box-sizing: border-box; + } .banner { display: flex; align-items: flex-end; diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts index fc1518c945..7fcc865d8b 100644 --- a/src/panels/lovelace/cards/hui-shopping-list-card.ts +++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts @@ -1,13 +1,14 @@ import "@polymer/paper-checkbox/paper-checkbox"; import { PaperInputElement } from "@polymer/paper-input/paper-input"; +import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; @@ -23,11 +24,10 @@ import { ShoppingListItem, updateItem, } from "../../../data/shopping-list"; +import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; import { HomeAssistant } from "../../../types"; import { LovelaceCard, LovelaceCardEditor } from "../types"; import { SensorCardConfig, ShoppingListCardConfig } from "./types"; -import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; -import { UnsubscribeFunc } from "home-assistant-js-websocket"; @customElement("hui-shopping-list-card") class HuiShoppingListCard extends SubscribeMixin(LitElement) @@ -52,7 +52,7 @@ class HuiShoppingListCard extends SubscribeMixin(LitElement) @internalProperty() private _checkedItems?: ShoppingListItem[]; public getCardSize(): number { - return (this._config ? (this._config.title ? 1 : 0) : 0) + 3; + return (this._config ? (this._config.title ? 2 : 0) : 0) + 3; } public setConfig(config: ShoppingListCardConfig): void { @@ -254,6 +254,8 @@ class HuiShoppingListCard extends SubscribeMixin(LitElement) return css` ha-card { padding: 16px; + height: 100%; + box-sizing: border-box; } .has-header { diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts index 8470bd4c34..19e1ca9e95 100644 --- a/src/panels/lovelace/cards/hui-thermostat-card.ts +++ b/src/panels/lovelace/cards/hui-thermostat-card.ts @@ -82,7 +82,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { @query("ha-card") private _card?: HaCard; public getCardSize(): number { - return 5; + return 7; } public setConfig(config: ThermostatCardConfig): void { diff --git a/src/panels/lovelace/cards/hui-vertical-stack-card.ts b/src/panels/lovelace/cards/hui-vertical-stack-card.ts index fea2bc7bf0..81ac8dd930 100644 --- a/src/panels/lovelace/cards/hui-vertical-stack-card.ts +++ b/src/panels/lovelace/cards/hui-vertical-stack-card.ts @@ -26,6 +26,7 @@ class HuiVerticalStackCard extends HuiStackCard { #root { display: flex; flex-direction: column; + height: 100%; } #root > * { margin: 4px 0 4px 0; diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index 90a563ea1e..36c4bd8d1b 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -86,7 +86,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { } public getCardSize(): number { - return this._config?.show_forecast !== false ? 4 : 2; + return this._config?.show_forecast !== false ? 5 : 2; } public setConfig(config: WeatherForecastCardConfig): void { @@ -354,31 +354,38 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { return; } - if (this.offsetWidth < 375) { + const card = this.shadowRoot!.querySelector("ha-card"); + // If we show an error or warning there is no ha-card + if (!card) { + return; + } + + if (card.offsetWidth < 375) { this.setAttribute("narrow", ""); } else { this.removeAttribute("narrow"); } - if (this.offsetWidth < 300) { + if (card.offsetWidth < 300) { this.setAttribute("verynarrow", ""); } else { this.removeAttribute("verynarrow"); } - this._veryVeryNarrow = this.offsetWidth < 245; + this._veryVeryNarrow = card.offsetWidth < 245; } static get styles(): CSSResult[] { return [ weatherSVGStyles, css` - :host { - display: block; - } - ha-card { cursor: pointer; - padding: 16px; outline: none; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + padding: 16px; + box-sizing: border-box; } .content { diff --git a/src/panels/lovelace/common/generate-lovelace-config.ts b/src/panels/lovelace/common/generate-lovelace-config.ts index e594bedcd6..63c9830134 100644 --- a/src/panels/lovelace/common/generate-lovelace-config.ts +++ b/src/panels/lovelace/common/generate-lovelace-config.ts @@ -173,7 +173,7 @@ export const computeCards = ( const cardConfig = { type: "weather-forecast", entity: entityId, - show_forecast: false + show_forecast: false, }; cards.push(cardConfig); } else if ( diff --git a/src/panels/lovelace/header-footer/hui-buttons-header-footer.ts b/src/panels/lovelace/header-footer/hui-buttons-header-footer.ts index 80007fbfc2..4b734da662 100644 --- a/src/panels/lovelace/header-footer/hui-buttons-header-footer.ts +++ b/src/panels/lovelace/header-footer/hui-buttons-header-footer.ts @@ -1,10 +1,10 @@ import { customElement, html, + internalProperty, LitElement, property, TemplateResult, - internalProperty, } from "lit-element"; import { HomeAssistant } from "../../../types"; import { processConfigEntities } from "../common/process-config-entities"; @@ -25,7 +25,7 @@ export class HuiButtonsHeaderFooter extends LitElement @internalProperty() private _configEntities?: EntityConfig[]; public getCardSize(): number { - return 1; + return 3; } public setConfig(config: ButtonsHeaderFooterConfig): void { diff --git a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts index 1bcc14afc2..30fda681c4 100644 --- a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts +++ b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts @@ -1,16 +1,16 @@ -import "../../../components/ha-circular-progress"; import { HassEntity } from "home-assistant-js-websocket"; import { css, CSSResult, customElement, html, + internalProperty, LitElement, property, - internalProperty, PropertyValues, TemplateResult, } from "lit-element"; +import "../../../components/ha-circular-progress"; import { fetchRecent } from "../../../data/history"; import { HomeAssistant } from "../../../types"; import { coordinates } from "../common/graph/coordinates"; @@ -42,7 +42,7 @@ export class HuiGraphHeaderFooter extends LitElement private _fetching = false; public getCardSize(): number { - return 2; + return 3; } public setConfig(config: GraphHeaderFooterConfig): void { diff --git a/src/util/bytes-to-string.ts b/src/util/bytes-to-string.ts index 72829b15da..5f59397bb8 100644 --- a/src/util/bytes-to-string.ts +++ b/src/util/bytes-to-string.ts @@ -1,10 +1,10 @@ export const bytesToString = (value = 0, decimals = 2): string => { - if (value === 0) { - return '0 Bytes'; - } - const k = 1024; - decimals = decimals < 0 ? 0 : decimals; - const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; - const i = Math.floor(Math.log(value) / Math.log(k)); - return `${parseFloat((value / k ** i).toFixed(decimals))} ${sizes[i]}`; -} + if (value === 0) { + return "0 Bytes"; + } + const k = 1024; + decimals = decimals < 0 ? 0 : decimals; + const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]; + const i = Math.floor(Math.log(value) / Math.log(k)); + return `${parseFloat((value / k ** i).toFixed(decimals))} ${sizes[i]}`; +};