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

ha-card migration. Step #0: improvements to ha-card. (#3144)

Browse Source 
* Improvements to ha-card. Better paper-card compatibility

* Remove named slots

* Tweak distance between header and contents

* Further css tweaking
This commit is contained in:
Thomas Lovén 2019-05-07 18:24:39 +02:00 committed by Paulus Schoutsen
parent db65af9c22
commit 1223766523
2 changed files with 39 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/ha-card.ts
View File

@ -27,9 +27,11 @@ class HaCard extends LitElement {
color: var(--primary-text-color); color: var(--primary-text-color);
display: block; display: block;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
position: relative;
} }
.header:not(:empty),
.header::slotted(*) { .card-header,
:host ::slotted(.card-header) {
color: var(--ha-card-header-color, --primary-text-color); color: var(--ha-card-header-color, --primary-text-color);
font-family: var(--ha-card-header-font-family, inherit); font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px); font-size: var(--ha-card-header-font-size, 24px);
@ -38,12 +40,31 @@ class HaCard extends LitElement {
padding: 24px 16px 16px; padding: 24px 16px 16px;
display: block; display: block;
} }
:host ::slotted(.card-content:not(:first-child)),
slot:not(:first-child)::slotted(.card-content) {
padding-top: 0px;
margin-top: -8px;
}
:host ::slotted(.card-content) {
padding: 16px;
}
:host ::slotted(.card-actions) {
border-top: 1px solid #e8e8e8;
padding: 5px 16px;
}
`; `;
} }
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<slot class="header" name="header">${this.header}</slot> ${this.header
? html`
<div class="card-header">${this.header}</div>
`
: html``}
<slot></slot> <slot></slot>
`; `;
} }

32
src/panels/lovelace/cards/hui-entities-card.ts
View File

@ -89,7 +89,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
${!title && !show_header_toggle ${!title && !show_header_toggle
? html`` ? html``
: html` : html`
<div class="header" slot="header"> <div class="card-header">
<div class="name">${title}</div> <div class="name">${title}</div>
${show_header_toggle === false ${show_header_toggle === false
? html`` ? html``
@ -103,7 +103,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
`} `}
</div> </div>
`} `}
<div id="states"> <div id="states" class="card-content">
${this._configEntities!.map((entityConf) => ${this._configEntities!.map((entityConf) =>
this.renderEntity(entityConf) this.renderEntity(entityConf)
)} )}
@ -114,8 +114,19 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult { static get styles(): CSSResult {
return css` return css`
#states { .card-header {
padding: 12px 16px; display: flex;
justify-content: space-between;
}
.card-header .name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.card-header hui-entities-toggle {
margin: -4px 0;
} }
#states > * { #states > * {
@ -126,19 +137,6 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
overflow: hidden; overflow: hidden;
} }
.header {
margin-bottom: -8px;
padding-bottom: 0px;
display: flex;
justify-content: space-between;
}
.header .name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.state-card-dialog { .state-card-dialog {
cursor: pointer; cursor: pointer;
} }