jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-18 23:06:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Avoid gaps in grid card with conditional (#9507)

Browse Source 
* Avoid gaps in grid card with conditional. Fix #9433

* Rename hidden parameter

* Restore devcontainer.json

* Fix accidental change

* Update src/panels/lovelace/cards/hui-grid-card.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Prettier

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Thomas Lovén 2021-07-26 14:43:14 +02:00 committed by GitHub
parent a339de89f5
commit faca62b55f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/panels/lovelace/cards/hui-grid-card.ts
View File

@ -87,10 +87,18 @@ class HuiGridCard extends HuiStackCard<GridCardConfig> {
grid-column: 1 / 1; grid-column: 1 / 1;
} }
:host([square]) #root > *:first-child { :host([square]) #root > *:not([hidden]) {
grid-row: 1 / 1; grid-row: 1 / 1;
grid-column: 1 / 1; grid-column: 1 / 1;
} }
:host([square]) #root > *:not([hidden]) ~ *:not([hidden]) {
/*
* Remove grid-row and grid-column from every element that comes after
* the first not-hidden element
*/
grid-row: unset;
grid-column: unset;
}
`, `,
]; ];
} }

3
src/panels/lovelace/components/hui-conditional-base.ts
View File

@ -17,6 +17,8 @@ export class HuiConditionalBase extends ReactiveElement {
@property() protected _config?: ConditionalCardConfig | ConditionalRowConfig; @property() protected _config?: ConditionalCardConfig | ConditionalRowConfig;
@property({ type: Boolean, reflect: true }) public hidden = false;
protected _element?: LovelaceCard | LovelaceRow; protected _element?: LovelaceCard | LovelaceRow;
protected createRenderRoot() { protected createRenderRoot() {
@ -55,6 +57,7 @@ export class HuiConditionalBase extends ReactiveElement {
const visible = const visible =
this.editMode || checkConditionsMet(this._config.conditions, this.hass); this.editMode || checkConditionsMet(this._config.conditions, this.hass);
this.hidden = !visible;
this.style.setProperty("display", visible ? "" : "none"); this.style.setProperty("display", visible ? "" : "none");