progress/menu #167

server/scripts/modules/progress.mjs

@@ -33,7 +33,7 @@ class Progress extends WeatherDisplay {
 		// if no displays provided just draw the backgrounds (above)
 		if (!displays) return;
 		const lines = displays.map((display, index) => {
-			if (display.showOnProgress === false) return false;
+			// all displays are drawn, some are tagged as only showing on the progress page in portrait
 			const fill = {
 				name: display.name,
 			};
@@ -50,6 +50,8 @@ class Progress extends WeatherDisplay {
 			links.classList.remove(...statusClasses);
 			links.classList.add(statusClass);
 			links.dataset.index = index;
+			// hide items not shown unless in portrait
+			if (!display.showOnProgress) line.classList.add('portrait-only');
 			return line;
 		}).filter((d) => d);
 

server/styles/scss/_page.scss

@@ -213,6 +213,12 @@ body {
 	flex-direction: row;
 	background-color: #000000;
 
+	// stick the nav bar to the bottom of the window in portrait
+	.portrait.enhanced & {
+		position: sticky;
+		bottom: 0px;
+	}
+
 	color: #ffffff;
 	width: p.$standard-width;
 

server/styles/scss/_progress.scss

@@ -21,6 +21,11 @@
 		overflow: hidden;
 		line-height: 28px;
 
+		.portrait.enhanced & {
+			// variable height to keep the progress bar visible
+			height: unset;
+		}
+
 		.item {
 			position: relative;
 
@@ -86,6 +91,10 @@
 			display: block;
 		}
 
+		.portrait.enhanced & {
+			margin-top: 40px;
+		}
+
 		.progress-bar {
 			height: 20px;
 			margin: 2px;