Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bramkragten merged 2 commits into from
Oct 17, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ce19502
Make <ha-card> use <h1> for header
spacegaier Oct 17, 2020
b9f1949
Apply suggestions from code review
spacegaier Oct 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions cast/src/launcher/layout/hc-layout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ class HcLayout extends LitElement {
<ha-card>
<div class="layout">
<img class="hero" src="/images/google-nest-hub.png" />
<div class="card-header">
<h1 class="card-header">
Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""}
${this.auth
? html`
Expand All @@ -44,7 +44,7 @@ class HcLayout extends LitElement {
</div>
`
: ""}
</div>
</h1>
<slot></slot>
</div>
</ha-card>
Expand Down
2 changes: 1 addition & 1 deletion hassio/src/addon-view/info/hassio-addon-info.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ class HassioAddonInfo extends LitElement {
${!this.addon.protected
? html`
<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">
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>
Expand Down
9 changes: 6 additions & 3 deletions src/components/ha-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,12 @@ export class HaCard extends LitElement {
font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px);
letter-spacing: -0.012em;
line-height: 32px;
padding: 24px 16px 16px;
line-height: 48px;
padding: 12px 16px 16px;
display: block;
margin-block-start: 0px;
margin-block-end: 0px;
font-weight: normal;
}

:host ::slotted(.card-content:not(:first-child)),
Expand All @@ -75,7 +78,7 @@ export class HaCard extends LitElement {
protected render(): TemplateResult {
return html`
${this.header
? html` <div class="card-header">${this.header}</div> `
? html`<h1 class="card-header">${this.header}</h1>`
: html``}
<slot></slot>
`;
Expand Down
12 changes: 6 additions & 6 deletions src/panels/config/devices/ha-config-device-page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ export class HaConfigDevicePage extends LitElement {
isComponentLoaded(this.hass, "automation")
? html`
<ha-card>
<div class="card-header">
<h1 class="card-header">
${this.hass.localize(
"ui.panel.config.devices.automation.automations"
)}
Expand All @@ -270,7 +270,7 @@ export class HaConfigDevicePage extends LitElement {
)}
icon="hass:plus-circle"
></ha-icon-button>
</div>
</h1>
${this._related?.automation?.length
? this._related.automation.map((automation) => {
const state = this.hass.states[automation];
Expand Down Expand Up @@ -328,7 +328,7 @@ export class HaConfigDevicePage extends LitElement {
isComponentLoaded(this.hass, "scene") && entities.length
? html`
<ha-card>
<div class="card-header">
<h1 class="card-header">
${this.hass.localize(
"ui.panel.config.devices.scene.scenes"
)}
Expand All @@ -340,7 +340,7 @@ export class HaConfigDevicePage extends LitElement {
)}
icon="hass:plus-circle"
></ha-icon-button>
</div>
</h1>

${
this._related?.scene?.length
Expand Down Expand Up @@ -402,7 +402,7 @@ export class HaConfigDevicePage extends LitElement {
isComponentLoaded(this.hass, "script")
? html`
<ha-card>
<div class="card-header">
<h1 class="card-header">
${this.hass.localize(
"ui.panel.config.devices.script.scripts"
)}
Expand All @@ -413,7 +413,7 @@ export class HaConfigDevicePage extends LitElement {
)}
icon="hass:plus-circle"
></ha-icon-button>
</div>
</h1>
${this._related?.script?.length
? this._related.script.map((script) => {
const state = this.hass.states[script];
Expand Down
4 changes: 2 additions & 2 deletions src/panels/config/scene/ha-scene-editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ export class HaSceneEditor extends SubscribeMixin(
(device) =>
html`
<ha-card>
<div class="card-header">
<h1 class="card-header">
${device.name}
<ha-icon-button
icon="hass:delete"
Expand All @@ -278,7 +278,7 @@ export class HaSceneEditor extends SubscribeMixin(
.device=${device.id}
@click=${this._deleteDevice}
></ha-icon-button>
</div>
</h1>
${device.entities.map((entityId) => {
const entityStateObj = this.hass.states[entityId];
if (!entityStateObj) {
Expand Down
4 changes: 2 additions & 2 deletions src/panels/lovelace/cards/hui-entities-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
${!this._config.title && !this._showHeaderToggle && !this._config.icon
? ""
: html`
<div class="card-header">
<h1 class="card-header">
<div class="name">
${this._config.icon
? html`
Expand All @@ -208,7 +208,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
) as EntityConfig[]).map((conf) => conf.entity)}
></hui-entities-toggle>
`}
</div>
</h1>
`}
<div id="states" class="card-content">
${this._configEntities!.map((entityConf) =>
Expand Down
2 changes: 1 addition & 1 deletion src/panels/lovelace/cards/hui-stack-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export abstract class HuiStackCard extends LitElement implements LovelaceCard {

return html`
${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>
`;
Expand Down