Weather Card: Switch State and Name (#5795)

This commit is contained in:
Zack Arnett 2020-05-11 07:44:15 -04:00 committed by GitHub
parent 79935b2d4c
commit cf575f83f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -182,9 +182,6 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
</div> </div>
<div class="info"> <div class="info">
<div class="name-state"> <div class="name-state">
<div class="name">
${this._config.name || computeStateName(stateObj)}
</div>
<div class="state"> <div class="state">
${computeStateDisplay( ${computeStateDisplay(
this.hass.localize, this.hass.localize,
@ -192,6 +189,9 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
this.hass.language this.hass.language
)} )}
</div> </div>
<div class="name">
${this._config.name || computeStateName(stateObj)}
</div>
</div> </div>
<div class="temp-attribute"> <div class="temp-attribute">
<div class="temp"> <div class="temp">
@ -377,13 +377,13 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
top: 1px; top: 1px;
} }
.name, .state,
.temp-attribute .temp { .temp-attribute .temp {
font-size: 28px; font-size: 28px;
line-height: 1.2; line-height: 1.2;
} }
.state, .name,
.attribute { .attribute {
font-size: 14px; font-size: 14px;
line-height: 1; line-height: 1;
@ -440,7 +440,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
.attribute, .attribute,
.templow, .templow,
.state { .name {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
@ -469,7 +469,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
--mdc-icon-size: 52px; --mdc-icon-size: 52px;
} }
:host([narrow]) .name, :host([narrow]) .state,
:host([narrow]) .temp-attribute .temp { :host([narrow]) .temp-attribute .temp {
font-size: 22px; font-size: 22px;
} }
@ -485,7 +485,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
/* ============= VERY NARROW ============= */ /* ============= VERY NARROW ============= */
:host([veryNarrow]) .state, :host([veryNarrow]) .name,
:host([veryNarrow]) .attribute { :host([veryNarrow]) .attribute {
display: none; display: none;
} }