jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 11:16:35 +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);
display: block;
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);
font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px);
@ -38,12 +40,31 @@ class HaCard extends LitElement {
padding: 24px 16px 16px;
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 {
return html`
<slot class="header" name="header">${this.header}</slot>
${this.header
? html`
<div class="card-header">${this.header}</div>
`
: html``}
<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
? html``
: html`
<div class="header" slot="header">
<div class="card-header">
<div class="name">${title}</div>
${show_header_toggle === false
? html``
@ -103,7 +103,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
`}
</div>
`}
<div id="states">
<div id="states" class="card-content">
${this._configEntities!.map((entityConf) =>
this.renderEntity(entityConf)
)}
@ -114,8 +114,19 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult {
return css`
#states {
padding: 12px 16px;
.card-header {
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 > * {
@ -126,19 +137,6 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
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 {
cursor: pointer;
}