jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make weather-forecast card more responsive (#24900)

Browse Source 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Cretezy 2025-05-26 09:26:32 -04:00 committed by GitHub
parent bb5f01ac81
commit 3ce639946c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 76 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/panels/lovelace/cards/hui-weather-forecast-card.ts
View File

@ -3,6 +3,7 @@ import type { CSSResultGroup, PropertyValues } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import { classMap } from "lit/directives/class-map";
import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
import { formatTime } from "../../../common/datetime/format_time";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
@ -74,17 +75,26 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
private _sizeController = new ResizeController(this, {
callback: (entries) => {
const result = {
width: "regular",
height: "tall",
};
const width = entries[0]?.contentRect.width;
if (width < 245) {
return "very-very-narrow";
result.height = "very-very-narrow";
} else if (width < 300) {
result.width = "very-narrow";
} else if (width < 375) {
result.width = "narrow";
}
if (width < 300) {
return "very-narrow";
const height = entries[0]?.contentRect.height;
if (height < 235) {
result.height = "short";
}
if (width < 375) {
return "narrow";
}
return "regular";
return result;
},
});
@ -233,11 +243,11 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
);
let itemsToShow = this._config?.forecast_slots ?? 5;
if (this._sizeController.value === "very-very-narrow") {
if (this._sizeController.value.width === "very-very-narrow") {
itemsToShow = Math.min(3, itemsToShow);
} else if (this._sizeController.value === "very-narrow") {
} else if (this._sizeController.value.width === "very-narrow") {
itemsToShow = Math.min(5, itemsToShow);
} else if (this._sizeController.value === "narrow") {
} else if (this._sizeController.value.width === "narrow") {
itemsToShow = Math.min(7, itemsToShow);
}
@ -255,7 +265,10 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
return html`
<ha-card
class=${ifDefined(this._sizeController.value)}
class=${classMap({
[this._sizeController.value.height]: true,
[this._sizeController.value.width]: true,
})}
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: hasAction(this._config!.hold_action),
@ -489,7 +502,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
}
.content + .forecast {
padding-top: 8px;
padding-top: 16px;
}
.icon-image {
@ -585,8 +598,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
}
.forecast-image-icon {
padding-top: 4px;
padding-bottom: 4px;
padding-top: 6px;
padding-bottom: 6px;
display: flex;
justify-content: center;
}
@ -684,11 +697,60 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
flex-direction: column;
}
[class*="very-very-narrow"] .icon-image {
min-width: 48px;
}
[class*="very-very-narrow"] .icon-image > * {
flex: 0 0 48px;
height: 48px;
}
[class*="very-very-narrow"] .content + .forecast {
padding-top: 8px;
}
[class*="very-very-narrow"] .icon-image {
margin-right: 0;
margin-inline-end: 0;
margin-inline-start: initial;
}
/* ============= SHORT ============= */
.short .state,
.short .temp-attribute .temp {
font-size: 24px;
line-height: 1.25;
}
.short .content + .forecast {
padding-top: 12px;
}
.short .icon-image {
min-width: 48px;
}
.short .icon-image > * {
flex: 0 0 48px;
height: 48px;
}
.short .forecast-image-icon {
padding-top: 4px;
padding-bottom: 4px;
}
.short .forecast-image-icon > * {
width: 32px;
height: 32px;
--mdc-icon-size: 32px;
}
.short .forecast-icon {
--mdc-icon-size: 32px;
}
`,
];
}