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

Changing Clance Column width default to fill card

Browse Source
This commit is contained in:
Zack Arnett 2018-10-16 16:20:28 -04:00
parent a6b4cce7f3
commit 698beedaa2
1 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/panels/lovelace/cards/hui-glance-card.ts
View File

@ -62,9 +62,11 @@ class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
} }
} }
const columnWidth = config.entities.length > 4 ? "20%" : `${100 / config.entities.length}%`
this.style.setProperty( this.style.setProperty(
"--glance-column-width", "--glance-column-width",
config.column_width || "20%" config.column_width || columnWidth
); );
if (config.theming) { if (config.theming) {
@ -96,10 +98,10 @@ class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
<ha-card .header="${title}"> <ha-card .header="${title}">
<div class="entities ${classMap({ "no-header": !title })}"> <div class="entities ${classMap({ "no-header": !title })}">
${repeat<EntityConfig>( ${repeat<EntityConfig>(
entities, entities,
(entityConf) => entityConf.entity, (entityConf) => entityConf.entity,
(entityConf) => this.renderEntity(entityConf) (entityConf) => this.renderEntity(entityConf)
)} )}
</div> </div>
</ha-card> </ha-card>
`; `;
@ -158,23 +160,23 @@ class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
@click="${this.handleClick}" @click="${this.handleClick}"
> >
${ ${
this.config!.show_name !== false this.config!.show_name !== false
? html`<div class="name">${ ? html`<div class="name">${
"name" in entityConf "name" in entityConf
? entityConf.name ? entityConf.name
: computeStateName(stateObj) : computeStateName(stateObj)
}</div>` }</div>`
: "" : ""
} }
<state-badge <state-badge
.stateObj="${stateObj}" .stateObj="${stateObj}"
.overrideIcon="${entityConf.icon}" .overrideIcon="${entityConf.icon}"
></state-badge> ></state-badge>
${ ${
this.config!.show_state !== false this.config!.show_state !== false
? html`<div>${computeStateDisplay(this.localize, stateObj)}</div>` ? html`<div>${computeStateDisplay(this.localize, stateObj)}</div>`
: "" : ""
} }
</div> </div>
`; `;
} }