From 8ecc41388af280aa685ebfb89fb0dd305ddf1dc6 Mon Sep 17 00:00:00 2001
From: c727 <crusader727@gmx.de>
Date: Wed, 9 May 2018 00:14:29 +0200
Subject: [PATCH] Fix issues with new weather card (#1149)

* Fix issues with new weather card

* New line
---
 src/cards/ha-weather-card.html                | 75 ++++++++++++-------
 .../more-info/controls/more-info-weather.html | 40 +++++-----
 2 files changed, 70 insertions(+), 45 deletions(-)

diff --git a/src/cards/ha-weather-card.html b/src/cards/ha-weather-card.html
index 8c5145f1fe..db421a6fdf 100644
--- a/src/cards/ha-weather-card.html
+++ b/src/cards/ha-weather-card.html
@@ -22,12 +22,33 @@
       .now {
         display: flex;
         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-width: 72px;
+        margin-right: 8px;
+      }
+
+      .main .temp {
         font-size: 52px;
+        line-height: 1em;
+        position: relative;
+      }
+
+      .main .temp span {
+        font-size: 24px;
+        line-height: 1em;
+        position: absolute;
+        top: 4px;
       }
 
       .now-text {
@@ -62,30 +83,38 @@
     <ha-card header='[[stateObj.attributes.friendly_name]]'>
       <div class='content'>
         <div class="now">
-          <div class="state">
+          <div class="main">
             <template is="dom-if" if="[[showWeatherIcon(stateObj.state)]]">
               <iron-icon icon="[[getWeatherIcon(stateObj.state)]]"></iron-icon>
             </template>
-            [[getTemperature(stateObj.attributes.temperature)]]
+            <div class="temp">
+              [[stateObj.attributes.temperature]]<span>[[getUnit('temperature')]]</span>
+            </div>
           </div>
           <div class="attributes">
-            <div>
-              [[localize('ui.card.weather.attributes.humidity')]]:
-              [[stateObj.attributes.humidity]] %
-            </div>
-            <template is="dom-if" if="[[stateObj.attributes.visibility]]">
+            <template is="dom-if" if="[[stateObj.attributes.pressure]]">
               <div>
-                [[localize('ui.card.weather.attributes.visibility')]]:
-                [[getVisibilty(stateObj.attributes.visibility)]]
+                [[localize('ui.card.weather.attributes.air_pressure')]]:
+                [[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>
             </template>
-            <div>
-              [[localize('ui.card.weather.attributes.wind_speed')]]:
-              [[getWind(stateObj.attributes.wind_speed, stateObj.attributes.wind_bearing, localize)]]
-            </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]]">
           <div class="forecast">
             <template is='dom-repeat' items='[[forecast]]'>
@@ -96,9 +125,9 @@
                     <iron-icon icon="[[getWeatherIcon(item.condition)]]"></iron-icon>
                   </div>
                 </template>
-                <div class="temp">[[item.temperature]]°</div>
+                <div class="temp">[[item.temperature]] [[getUnit('temperature')]]</div>
                 <template is="dom-if" if="[[item.templow]]">
-                  <div class="templow">[[item.templow]]°</div>
+                  <div class="templow">[[item.templow]] [[getUnit('temperature')]]</div>
                 </template>
               </div>
             </template>
@@ -161,7 +190,7 @@ class HaWeatherCard extends
   }
 
   computeForecast(forecast) {
-    return forecast && forecast.slice(0, 7);
+    return forecast && forecast.slice(0, 5);
   }
 
   getUnit(unit) {
@@ -180,10 +209,6 @@ class HaWeatherCard extends
     return this.weatherIcons[condition];
   }
 
-  getTemperature(temp) {
-    return `${temp}${this.getUnit('temperature')}`;
-  }
-
   windBearingToText(degree) {
     const degreenum = parseInt(degree);
     if (isFinite(degreenum)) {
@@ -195,15 +220,11 @@ class HaWeatherCard extends
   getWind(speed, bearing, localize) {
     if (bearing != null) {
       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`;
   }
 
-  getVisibilty(visibilty) {
-    return `${visibilty} ${this.getUnit('length')}`;
-  }
-
   computeDateTime(data) {
     const date = new Date(data);
     const provider = this.stateObj.attributes.attribution;
diff --git a/src/dialogs/more-info/controls/more-info-weather.html b/src/dialogs/more-info/controls/more-info-weather.html
index ce30c727c6..68e8663485 100644
--- a/src/dialogs/more-info/controls/more-info-weather.html
+++ b/src/dialogs/more-info/controls/more-info-weather.html
@@ -47,23 +47,6 @@
       <div class="main">[[localize('ui.card.weather.attributes.temperature')]]</div>
       <div>[[stateObj.attributes.temperature]] [[getUnit('temperature')]]</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]]">
       <div class="flex">
         <iron-icon icon="mdi:gauge"></iron-icon>
@@ -71,6 +54,27 @@
         <div>[[stateObj.attributes.pressure]] hPa</div>
       </div>
     </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]]">
       <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) {
     if (bearing != null) {
       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`;
   }