From 44596a6cfb3cda5219e232913e202a8814acfd4f Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <blacklight86@gmail.com>
Date: Mon, 7 May 2018 19:16:25 +0200
Subject: [PATCH] Improved style for temp/humidity sensors on the widget

---
 .../static/css/widgets/date-time-weather.css     | 16 ++++++++++++++++
 .../templates/widgets/date-time-weather.html     | 14 +++++++++-----
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/platypush/backend/http/static/css/widgets/date-time-weather.css b/platypush/backend/http/static/css/widgets/date-time-weather.css
index 49fcf029e..3c3b175d7 100644
--- a/platypush/backend/http/static/css/widgets/date-time-weather.css
+++ b/platypush/backend/http/static/css/widgets/date-time-weather.css
@@ -4,6 +4,8 @@
 
 .date-time-weather-container {
     padding: 2rem;
+    position: relative;
+    min-height: 20.5em;
 }
 
 h1.temperature {
@@ -16,8 +18,22 @@ h1.temperature {
         font-size: 22px;
     }
 
+    .widget.date-time-weather * > .sensors {
+        position: absolute;
+        bottom: 2rem;
+        width: 100%;
+    }
+
     .widget.date-time-weather * > .sensor-temperature,
     .widget.date-time-weather * > .sensor-humidity {
         display: none;
+        font-weight: bold;
     }
 
+    .widget.date-time-weather * > .sensor-temperature {
+        text-align: left;
+    }
+
+    .widget.date-time-weather * > .sensor-humidity {
+        text-align: right;
+    }
diff --git a/platypush/backend/http/templates/widgets/date-time-weather.html b/platypush/backend/http/templates/widgets/date-time-weather.html
index bfe1483da..0bea4cd97 100644
--- a/platypush/backend/http/templates/widgets/date-time-weather.html
+++ b/platypush/backend/http/templates/widgets/date-time-weather.html
@@ -11,12 +11,16 @@
 
     <div class="forecast" data-bind="forecast"></div>
 
-    <div class="sensor-temperature">
-        Sensor temperature: <span data-bind="sensor-temperature">N/A</span>&deg;
-    </div>
+    <div class="sensors row">
+        <div class="sensor-temperature six columns">
+            <i class="fa fa-thermometer"></i> &nbsp;
+            <span data-bind="sensor-temperature">N/A</span>&deg;
+        </div>
 
-    <div class="sensor-humidity">
-        Sensor humidity: <span data-bind="sensor-humidity">N/A</span>%
+        <div class="sensor-humidity six columns">
+            <i class="fa fa-tint"></i> &nbsp;
+            <span data-bind="sensor-humidity">N/A</span>%
+        </div>
     </div>
 </div>