[layout] update styles for weather and calendar (MagicMirrorOrg#3894)

Author: rejas

CHANGELOG.md

@@ -48,6 +48,7 @@ Thanks to: @dathbe.
 - [core] Update dependencies including electron to v38 as well as github actions (#3831, #3849, #3857, #3858, #3872, #3876, #3882, #3891)
 - [weather] Update feels_like temperature calculation formula (#3869)
 - [weather] Update null value handling for weather type (#3892)
+- [layout] Update styles for weather and calendar (#3894)
 
 ### Fixed
 
@@ -331,7 +332,7 @@ For more info, please read the following post: [A New Chapter for MagicMirror: T
 - Update translations for estonian (#3371)
 - Update electron to v29 and update other dependencies
 - [calendar] fullDay events over several days now show the left days from the first day on and 'today' on the last day
-- Update layout of current weather indoor values
+- [weather] Update layout of current weather indoor values
 
 ### Fixed
 
@@ -779,7 +780,7 @@ Special thanks to the following contributors: @apiontek, @eouia, @jupadin, @khas
 - Actually test all js and css files when lint script is run.
 - Updated jsdocs and print warnings during testing too.
 - Updated weathergov provider to try fetching not just current, but also forecast, when API URLs available.
-- Refactored clock layout.
+- [clock] Refactored clock layout.
 - Refactored methods from weather-providers into weatherobject (isDaytime, updateSunTime).
 - Use of `logger.js` in jest tests.
 - Run prettier over all relevant files.

css/main.css

@@ -252,3 +252,15 @@ sup {
 .region .container.hidden {
   display: none;
 }
+
+.region.left .flex {
+  justify-content: flex-start;
+}
+
+.region.center .flex {
+  justify-content: center;
+}
+
+.region.right .flex {
+  justify-content: flex-end;
+}

modules/default/calendar/calendar.css

@@ -2,23 +2,14 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  padding-left: 0;
-  padding-right: 10px;
-  font-size: var(--font-size-small);
-}
-
-.calendar .symbol span {
-  padding-top: 4px;
+  gap: 5px;
 }
 
 .calendar .title {
-  padding-left: 0;
-  padding-right: 0;
-  vertical-align: top;
+  padding: 0 10px;
 }
 
 .calendar .time {
-  padding-left: 30px;
+  padding-left: 20px;
   text-align: right;
-  vertical-align: top;
 }

modules/default/calendar/calendar.js

@@ -168,8 +168,8 @@ Module.register("calendar", {
 
 		this.selfUpdate();
 	},
-	notificationReceived (notification, payload, sender) {
 
+	notificationReceived (notification, payload, sender) {
 		if (notification === "FETCH_CALENDAR") {
 			if (this.hasCalendarURL(payload.url)) {
 				this.sendSocketNotification(notification, { url: payload.url, id: this.identifier });
@@ -217,7 +217,6 @@ Module.register("calendar", {
 
 	// Override dom generator.
 	getDom () {
-		const ONE_SECOND = 1000; // 1,000 milliseconds
 		const events = this.createEventList(true);
 		const wrapper = document.createElement("table");
 		wrapper.className = this.config.tableClass;
@@ -308,15 +307,12 @@ Module.register("calendar", {
 				}
 
 				const symbolClass = this.symbolClassForUrl(event.url);
-				symbolWrapper.className = `symbol align-right ${symbolClass}`;
+				symbolWrapper.className = `symbol ${symbolClass}`;
 
 				const symbols = this.symbolsForEvent(event);
-				symbols.forEach((s, index) => {
+				symbols.forEach((s) => {
 					const symbol = document.createElement("span");
 					symbol.className = s;
-					if (index > 0) {
-						symbol.style.paddingLeft = "5px";
-					}
 					symbolWrapper.appendChild(symbol);
 				});
 				eventWrapper.appendChild(symbolWrapper);
@@ -601,7 +597,6 @@ Module.register("calendar", {
 	 */
 	createEventList (limitNumberOfEntries) {
 		let now = moment();
-		let today = now.clone().startOf("day");
 		let future = now.clone().startOf("day").add(this.config.maximumNumberOfDays, "days");
 
 		let events = [];

modules/default/weather/current.njk

@@ -43,7 +43,7 @@
       {% endif %}
     </div>
   {% endif %}
-  <div class="large type-temp">
+  <div class="flex large type-temp">
     {% if config.showIndoorTemperature and indoor.temperature or config.showIndoorHumidity and indoor.humidity %}
       <span class="medium fas fa-home"></span>
       <span style="display: inline-block">

modules/default/weather/weather.css

@@ -44,6 +44,6 @@
 
 .weather .type-temp {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   gap: 10px;
 }