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

Make <ha-card> use <h1> for header (#7373)

Browse Source 
Co-authored-by: Zack Barett <zackbarett@hey.com>
This commit is contained in:
Philip Allgaier 2020-10-17 23:22:56 +02:00 committed by GitHub
parent 713e0579f8
commit 7e769d0e14
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
cast/src/launcher/layout/hc-layout.ts
View File

@ -30,7 +30,7 @@ class HcLayout extends LitElement {
<ha-card> <ha-card>
<div class="layout"> <div class="layout">
<img class="hero" src="/images/google-nest-hub.png" /> <img class="hero" src="/images/google-nest-hub.png" />
<div class="card-header"> <h1 class="card-header">
Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""} Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""}
${this.auth ${this.auth
? html` ? html`
@ -44,7 +44,7 @@ class HcLayout extends LitElement {
</div> </div>
` `
: ""} : ""}
</div> </h1>
<slot></slot> <slot></slot>
</div> </div>
</ha-card> </ha-card>

2
hassio/src/addon-view/info/hassio-addon-info.ts
View File

@ -178,7 +178,7 @@ class HassioAddonInfo extends LitElement {
${!this.addon.protected ${!this.addon.protected
? html` ? html`
<ha-card class="warning"> <ha-card class="warning">
<div class="card-header">Warning: Protection mode is disabled!</div> <h1 class="card-header">Warning: Protection mode is disabled!</h1>
<div class="card-content"> <div class="card-content">
Protection mode on this add-on is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this add-on. Protection mode on this add-on is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this add-on.
</div> </div>

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

@ -50,9 +50,12 @@ export class HaCard extends LitElement {
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);
letter-spacing: -0.012em; letter-spacing: -0.012em;
line-height: 32px; line-height: 48px;
padding: 24px 16px 16px; padding: 12px 16px 16px;
display: block; display: block;
margin-block-start: 0px;
margin-block-end: 0px;
font-weight: normal;
} }
:host ::slotted(.card-content:not(:first-child)), :host ::slotted(.card-content:not(:first-child)),
@ -75,7 +78,7 @@ export class HaCard extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
${this.header ${this.header
? html` <div class="card-header">${this.header}</div> ` ? html`<h1 class="card-header">${this.header}</h1>`
: html``} : html``}
<slot></slot> <slot></slot>
`; `;

12
src/panels/config/devices/ha-config-device-page.ts
View File

@ -259,7 +259,7 @@ export class HaConfigDevicePage extends LitElement {
isComponentLoaded(this.hass, "automation") isComponentLoaded(this.hass, "automation")
? html` ? html`
<ha-card> <ha-card>
<div class="card-header"> <h1 class="card-header">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.automation.automations" "ui.panel.config.devices.automation.automations"
)} )}
@ -270,7 +270,7 @@ export class HaConfigDevicePage extends LitElement {
)} )}
icon="hass:plus-circle" icon="hass:plus-circle"
></ha-icon-button> ></ha-icon-button>
</div> </h1>
${this._related?.automation?.length ${this._related?.automation?.length
? this._related.automation.map((automation) => { ? this._related.automation.map((automation) => {
const state = this.hass.states[automation]; const state = this.hass.states[automation];
@ -328,7 +328,7 @@ export class HaConfigDevicePage extends LitElement {
isComponentLoaded(this.hass, "scene") && entities.length isComponentLoaded(this.hass, "scene") && entities.length
? html` ? html`
<ha-card> <ha-card>
<div class="card-header"> <h1 class="card-header">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.scene.scenes" "ui.panel.config.devices.scene.scenes"
)} )}
@ -340,7 +340,7 @@ export class HaConfigDevicePage extends LitElement {
)} )}
icon="hass:plus-circle" icon="hass:plus-circle"
></ha-icon-button> ></ha-icon-button>
</div> </h1>
${ ${
this._related?.scene?.length this._related?.scene?.length
@ -402,7 +402,7 @@ export class HaConfigDevicePage extends LitElement {
isComponentLoaded(this.hass, "script") isComponentLoaded(this.hass, "script")
? html` ? html`
<ha-card> <ha-card>
<div class="card-header"> <h1 class="card-header">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.script.scripts" "ui.panel.config.devices.script.scripts"
)} )}
@ -413,7 +413,7 @@ export class HaConfigDevicePage extends LitElement {
)} )}
icon="hass:plus-circle" icon="hass:plus-circle"
></ha-icon-button> ></ha-icon-button>
</div> </h1>
${this._related?.script?.length ${this._related?.script?.length
? this._related.script.map((script) => { ? this._related.script.map((script) => {
const state = this.hass.states[script]; const state = this.hass.states[script];

4
src/panels/config/scene/ha-scene-editor.ts
View File

@ -268,7 +268,7 @@ export class HaSceneEditor extends SubscribeMixin(
(device) => (device) =>
html` html`
<ha-card> <ha-card>
<div class="card-header"> <h1 class="card-header">
${device.name} ${device.name}
<ha-icon-button <ha-icon-button
icon="hass:delete" icon="hass:delete"
@ -278,7 +278,7 @@ export class HaSceneEditor extends SubscribeMixin(
.device=${device.id} .device=${device.id}
@click=${this._deleteDevice} @click=${this._deleteDevice}
></ha-icon-button> ></ha-icon-button>
</div> </h1>
${device.entities.map((entityId) => { ${device.entities.map((entityId) => {
const entityStateObj = this.hass.states[entityId]; const entityStateObj = this.hass.states[entityId];
if (!entityStateObj) { if (!entityStateObj) {

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

@ -186,7 +186,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
${!this._config.title && !this._showHeaderToggle && !this._config.icon ${!this._config.title && !this._showHeaderToggle && !this._config.icon
? "" ? ""
: html` : html`
<div class="card-header"> <h1 class="card-header">
<div class="name"> <div class="name">
${this._config.icon ${this._config.icon
? html` ? html`
@ -208,7 +208,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
) as EntityConfig[]).map((conf) => conf.entity)} ) as EntityConfig[]).map((conf) => conf.entity)}
></hui-entities-toggle> ></hui-entities-toggle>
`} `}
</div> </h1>
`} `}
<div id="states" class="card-content"> <div id="states" class="card-content">
${this._configEntities!.map((entityConf) => ${this._configEntities!.map((entityConf) =>

2
src/panels/lovelace/cards/hui-stack-card.ts
View File

@ -75,7 +75,7 @@ export abstract class HuiStackCard extends LitElement implements LovelaceCard {
return html` return html`
${this._config.title ${this._config.title
? html` <div class="card-header">${this._config.title}</div> ` ? html`<h1 class="card-header">${this._config.title}</h1>`
: ""} : ""}
<div id="root">${this._cards}</div> <div id="root">${this._cards}</div>
`; `;