mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 10:56:34 +00:00
Fix issues with new weather card (#1149)
* Fix issues with new weather card * New line
This commit is contained in:
parent
356e104096
commit
8ecc41388a
@ -22,12 +22,33 @@
|
|||||||
.now {
|
.now {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.state {
|
.main {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main iron-icon {
|
||||||
--iron-icon-height: 72px;
|
--iron-icon-height: 72px;
|
||||||
--iron-icon-width: 72px;
|
--iron-icon-width: 72px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .temp {
|
||||||
font-size: 52px;
|
font-size: 52px;
|
||||||
|
line-height: 1em;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .temp span {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 1em;
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.now-text {
|
.now-text {
|
||||||
@ -62,30 +83,38 @@
|
|||||||
<ha-card header='[[stateObj.attributes.friendly_name]]'>
|
<ha-card header='[[stateObj.attributes.friendly_name]]'>
|
||||||
<div class='content'>
|
<div class='content'>
|
||||||
<div class="now">
|
<div class="now">
|
||||||
<div class="state">
|
<div class="main">
|
||||||
<template is="dom-if" if="[[showWeatherIcon(stateObj.state)]]">
|
<template is="dom-if" if="[[showWeatherIcon(stateObj.state)]]">
|
||||||
<iron-icon icon="[[getWeatherIcon(stateObj.state)]]"></iron-icon>
|
<iron-icon icon="[[getWeatherIcon(stateObj.state)]]"></iron-icon>
|
||||||
</template>
|
</template>
|
||||||
[[getTemperature(stateObj.attributes.temperature)]]
|
<div class="temp">
|
||||||
|
[[stateObj.attributes.temperature]]<span>[[getUnit('temperature')]]</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="attributes">
|
<div class="attributes">
|
||||||
<div>
|
<template is="dom-if" if="[[stateObj.attributes.pressure]]">
|
||||||
[[localize('ui.card.weather.attributes.humidity')]]:
|
|
||||||
[[stateObj.attributes.humidity]] %
|
|
||||||
</div>
|
|
||||||
<template is="dom-if" if="[[stateObj.attributes.visibility]]">
|
|
||||||
<div>
|
<div>
|
||||||
[[localize('ui.card.weather.attributes.visibility')]]:
|
[[localize('ui.card.weather.attributes.air_pressure')]]:
|
||||||
[[getVisibilty(stateObj.attributes.visibility)]]
|
[[stateObj.attributes.pressure]] hPa
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template is="dom-if" if="[[stateObj.attributes.humidity]]">
|
||||||
|
<div>
|
||||||
|
[[localize('ui.card.weather.attributes.humidity')]]:
|
||||||
|
[[stateObj.attributes.humidity]] %
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template is="dom-if" if="[[stateObj.attributes.humidity]]">
|
||||||
|
<div>
|
||||||
|
[[localize('ui.card.weather.attributes.wind_speed')]]:
|
||||||
|
[[getWind(stateObj.attributes.wind_speed, stateObj.attributes.wind_bearing, localize)]]
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div>
|
|
||||||
[[localize('ui.card.weather.attributes.wind_speed')]]:
|
|
||||||
[[getWind(stateObj.attributes.wind_speed, stateObj.attributes.wind_bearing, localize)]]
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="now-text">[[computeState(stateObj.state, localize)]]</div>
|
<div class="now-text">
|
||||||
|
[[computeState(stateObj.state, localize)]]
|
||||||
|
</div>
|
||||||
<template is="dom-if" if="[[forecast]]">
|
<template is="dom-if" if="[[forecast]]">
|
||||||
<div class="forecast">
|
<div class="forecast">
|
||||||
<template is='dom-repeat' items='[[forecast]]'>
|
<template is='dom-repeat' items='[[forecast]]'>
|
||||||
@ -96,9 +125,9 @@
|
|||||||
<iron-icon icon="[[getWeatherIcon(item.condition)]]"></iron-icon>
|
<iron-icon icon="[[getWeatherIcon(item.condition)]]"></iron-icon>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div class="temp">[[item.temperature]]°</div>
|
<div class="temp">[[item.temperature]] [[getUnit('temperature')]]</div>
|
||||||
<template is="dom-if" if="[[item.templow]]">
|
<template is="dom-if" if="[[item.templow]]">
|
||||||
<div class="templow">[[item.templow]]°</div>
|
<div class="templow">[[item.templow]] [[getUnit('temperature')]]</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -161,7 +190,7 @@ class HaWeatherCard extends
|
|||||||
}
|
}
|
||||||
|
|
||||||
computeForecast(forecast) {
|
computeForecast(forecast) {
|
||||||
return forecast && forecast.slice(0, 7);
|
return forecast && forecast.slice(0, 5);
|
||||||
}
|
}
|
||||||
|
|
||||||
getUnit(unit) {
|
getUnit(unit) {
|
||||||
@ -180,10 +209,6 @@ class HaWeatherCard extends
|
|||||||
return this.weatherIcons[condition];
|
return this.weatherIcons[condition];
|
||||||
}
|
}
|
||||||
|
|
||||||
getTemperature(temp) {
|
|
||||||
return `${temp}${this.getUnit('temperature')}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
windBearingToText(degree) {
|
windBearingToText(degree) {
|
||||||
const degreenum = parseInt(degree);
|
const degreenum = parseInt(degree);
|
||||||
if (isFinite(degreenum)) {
|
if (isFinite(degreenum)) {
|
||||||
@ -195,15 +220,11 @@ class HaWeatherCard extends
|
|||||||
getWind(speed, bearing, localize) {
|
getWind(speed, bearing, localize) {
|
||||||
if (bearing != null) {
|
if (bearing != null) {
|
||||||
const cardinalDirection = this.windBearingToText(bearing);
|
const cardinalDirection = this.windBearingToText(bearing);
|
||||||
return `${speed} ${this.getUnit('length')}/h (${localize(cardinalDirection.toLowerCase()) || cardinalDirection})`;
|
return `${speed} ${this.getUnit('length')}/h (${localize(`ui.card.weather.cardinal_direction.${cardinalDirection.toLowerCase()}`) || cardinalDirection})`;
|
||||||
}
|
}
|
||||||
return `${speed} ${this.getUnit('length')}/h`;
|
return `${speed} ${this.getUnit('length')}/h`;
|
||||||
}
|
}
|
||||||
|
|
||||||
getVisibilty(visibilty) {
|
|
||||||
return `${visibilty} ${this.getUnit('length')}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
computeDateTime(data) {
|
computeDateTime(data) {
|
||||||
const date = new Date(data);
|
const date = new Date(data);
|
||||||
const provider = this.stateObj.attributes.attribution;
|
const provider = this.stateObj.attributes.attribution;
|
||||||
|
@ -47,23 +47,6 @@
|
|||||||
<div class="main">[[localize('ui.card.weather.attributes.temperature')]]</div>
|
<div class="main">[[localize('ui.card.weather.attributes.temperature')]]</div>
|
||||||
<div>[[stateObj.attributes.temperature]] [[getUnit('temperature')]]</div>
|
<div>[[stateObj.attributes.temperature]] [[getUnit('temperature')]]</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex">
|
|
||||||
<iron-icon icon="mdi:water-percent"></iron-icon>
|
|
||||||
<div class="main">[[localize('ui.card.weather.attributes.humidity')]]</div>
|
|
||||||
<div>[[stateObj.attributes.humidity]] %</div>
|
|
||||||
</div>
|
|
||||||
<template is="dom-if" if="[[stateObj.attributes.visibility]]">
|
|
||||||
<div class="flex">
|
|
||||||
<iron-icon icon="mdi:eye"></iron-icon>
|
|
||||||
<div class="main">[[localize('ui.card.weather.attributes.visibility')]]</div>
|
|
||||||
<div>[[stateObj.attributes.visibility]] [[getUnit('length')]]</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div class="flex">
|
|
||||||
<iron-icon icon="mdi:weather-windy"></iron-icon>
|
|
||||||
<div class="main">[[localize('ui.card.weather.attributes.wind_speed')]]</div>
|
|
||||||
<div>[[getWind(stateObj.attributes.wind_speed, stateObj.attributes.wind_bearing, localize)]]</div>
|
|
||||||
</div>
|
|
||||||
<template is="dom-if" if="[[stateObj.attributes.pressure]]">
|
<template is="dom-if" if="[[stateObj.attributes.pressure]]">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<iron-icon icon="mdi:gauge"></iron-icon>
|
<iron-icon icon="mdi:gauge"></iron-icon>
|
||||||
@ -71,6 +54,27 @@
|
|||||||
<div>[[stateObj.attributes.pressure]] hPa</div>
|
<div>[[stateObj.attributes.pressure]] hPa</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<template is="dom-if" if="[[stateObj.attributes.humidity]]">
|
||||||
|
<div class="flex">
|
||||||
|
<iron-icon icon="mdi:water-percent"></iron-icon>
|
||||||
|
<div class="main">[[localize('ui.card.weather.attributes.humidity')]]</div>
|
||||||
|
<div>[[stateObj.attributes.humidity]] %</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template is="dom-if" if="[[stateObj.attributes.wind_speed]]">
|
||||||
|
<div class="flex">
|
||||||
|
<iron-icon icon="mdi:weather-windy"></iron-icon>
|
||||||
|
<div class="main">[[localize('ui.card.weather.attributes.wind_speed')]]</div>
|
||||||
|
<div>[[getWind(stateObj.attributes.wind_speed, stateObj.attributes.wind_bearing, localize)]]</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template is="dom-if" if="[[stateObj.attributes.visibility]]">
|
||||||
|
<div class="flex">
|
||||||
|
<iron-icon icon="mdi:eye"></iron-icon>
|
||||||
|
<div class="main">[[localize('ui.card.weather.attributes.visibility')]]</div>
|
||||||
|
<div>[[stateObj.attributes.visibility]] [[getUnit('length')]]</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template is="dom-if" if="[[stateObj.attributes.forecast]]">
|
<template is="dom-if" if="[[stateObj.attributes.forecast]]">
|
||||||
<div class="section">[[localize('ui.card.weather.forecast')]]:</div>
|
<div class="section">[[localize('ui.card.weather.forecast')]]:</div>
|
||||||
@ -168,7 +172,7 @@ class MoreInfoWeather extends window.hassMixins.LocalizeMixin(Polymer.Element) {
|
|||||||
getWind(speed, bearing, localize) {
|
getWind(speed, bearing, localize) {
|
||||||
if (bearing != null) {
|
if (bearing != null) {
|
||||||
const cardinalDirection = this.windBearingToText(bearing);
|
const cardinalDirection = this.windBearingToText(bearing);
|
||||||
return `${speed} ${this.getUnit('length')}/h (${localize(cardinalDirection.toLowerCase()) || cardinalDirection})`;
|
return `${speed} ${this.getUnit('length')}/h (${localize(`ui.card.weather.cardinal_direction.${cardinalDirection.toLowerCase()}`) || cardinalDirection})`;
|
||||||
}
|
}
|
||||||
return `${speed} ${this.getUnit('length')}/h`;
|
return `${speed} ${this.getUnit('length')}/h`;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user