mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-20 07:46:37 +00:00
Lovelace Cards: Update size calcs and add height fixes for horizontal stacks (#7177)
This commit is contained in:
parent
47f0d74812
commit
c1dba462e8
@ -78,14 +78,14 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
|
||||
|
||||
public async getCardSize(): Promise<number> {
|
||||
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);
|
||||
|
@ -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)
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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);
|
||||
|
@ -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%;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -25,6 +25,7 @@ class HuiHorizontalStackCard extends HuiStackCard {
|
||||
css`
|
||||
#root {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
#root > * {
|
||||
flex: 1 1 0;
|
||||
|
@ -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 {
|
||||
|
@ -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("%", ""))
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -761,6 +761,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
|
||||
return css`
|
||||
ha-card {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.background {
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@ -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 {
|
||||
</div>
|
||||
`;
|
||||
} 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) {
|
||||
footer = html` <div class="footer state">${state}</div> `;
|
||||
footer = html`<div class="footer state">${state}</div>`;
|
||||
}
|
||||
|
||||
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 {
|
||||
|
@ -266,7 +266,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
|
||||
`}
|
||||
></ha-icon-button>
|
||||
${this._config!.show_state !== true && entityConf.show_state !== true
|
||||
? html` <div class="state"></div> `
|
||||
? html`<div class="state"></div>`
|
||||
: html`
|
||||
<div class="state">
|
||||
${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 {
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -26,6 +26,7 @@ class HuiVerticalStackCard extends HuiStackCard {
|
||||
#root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
#root > * {
|
||||
margin: 4px 0 4px 0;
|
||||
|
@ -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 {
|
||||
|
@ -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 (
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -1,10 +1,10 @@
|
||||
export const bytesToString = (value = 0, decimals = 2): string => {
|
||||
if (value === 0) {
|
||||
return '0 Bytes';
|
||||
return "0 Bytes";
|
||||
}
|
||||
const k = 1024;
|
||||
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));
|
||||
return `${parseFloat((value / k ** i).toFixed(decimals))} ${sizes[i]}`;
|
||||
}
|
||||
};
|
||||
|
Loading…
x
Reference in New Issue
Block a user