portrait latest observations #167

server/scripts/modules/latestobservations.mjs

@@ -39,9 +39,10 @@ class LatestObservations extends WeatherDisplay {
 		// We start with the 7 closest stations and only fetch more if some fail,
 		// stopping as soon as we have 7 valid stations with data.
 		const actualConditions = [];
-		let lastStation = Math.min(regionalStations.length, 7);
+		const stationLimit = this.MaximumRegionalStations * ((settings.portrait?.value) ? 2 : 1);
+		let lastStation = Math.min(regionalStations.length, stationLimit);
 		let firstStation = 0;
-		while (actualConditions.length < 7 && (lastStation) <= regionalStations.length) {
+		while (actualConditions.length < stationLimit && (lastStation) <= regionalStations.length) {
 			// Sequential fetching is intentional here - we want to try closest stations first
 			// and only fetch additional batches if needed, rather than hitting all 30 stations at once
 			// eslint-disable-next-line no-await-in-loop
@@ -50,11 +51,11 @@ class LatestObservations extends WeatherDisplay {
 			actualConditions.push(...someStations);
 			// update counters
 			firstStation += lastStation;
-			lastStation = Math.min(regionalStations.length + 1, firstStation + 7 - actualConditions.length);
+			lastStation = Math.min(regionalStations.length + 1, firstStation + stationLimit - actualConditions.length);
 		}
 
-		// cut down to the maximum of 7
+		// cut down to the maximum that fit on the page
-		this.data = actualConditions.slice(0, this.MaximumRegionalStations);
+		this.data = actualConditions.slice(0, stationLimit);
 
 		// test for at least one station
 		if (this.data.length === 0) {

server/styles/scss/_latest-observations.scss

@@ -1,11 +1,22 @@
 @use 'shared/_colors'as c;
 @use 'shared/_utils'as u;
+@use 'shared/_positions'as p;
 
 .weather-display .latest-observations {
 
 	&.main {
 		overflow-y: hidden;
 
+		.container {
+			// adjust for the height of the column headers
+			max-height: calc(p.$standard-scroll-height - 10px);
+			overflow: hidden;
+
+			.portrait.enhanced & {
+				max-height: calc(p.$portrait-scroll-height - 20px);
+			}
+		}
+
 		.column-headers {
 			height: 20px;
 			position: absolute;
@@ -91,6 +102,10 @@
 			min-height: 338px;
 			padding-top: 10px;
 
+			.portrait.enhanced & {
+				padding-top: 40px;
+			}
+
 			.observation-row {
 				font-family: 'Star4000';
 				font-size: 24pt;
@@ -107,6 +122,13 @@
 					white-space: pre;
 					text-align: right;
 				}
+
+				.portrait.enhanced & {
+					font-family: 'Star4000 Large';
+					font-size: 16pt;
+					height: 48px;
+					font-weight: bold;
+				}
 			}
 		}
 	}