Lovelace Cards: Update size calcs and add height fixes for horizontal stacks (#7177)

This commit is contained in:
Zack Barett 2020-10-15 10:46:29 -05:00 committed by GitHub
parent 47f0d74812
commit c1dba462e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 112 additions and 81 deletions

View File

@ -78,14 +78,14 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
public async getCardSize(): Promise<number> { public async getCardSize(): Promise<number> {
if (!this._config || !this.hass) { if (!this._config || !this.hass) {
return 5; return 9;
} }
const stateObj = this.hass.states[this._config.entity]; const stateObj = this.hass.states[this._config.entity];
return !stateObj || stateObj.attributes.code_format !== FORMAT_NUMBER return !stateObj || stateObj.attributes.code_format !== FORMAT_NUMBER
? 3 ? 4
: 8; : 9;
} }
public setConfig(config: AlarmPanelCardConfig): void { public setConfig(config: AlarmPanelCardConfig): void {
@ -270,6 +270,8 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
ha-card { ha-card {
padding-bottom: 16px; padding-bottom: 16px;
position: relative; position: relative;
height: 100%;
box-sizing: border-box;
--alarm-color-disarmed: var(--label-badge-green); --alarm-color-disarmed: var(--label-badge-green);
--alarm-color-pending: var(--label-badge-yellow); --alarm-color-pending: var(--label-badge-yellow);
--alarm-color-triggered: var(--label-badge-red); --alarm-color-triggered: var(--label-badge-red);

View File

@ -80,7 +80,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
public getCardSize(): number { public getCardSize(): number {
return ( 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)
); );
} }

View File

@ -101,7 +101,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
} }
public getCardSize(): number { public getCardSize(): number {
return 4; return this._config?.header ? 1 : 0 + 11;
} }
public connectedCallback(): void { public connectedCallback(): void {
@ -208,6 +208,8 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
ha-card { ha-card {
position: relative; position: relative;
padding: 0 8px 8px; padding: 0 8px 8px;
box-sizing: border-box;
height: 100%;
} }
.header { .header {

View File

@ -96,7 +96,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
} }
// +1 for the header // +1 for the header
let size = let size =
(this._config.title || this._showHeaderToggle ? 1 : 0) + (this._config.title || this._showHeaderToggle ? 2 : 0) +
(this._config.entities.length || 1); (this._config.entities.length || 1);
if (this._headerElement) { if (this._headerElement) {
const headerSize = computeCardSize(this._headerElement); const headerSize = computeCardSize(this._headerElement);

View File

@ -4,26 +4,25 @@ import {
CSSResult, CSSResult,
customElement, customElement,
html, html,
internalProperty,
LitElement, LitElement,
property, property,
internalProperty,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit-element"; } from "lit-element";
import { styleMap } from "lit-html/directives/style-map";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import { computeStateName } from "../../../common/entity/compute_state_name"; import { computeStateName } from "../../../common/entity/compute_state_name";
import { isValidEntityId } from "../../../common/entity/valid_entity_id"; import { isValidEntityId } from "../../../common/entity/valid_entity_id";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/ha-gauge";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import { findEntities } from "../common/find-entites"; import { findEntities } from "../common/find-entites";
import { hasConfigOrEntityChanged } from "../common/has-changed"; import { hasConfigOrEntityChanged } from "../common/has-changed";
import { createEntityNotFoundWarning } from "../components/hui-warning"; import { createEntityNotFoundWarning } from "../components/hui-warning";
import type { LovelaceCard, LovelaceCardEditor } from "../types"; import type { LovelaceCard, LovelaceCardEditor } from "../types";
import type { GaugeCardConfig } from "./types"; import type { GaugeCardConfig } from "./types";
import "../../../components/ha-gauge";
import { styleMap } from "lit-html/directives/style-map";
export const severityMap = { export const severityMap = {
red: "var(--label-badge-red)", red: "var(--label-badge-red)",
@ -69,7 +68,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
@internalProperty() private _config?: GaugeCardConfig; @internalProperty() private _config?: GaugeCardConfig;
public getCardSize(): number { public getCardSize(): number {
return 2; return 4;
} }
public setConfig(config: GaugeCardConfig): void { public setConfig(config: GaugeCardConfig): void {
@ -195,10 +194,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult { static get styles(): CSSResult {
return css` return css`
:host {
display: block;
}
ha-card { ha-card {
cursor: pointer; cursor: pointer;
height: 100%; height: 100%;

View File

@ -73,13 +73,14 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
public getCardSize(): number { public getCardSize(): number {
const rowHeight = const rowHeight =
(this._config!.show_icon ? 1 : 0) + (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( const numRows = Math.ceil(
this._configEntities!.length / (this._config!.columns || 5) 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 { public setConfig(config: GlanceCardConfig): void {
@ -189,10 +190,16 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult { static get styles(): CSSResult {
return css` return css`
ha-card {
height: 100%;
}
.entities { .entities {
display: flex; display: flex;
padding: 0 16px 4px; padding: 0 16px 4px;
flex-wrap: wrap; flex-wrap: wrap;
height: 100%;
box-sizing: border-box;
align-content: center;
} }
.entities.no-header { .entities.no-header {
padding-top: 16px; padding-top: 16px;

View File

@ -3,25 +3,25 @@ import {
CSSResult, CSSResult,
customElement, customElement,
html, html,
internalProperty,
LitElement, LitElement,
property, property,
internalProperty,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit-element"; } from "lit-element";
import { classMap } from "lit-html/directives/class-map"; import { classMap } from "lit-html/directives/class-map";
import { throttle } from "../../../common/util/throttle";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/state-history-charts"; import "../../../components/state-history-charts";
import { CacheConfig, getRecentWithCache } from "../../../data/cached-history"; import { CacheConfig, getRecentWithCache } from "../../../data/cached-history";
import { HistoryResult } from "../../../data/history";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { findEntities } from "../common/find-entites"; import { findEntities } from "../common/find-entites";
import { hasConfigOrEntitiesChanged } from "../common/has-changed";
import { processConfigEntities } from "../common/process-config-entities"; import { processConfigEntities } from "../common/process-config-entities";
import { EntityConfig } from "../entity-rows/types"; import { EntityConfig } from "../entity-rows/types";
import { LovelaceCard } from "../types"; import { LovelaceCard } from "../types";
import { HistoryGraphCardConfig } 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") @customElement("hui-history-graph-card")
export class HuiHistoryGraphCard extends LitElement implements LovelaceCard { export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
@ -67,7 +67,9 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
private _throttleGetStateHistory?: () => void; private _throttleGetStateHistory?: () => void;
public getCardSize(): number { public getCardSize(): number {
return 4; return this._config?.title
? 2
: 0 + 2 * (this._configEntities?.length || 1);
} }
public setConfig(config: HistoryGraphCardConfig): void { public setConfig(config: HistoryGraphCardConfig): void {
@ -185,6 +187,10 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult { static get styles(): CSSResult {
return css` return css`
ha-card {
height: 100%;
overflow-y: auto;
}
.content { .content {
padding: 16px; padding: 16px;
} }

View File

@ -25,6 +25,7 @@ class HuiHorizontalStackCard extends HuiStackCard {
css` css`
#root { #root {
display: flex; display: flex;
height: 100%;
} }
#root > * { #root > * {
flex: 1 1 0; flex: 1 1 0;

View File

@ -1,4 +1,3 @@
import "../../../components/ha-icon-button";
import "@thomasloven/round-slider"; import "@thomasloven/round-slider";
import { HassEntity } from "home-assistant-js-websocket"; import { HassEntity } from "home-assistant-js-websocket";
import { import {
@ -6,9 +5,9 @@ import {
CSSResult, CSSResult,
customElement, customElement,
html, html,
internalProperty,
LitElement, LitElement,
property, property,
internalProperty,
PropertyValues, PropertyValues,
svg, svg,
TemplateResult, TemplateResult,
@ -18,8 +17,9 @@ import { fireEvent } from "../../../common/dom/fire_event";
import { computeStateName } from "../../../common/entity/compute_state_name"; import { computeStateName } from "../../../common/entity/compute_state_name";
import { computeRTLDirection } from "../../../common/util/compute_rtl"; import { computeRTLDirection } from "../../../common/util/compute_rtl";
import "../../../components/ha-card"; import "../../../components/ha-card";
import { HumidifierEntity } from "../../../data/humidifier"; import "../../../components/ha-icon-button";
import { UNAVAILABLE_STATES } from "../../../data/entity"; import { UNAVAILABLE_STATES } from "../../../data/entity";
import { HumidifierEntity } from "../../../data/humidifier";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { findEntities } from "../common/find-entites"; import { findEntities } from "../common/find-entites";
import { hasConfigOrEntityChanged } from "../common/has-changed"; import { hasConfigOrEntityChanged } from "../common/has-changed";
@ -61,7 +61,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
@internalProperty() private _setHum?: number; @internalProperty() private _setHum?: number;
public getCardSize(): number { public getCardSize(): number {
return 5; return 6;
} }
public setConfig(config: HumidifierCardConfig): void { public setConfig(config: HumidifierCardConfig): void {

View File

@ -40,7 +40,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
public getCardSize(): number { public getCardSize(): number {
if (!this._config) { if (!this._config) {
return 3; return 5;
} }
const aspectRatio = this._config.aspect_ratio const aspectRatio = this._config.aspect_ratio
? Number(this._config.aspect_ratio.replace("%", "")) ? Number(this._config.aspect_ratio.replace("%", ""))

View File

@ -68,7 +68,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
private _brightnessTimout?: number; private _brightnessTimout?: number;
public getCardSize(): number { public getCardSize(): number {
return 4; return 5;
} }
public setConfig(config: LightCardConfig): void { public setConfig(config: LightCardConfig): void {
@ -267,10 +267,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult { static get styles(): CSSResult {
return css` return css`
:host {
display: block;
}
ha-card { ha-card {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;

View File

@ -1,4 +1,3 @@
import "../../../components/ha-icon-button";
import { HassEntity } from "home-assistant-js-websocket"; import { HassEntity } from "home-assistant-js-websocket";
import { import {
Circle, Circle,
@ -23,24 +22,25 @@ import {
import { classMap } from "lit-html/directives/class-map"; import { classMap } from "lit-html/directives/class-map";
import { import {
LeafletModuleType, LeafletModuleType,
setupLeafletMap,
replaceTileLayer, replaceTileLayer,
setupLeafletMap,
} from "../../../common/dom/setup-leaflet-map"; } from "../../../common/dom/setup-leaflet-map";
import { computeDomain } from "../../../common/entity/compute_domain"; import { computeDomain } from "../../../common/entity/compute_domain";
import { computeStateDomain } from "../../../common/entity/compute_state_domain"; import { computeStateDomain } from "../../../common/entity/compute_state_domain";
import { computeStateName } from "../../../common/entity/compute_state_name"; import { computeStateName } from "../../../common/entity/compute_state_name";
import { debounce } from "../../../common/util/debounce"; import { debounce } from "../../../common/util/debounce";
import parseAspectRatio from "../../../common/util/parse-aspect-ratio"; import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
import "../../../components/ha-card";
import "../../../components/ha-icon-button";
import { fetchRecent } from "../../../data/history"; import { fetchRecent } from "../../../data/history";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import "../../map/ha-entity-marker"; import "../../map/ha-entity-marker";
import { findEntities } from "../common/find-entites"; import { findEntities } from "../common/find-entites";
import { installResizeObserver } from "../common/install-resize-observer";
import { processConfigEntities } from "../common/process-config-entities"; import { processConfigEntities } from "../common/process-config-entities";
import { EntityConfig } from "../entity-rows/types"; import { EntityConfig } from "../entity-rows/types";
import { LovelaceCard } from "../types"; import { LovelaceCard } from "../types";
import "../../../components/ha-card";
import { MapCardConfig } from "./types"; import { MapCardConfig } from "./types";
import { installResizeObserver } from "../common/install-resize-observer";
@customElement("hui-map-card") @customElement("hui-map-card")
class HuiMapCard extends LitElement implements LovelaceCard { class HuiMapCard extends LitElement implements LovelaceCard {
@ -162,7 +162,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
public getCardSize(): number { public getCardSize(): number {
if (!this._config?.aspect_ratio) { if (!this._config?.aspect_ratio) {
return 5; return 7;
} }
const ratio = parseAspectRatio(this._config.aspect_ratio); const ratio = parseAspectRatio(this._config.aspect_ratio);
@ -660,17 +660,14 @@ class HuiMapCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult { static get styles(): CSSResult {
return css` return css`
:host([ispanel]) ha-card {
width: 100%;
height: 100%;
}
:host([ispanel][editMode]) ha-card { :host([ispanel][editMode]) ha-card {
height: calc(100% - 51px); height: calc(100% - 51px);
} }
ha-card { ha-card {
overflow: hidden; overflow: hidden;
width: 100%;
height: 100%;
} }
#map { #map {

View File

@ -4,9 +4,9 @@ import {
CSSResult, CSSResult,
customElement, customElement,
html, html,
internalProperty,
LitElement, LitElement,
property, property,
internalProperty,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit-element"; } from "lit-element";
@ -15,8 +15,8 @@ import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_elemen
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/ha-markdown"; import "../../../components/ha-markdown";
import { import {
subscribeRenderTemplate,
RenderTemplateResult, RenderTemplateResult,
subscribeRenderTemplate,
} from "../../../data/ws-templates"; } from "../../../data/ws-templates";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import type { LovelaceCard, LovelaceCardEditor } from "../types"; import type { LovelaceCard, LovelaceCardEditor } from "../types";
@ -170,6 +170,9 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult { static get styles(): CSSResult {
return css` return css`
ha-card {
height: 100%;
}
ha-markdown { ha-markdown {
padding: 0 16px 16px; padding: 0 16px 16px;
} }

View File

@ -761,6 +761,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
return css` return css`
ha-card { ha-card {
overflow: hidden; overflow: hidden;
height: 100%;
} }
.background { .background {

View File

@ -43,7 +43,7 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
@property() protected _config?: PictureCardConfig; @property() protected _config?: PictureCardConfig;
public getCardSize(): number { public getCardSize(): number {
return 3; return 5;
} }
public setConfig(config: PictureCardConfig): void { public setConfig(config: PictureCardConfig): void {
@ -113,6 +113,7 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
return css` return css`
ha-card { ha-card {
overflow: hidden; overflow: hidden;
height: 100%;
} }
ha-card.clickable { ha-card.clickable {

View File

@ -3,9 +3,9 @@ import {
CSSResult, CSSResult,
customElement, customElement,
html, html,
internalProperty,
LitElement, LitElement,
property, property,
internalProperty,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit-element"; } from "lit-element";
@ -149,6 +149,8 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
ha-card { ha-card {
overflow: hidden; overflow: hidden;
height: 100%;
box-sizing: border-box;
} }
`; `;
} }

View File

@ -3,9 +3,9 @@ import {
CSSResult, CSSResult,
customElement, customElement,
html, html,
internalProperty,
LitElement, LitElement,
property, property,
internalProperty,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit-element"; } from "lit-element";
@ -139,9 +139,9 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
</div> </div>
`; `;
} else if (this._config.show_name) { } else if (this._config.show_name) {
footer = html` <div class="footer">${name}</div> `; footer = html`<div class="footer">${name}</div>`;
} else if (this._config.show_state) { } else if (this._config.show_state) {
footer = html` <div class="footer state">${state}</div> `; footer = html`<div class="footer state">${state}</div>`;
} }
return html` return html`
@ -182,6 +182,8 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
min-height: 75px; min-height: 75px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
height: 100%;
box-sizing: border-box;
} }
hui-image.clickable { hui-image.clickable {

View File

@ -266,7 +266,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
`} `}
></ha-icon-button> ></ha-icon-button>
${this._config!.show_state !== true && entityConf.show_state !== true ${this._config!.show_state !== true && entityConf.show_state !== true
? html` <div class="state"></div> ` ? html`<div class="state"></div>`
: html` : html`
<div class="state"> <div class="state">
${entityConf.attribute ${entityConf.attribute
@ -297,6 +297,8 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
position: relative; position: relative;
min-height: 48px; min-height: 48px;
overflow: hidden; overflow: hidden;
height: 100%;
box-sizing: border-box;
} }
hui-image.clickable { hui-image.clickable {

View File

@ -4,9 +4,9 @@ import {
CSSResult, CSSResult,
customElement, customElement,
html, html,
internalProperty,
LitElement, LitElement,
property, property,
internalProperty,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit-element"; } from "lit-element";
@ -19,9 +19,9 @@ import { HomeAssistant } from "../../../types";
import { actionHandler } from "../common/directives/action-handler-directive"; import { actionHandler } from "../common/directives/action-handler-directive";
import { findEntities } from "../common/find-entites"; import { findEntities } from "../common/find-entites";
import { hasConfigOrEntityChanged } from "../common/has-changed"; import { hasConfigOrEntityChanged } from "../common/has-changed";
import { createEntityNotFoundWarning } from "../components/hui-warning";
import { LovelaceCard, LovelaceCardEditor } from "../types"; import { LovelaceCard, LovelaceCardEditor } from "../types";
import { PlantAttributeTarget, PlantStatusCardConfig } from "./types"; import { PlantAttributeTarget, PlantStatusCardConfig } from "./types";
import { createEntityNotFoundWarning } from "../components/hui-warning";
const SENSORS = { const SENSORS = {
moisture: "hass:water", moisture: "hass:water",
@ -163,6 +163,10 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult { static get styles(): CSSResult {
return css` return css`
ha-card {
height: 100%;
box-sizing: border-box;
}
.banner { .banner {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;

View File

@ -1,13 +1,14 @@
import "@polymer/paper-checkbox/paper-checkbox"; import "@polymer/paper-checkbox/paper-checkbox";
import { PaperInputElement } from "@polymer/paper-input/paper-input"; import { PaperInputElement } from "@polymer/paper-input/paper-input";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { import {
css, css,
CSSResult, CSSResult,
customElement, customElement,
html, html,
internalProperty,
LitElement, LitElement,
property, property,
internalProperty,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit-element"; } from "lit-element";
@ -23,11 +24,10 @@ import {
ShoppingListItem, ShoppingListItem,
updateItem, updateItem,
} from "../../../data/shopping-list"; } from "../../../data/shopping-list";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { LovelaceCard, LovelaceCardEditor } from "../types"; import { LovelaceCard, LovelaceCardEditor } from "../types";
import { SensorCardConfig, ShoppingListCardConfig } 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") @customElement("hui-shopping-list-card")
class HuiShoppingListCard extends SubscribeMixin(LitElement) class HuiShoppingListCard extends SubscribeMixin(LitElement)
@ -52,7 +52,7 @@ class HuiShoppingListCard extends SubscribeMixin(LitElement)
@internalProperty() private _checkedItems?: ShoppingListItem[]; @internalProperty() private _checkedItems?: ShoppingListItem[];
public getCardSize(): number { 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 { public setConfig(config: ShoppingListCardConfig): void {
@ -254,6 +254,8 @@ class HuiShoppingListCard extends SubscribeMixin(LitElement)
return css` return css`
ha-card { ha-card {
padding: 16px; padding: 16px;
height: 100%;
box-sizing: border-box;
} }
.has-header { .has-header {

View File

@ -82,7 +82,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
@query("ha-card") private _card?: HaCard; @query("ha-card") private _card?: HaCard;
public getCardSize(): number { public getCardSize(): number {
return 5; return 7;
} }
public setConfig(config: ThermostatCardConfig): void { public setConfig(config: ThermostatCardConfig): void {

View File

@ -26,6 +26,7 @@ class HuiVerticalStackCard extends HuiStackCard {
#root { #root {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%;
} }
#root > * { #root > * {
margin: 4px 0 4px 0; margin: 4px 0 4px 0;

View File

@ -86,7 +86,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
} }
public getCardSize(): number { public getCardSize(): number {
return this._config?.show_forecast !== false ? 4 : 2; return this._config?.show_forecast !== false ? 5 : 2;
} }
public setConfig(config: WeatherForecastCardConfig): void { public setConfig(config: WeatherForecastCardConfig): void {
@ -354,31 +354,38 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
return; 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", ""); this.setAttribute("narrow", "");
} else { } else {
this.removeAttribute("narrow"); this.removeAttribute("narrow");
} }
if (this.offsetWidth < 300) { if (card.offsetWidth < 300) {
this.setAttribute("verynarrow", ""); this.setAttribute("verynarrow", "");
} else { } else {
this.removeAttribute("verynarrow"); this.removeAttribute("verynarrow");
} }
this._veryVeryNarrow = this.offsetWidth < 245; this._veryVeryNarrow = card.offsetWidth < 245;
} }
static get styles(): CSSResult[] { static get styles(): CSSResult[] {
return [ return [
weatherSVGStyles, weatherSVGStyles,
css` css`
:host {
display: block;
}
ha-card { ha-card {
cursor: pointer; cursor: pointer;
padding: 16px;
outline: none; outline: none;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px;
box-sizing: border-box;
} }
.content { .content {

View File

@ -173,7 +173,7 @@ export const computeCards = (
const cardConfig = { const cardConfig = {
type: "weather-forecast", type: "weather-forecast",
entity: entityId, entity: entityId,
show_forecast: false show_forecast: false,
}; };
cards.push(cardConfig); cards.push(cardConfig);
} else if ( } else if (

View File

@ -1,10 +1,10 @@
import { import {
customElement, customElement,
html, html,
internalProperty,
LitElement, LitElement,
property, property,
TemplateResult, TemplateResult,
internalProperty,
} from "lit-element"; } from "lit-element";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { processConfigEntities } from "../common/process-config-entities"; import { processConfigEntities } from "../common/process-config-entities";
@ -25,7 +25,7 @@ export class HuiButtonsHeaderFooter extends LitElement
@internalProperty() private _configEntities?: EntityConfig[]; @internalProperty() private _configEntities?: EntityConfig[];
public getCardSize(): number { public getCardSize(): number {
return 1; return 3;
} }
public setConfig(config: ButtonsHeaderFooterConfig): void { public setConfig(config: ButtonsHeaderFooterConfig): void {

View File

@ -1,16 +1,16 @@
import "../../../components/ha-circular-progress";
import { HassEntity } from "home-assistant-js-websocket"; import { HassEntity } from "home-assistant-js-websocket";
import { import {
css, css,
CSSResult, CSSResult,
customElement, customElement,
html, html,
internalProperty,
LitElement, LitElement,
property, property,
internalProperty,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit-element"; } from "lit-element";
import "../../../components/ha-circular-progress";
import { fetchRecent } from "../../../data/history"; import { fetchRecent } from "../../../data/history";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { coordinates } from "../common/graph/coordinates"; import { coordinates } from "../common/graph/coordinates";
@ -42,7 +42,7 @@ export class HuiGraphHeaderFooter extends LitElement
private _fetching = false; private _fetching = false;
public getCardSize(): number { public getCardSize(): number {
return 2; return 3;
} }
public setConfig(config: GraphHeaderFooterConfig): void { public setConfig(config: GraphHeaderFooterConfig): void {

View File

@ -1,10 +1,10 @@
export const bytesToString = (value = 0, decimals = 2): string => { export const bytesToString = (value = 0, decimals = 2): string => {
if (value === 0) { if (value === 0) {
return '0 Bytes'; return "0 Bytes";
} }
const k = 1024; const k = 1024;
decimals = decimals < 0 ? 0 : decimals; decimals = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
const i = Math.floor(Math.log(value) / Math.log(k)); const i = Math.floor(Math.log(value) / Math.log(k));
return `${parseFloat((value / k ** i).toFixed(decimals))} ${sizes[i]}`; return `${parseFloat((value / k ** i).toFixed(decimals))} ${sizes[i]}`;
} };