almanac #188 #196 #194 #193

server/scripts/modules/almanac.mjs

@@ -69,7 +69,7 @@ class Almanac extends WeatherDisplay {
 
 			// stop after 30 days or 4 moon phases
 			iterations += 1;
-		} while (iterations <= 30 && moon.length < 4);
+		} while (iterations <= 45 && moon.length < 5);
 
 		return {
 			sun,
@@ -123,21 +123,16 @@ class Almanac extends WeatherDisplay {
 
 		// Set day names
 		const Today = DateTime.local();
-		const Tomorrow = Today.plus({ days: 1 });
-		this.elem.querySelector('.day-1').textContent = Today.toLocaleString({ weekday: 'long' });
-		this.elem.querySelector('.day-2').textContent = Tomorrow.toLocaleString({ weekday: 'long' });
+		// fill all three days, even if some are hidden by non-enhanced
+		for (let i = 0; i < 3; i += 1) {
+			this.elem.querySelector(`.day-${i}`).textContent = Today.plus({ days: i }).toLocaleString({ weekday: 'long' });
 
-		const todaySunrise = DateTime.fromJSDate(info.sun[0].sunrise);
-		const todaySunset = DateTime.fromJSDate(info.sun[0].sunset);
-		const [todaySunriseFormatted, todaySunsetFormatted] = formatTimesForColumn([todaySunrise, todaySunset]);
-		this.elem.querySelector('.rise-1').textContent = todaySunriseFormatted;
-		this.elem.querySelector('.set-1').textContent = todaySunsetFormatted;
-
-		const tomorrowSunrise = DateTime.fromJSDate(info.sun[1].sunrise);
-		const tomorrowSunset = DateTime.fromJSDate(info.sun[1].sunset);
-		const [tomorrowSunriseFormatted, tomorrowSunsetformatted] = formatTimesForColumn([tomorrowSunrise, tomorrowSunset]);
-		this.elem.querySelector('.rise-2').textContent = tomorrowSunriseFormatted;
-		this.elem.querySelector('.set-2').textContent = tomorrowSunsetformatted;
+			const sunrise = DateTime.fromJSDate(info.sun[i].sunrise);
+			const sunset = DateTime.fromJSDate(info.sun[i].sunset);
+			const [sunriseFormatted, sunsetFormatted] = formatTimesForColumn([sunrise, sunset]);
+			this.elem.querySelector(`.rise-${i}`).textContent = sunriseFormatted;
+			this.elem.querySelector(`.set-${i}`).textContent = sunsetFormatted;
+		}
 
 		// Moon data
 		const days = info.moon.map((MoonPhase) => {

server/scripts/modules/extendedforecast.mjs

@@ -17,7 +17,7 @@ class ExtendedForecast extends WeatherDisplay {
 		super(navId, elemId, 'Extended Forecast', true);
 
 		// set timings
-		if (settings.enhancedScreens?.value) {
+		if (settings.portrait?.value) {
 			this.timing.totalScreens = 1;
 			this.perPage = 4;
 		} else {

server/styles/scss/_almanac.scss

@@ -1,8 +1,13 @@
-@use 'shared/_colors' as c;
-@use 'shared/_utils' as u;
+@use 'shared/_colors'as c;
+@use 'shared/_utils'as u;
 
 #almanac-html.weather-display {
 	background-image: url('../images/backgrounds/3.png');
+
+	// repeat the background if wide-enhanced
+	.wide.enhanced & {
+		background-repeat: repeat-x;
+	}
 }
 
 .weather-display .main.almanac {
@@ -14,13 +19,17 @@
 		// Use CSS Grid for cross-browser consistency
 		// Grid is populated in reading order (left-to-right, top-to-bottom):
 		display: grid;
-		grid-template-columns: auto auto auto;
-		grid-template-rows: auto auto auto;
+		grid-template-columns: repeat(3, auto);
+		grid-template-rows: repeat(3, auto);
 		gap: 0px 90px;
 		margin: 3px auto 5px auto; // align the bottom of the div with the background
 		width: fit-content;
 		line-height: 30px;
 
+		.wide.enhanced & {
+			grid-template-columns: repeat(4, auto);
+		}
+
 		.grid-item {
 			// Reset inherited styles that interfere with grid layout
 			width: auto;
@@ -45,6 +54,14 @@
 			&.time {
 				text-align: center;
 			}
+
+			&.wide-enhanced {
+				display: none;
+
+				.wide.enhanced & {
+					display: block;
+				}
+			}
 		}
 	}
 
@@ -58,6 +75,10 @@
 			padding-left: 13px;
 		}
 
+		.days {
+			text-align: center;
+		}
+
 		.day {
 			display: inline-block;
 			text-align: center;

views/partials/almanac.ejs

@@ -1,15 +1,18 @@
 <%- include('header.ejs', {title:'Almanac', hasTime: true}) %>
-<div class="main has-scroll almanac">
+<div class="main has-scroll almanac can-enhance">
   <div class="sun">
     <div class="grid-item empty"></div>
+    <div class="grid-item header day-0"></div>
     <div class="grid-item header day-1"></div>
-    <div class="grid-item header day-2"></div>
+    <div class="grid-item header day-2 wide-enhanced"></div>
     <div class="grid-item row-label">Sunrise:</div>
+    <div class="grid-item time rise-0"></div>
     <div class="grid-item time rise-1"></div>
-    <div class="grid-item time rise-2"></div>
+    <div class="grid-item time rise-2 wide-enhanced"></div>
     <div class="grid-item row-label">Sunset:</div>
+    <div class="grid-item time set-0"></div>
     <div class="grid-item time set-1"></div>
-    <div class="grid-item time set-2"></div>
+    <div class="grid-item time set-2 wide-enhanced"></div>
   </div>
   <div class="moon">
     <div class="title">Moon Data:</div>