mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 18:26:35 +00:00
Fix area card background and improve grid support (#21259)
This commit is contained in:
parent
19ee150395
commit
81c796beb4
@ -412,19 +412,19 @@ export class HuiAreaCard
|
|||||||
if (this._config.show_camera && "camera" in entitiesByDomain) {
|
if (this._config.show_camera && "camera" in entitiesByDomain) {
|
||||||
cameraEntityId = entitiesByDomain.camera[0].entity_id;
|
cameraEntityId = entitiesByDomain.camera[0].entity_id;
|
||||||
}
|
}
|
||||||
cameraEntityId = "camera.demo_camera";
|
|
||||||
|
|
||||||
const imageClass = area.picture || cameraEntityId;
|
const imageClass = area.picture || cameraEntityId;
|
||||||
|
|
||||||
const ignoreAspectRatio = imageClass || this.layout === "grid";
|
const ignoreAspectRatio = this.layout === "grid";
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<ha-card
|
<ha-card
|
||||||
class=${imageClass ? "image" : ""}
|
class=${imageClass ? "image" : ""}
|
||||||
style=${styleMap({
|
style=${styleMap({
|
||||||
paddingBottom: ignoreAspectRatio
|
paddingBottom:
|
||||||
? "0"
|
ignoreAspectRatio || imageClass
|
||||||
: `${((100 * this._ratio!.h) / this._ratio!.w).toFixed(2)}%`,
|
? "0"
|
||||||
|
: `${((100 * this._ratio!.h) / this._ratio!.w).toFixed(2)}%`,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
${area.picture || cameraEntityId
|
${area.picture || cameraEntityId
|
||||||
@ -435,8 +435,10 @@ export class HuiAreaCard
|
|||||||
.image=${area.picture ? area.picture : undefined}
|
.image=${area.picture ? area.picture : undefined}
|
||||||
.cameraImage=${cameraEntityId}
|
.cameraImage=${cameraEntityId}
|
||||||
.cameraView=${this._config.camera_view}
|
.cameraView=${this._config.camera_view}
|
||||||
.aspectRatio=${this._config.aspect_ratio ||
|
.aspectRatio=${ignoreAspectRatio
|
||||||
DEFAULT_ASPECT_RATIO}
|
? undefined
|
||||||
|
: this._config.aspect_ratio || DEFAULT_ASPECT_RATIO}
|
||||||
|
fitMode="cover"
|
||||||
></hui-image>
|
></hui-image>
|
||||||
`
|
`
|
||||||
: area.icon
|
: area.icon
|
||||||
@ -586,6 +588,10 @@ export class HuiAreaCard
|
|||||||
opacity: 0.12;
|
opacity: 0.12;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.image hui-image {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.icon-container {
|
.icon-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user