From c347be6f3542f65f6b19e18e907a0c6a9f8ce774 Mon Sep 17 00:00:00 2001
From: Timmo <contact@timmo.xyz>
Date: Mon, 29 Oct 2018 07:30:56 +0000
Subject: [PATCH] Lovelace - Weather Card: Adjust margins and move text (#1880)

* Thermostat fix (#1867)

* Thermostat fix

* Fix for unknown operation mode

* No title for you

* I suck at removing unnecessary things

* Fixing pointless Ternary operator

* Add version bump script

* Fix hass setting on stack (#1868)

* Fix hass setting on stack

* Don't set hass on pic elements if undefined

* Don't set hass on entity rows if undefined

* prefix config prop

* Pic elements set hass yoooo

* Remove interface

* Make stack config private

* Fix import

* Lint

* Bumped version to 20181026.1

* :hammer: move not text to header and name to secondary text

* :hammer: reduce some other margins
---
 src/cards/ha-weather-card.js | 38 ++++++++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/cards/ha-weather-card.js b/src/cards/ha-weather-card.js
index 849ba6b9fa..90b49d97a3 100644
--- a/src/cards/ha-weather-card.js
+++ b/src/cards/ha-weather-card.js
@@ -26,6 +26,25 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           color: var(--paper-item-icon-color);
         }
 
+        .header {
+          font-family: var(--paper-font-headline_-_font-family);
+          -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
+          font-size: var(--paper-font-headline_-_font-size);
+          font-weight: var(--paper-font-headline_-_font-weight);
+          letter-spacing: var(--paper-font-headline_-_letter-spacing);
+          line-height: var(--paper-font-headline_-_line-height);
+          text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
+          opacity: var(--dark-primary-opacity);
+          padding: 24px 16px 16px;
+          display: flex;
+        }
+
+        .name {
+          margin-left: 16px;
+          font-size: 16px;
+          color: var(--secondary-text-color);
+        }
+
         .now {
           display: flex;
           justify-content: space-between;
@@ -58,12 +77,8 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           top: 4px;
         }
 
-        .now-text {
-          font-size: 24px;
-        }
-
         .forecast {
-          margin-top: 24px;
+          margin-top: 16px;
           display: flex;
           justify-content: space-between;
         }
@@ -74,7 +89,7 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
         }
 
         .forecast .icon {
-          margin: 8px 0;
+          margin: 4px 0;
           text-align: center;
         }
 
@@ -88,7 +103,13 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           color: var(--secondary-text-color);
         }
       </style>
-      <ha-card header="[[stateObj.attributes.friendly_name]]">
+      <ha-card>
+        <div class="header">
+          [[computeState(stateObj.state, localize)]]
+          <div class="name">
+            [[stateObj.attributes.friendly_name]]
+          </div>
+        </div>
         <div class="content">
           <div class="now">
             <div class="main">
@@ -120,9 +141,6 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
               </template>
             </div>
           </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]]">