From 52cfbacd4d2aee5c055745b06c0815e5790152ae Mon Sep 17 00:00:00 2001
From: Paranoid93 <6515818+Paranoid93@users.noreply.github.com>
Date: Sat, 23 Mar 2024 10:53:42 +0100
Subject: [PATCH] Changes the layout of the current weather module, targetting
 indoor values (#3397)

Hi,

this PR should change the layout of the indoor values in the
current_weather module.

Since the Indoor values are being passed into the module via a
notification, I sadly do not know exactly how to write a test for this.
Can you link me an example or tell me, how I can mock indoor values into
this test?

Before:

![grafik](https://github.com/MagicMirrorOrg/MagicMirror/assets/6515818/b1b2afcc-0a35-48c3-9cf8-3e7b041c7727)

After:

![grafik](https://github.com/MagicMirrorOrg/MagicMirror/assets/6515818/311d3051-45e9-450d-afd5-c90a4d4ffd63)
---
 CHANGELOG.md                              |  1 +
 modules/default/weather/current.njk       | 42 +++++++++++++----------
 tests/e2e/modules/weather_current_spec.js |  6 ++--
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2df1540c..fdee4049 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,7 @@ _This release is scheduled to be released on 2024-04-01._
 - [chore] Update dependencies including electron to v28 (#3357) and node-ical
 - Updated translations for estonian (#3371)
 - Update electron to v29 and update other dependencies
+- Updated layout of current weather indoor values
 
 ### Fixed
 
diff --git a/modules/default/weather/current.njk b/modules/default/weather/current.njk
index e7a7e3f1..d1984895 100644
--- a/modules/default/weather/current.njk
+++ b/modules/default/weather/current.njk
@@ -12,8 +12,7 @@
                 {% if config.showWindDirection %}
                     <sup>
                         {% if config.showWindDirectionAsArrow %}
-                            <i class="fas fa-long-arrow-alt-down"
-                               style="transform:rotate({{ current.windFromDirection }}deg)"></i>
+                            <i class="fas fa-long-arrow-alt-down" style="transform:rotate({{ current.windFromDirection }}deg)"></i>
                         {% else %}
                             {{ current.cardinalWindDirection() | translate }}
                         {% endif %}
@@ -42,27 +41,32 @@
             {% endif %}
         </div>
     {% endif %}
-    <div class="large light">
-        <span class="wi weathericon wi-{{ current.weatherType }}"></span>
-        <span class="bright">{{ current.temperature | roundValue | unit("temperature") | decimalSymbol }}</span>
+    <div class="large">
+        {% if config.showIndoorTemperature and indoor.temperature or config.showIndoorHumidity and indoor.humidity %}
+            <span class="medium fas fa-home"></span>
+            <span style="display: inline-block">
+                    {% if config.showIndoorTemperature and indoor.temperature %}
+                            <sup class="small" style="position: relative; display: block; text-align: left;">
+                                    <span>
+                                        {{ indoor.temperature | roundValue | unit("temperature") | decimalSymbol }}
+                                    </span>
+                            </sup>
+                    {% endif %}
+                    {% if config.showIndoorHumidity and indoor.humidity %}
+                            <sub class="small" style="position: relative; display: block; text-align: left;">
+                                    <span>
+                                            {{ indoor.humidity | roundValue | unit("humidity") | decimalSymbol }}
+                                    </span>
+                            </sub>
+                    {% endif %}
+            </span>
+        {% endif %}
+        <span class="light wi weathericon wi-{{ current.weatherType }}"></span>
+        <span class="light bright">{{ current.temperature | roundValue | unit("temperature") | decimalSymbol }}</span>
         {% if config.showHumidity === "temp" %}
             <span class="medium bright">{{ humidity() }}</span>
         {% endif %}
     </div>
-    <div class="normal light indoor">
-        {% if config.showIndoorTemperature and indoor.temperature %}
-            <div>
-                <span class="fas fa-home"></span>
-                <span class="bright">{{ indoor.temperature | roundValue | unit("temperature") | decimalSymbol }}</span>
-            </div>
-        {% endif %}
-        {% if config.showIndoorHumidity and indoor.humidity %}
-            <div>
-                <span class="fas fa-tint"></span>
-                <span class="bright">{{ indoor.humidity | roundValue | unit("humidity") | decimalSymbol }}</span>
-            </div>
-        {% endif %}
-    </div>
     {% if (config.showFeelsLike or config.showPrecipitationAmount or config.showPrecipitationProbability) and not config.onlyTemp %}
         <div class="normal medium feelslike">
             {% if config.showFeelsLike %}
diff --git a/tests/e2e/modules/weather_current_spec.js b/tests/e2e/modules/weather_current_spec.js
index ac66873b..d24ea1b1 100644
--- a/tests/e2e/modules/weather_current_spec.js
+++ b/tests/e2e/modules/weather_current_spec.js
@@ -19,7 +19,7 @@ describe("Weather module", () => {
 			});
 
 			it("should render temperature with icon", async () => {
-				await expect(weatherFunc.getText(".weather .large.light span.bright", "1.5°")).resolves.toBe(true);
+				await expect(weatherFunc.getText(".weather .large span.light.bright", "1.5°")).resolves.toBe(true);
 			});
 
 			it("should render feels like temperature", async () => {
@@ -62,7 +62,7 @@ describe("Weather module", () => {
 		});
 
 		it("should render degreeLabel for temp", async () => {
-			await expect(weatherFunc.getText(".weather .large.light span.bright", "1°C")).resolves.toBe(true);
+			await expect(weatherFunc.getText(".weather .large span.bright.light", "1°C")).resolves.toBe(true);
 		});
 
 		it("should render degreeLabel for feels like", async () => {
@@ -80,7 +80,7 @@ describe("Weather module", () => {
 		});
 
 		it("should render temperatures in fahrenheit", async () => {
-			await expect(weatherFunc.getText(".weather .large.light span.bright", "34,7°")).resolves.toBe(true);
+			await expect(weatherFunc.getText(".weather .large span.bright.light", "34,7°")).resolves.toBe(true);
 		});
 
 		it("should render 'feels like' in fahrenheit", async () => {