resizing for orientation change

server/scripts/index.js

@@ -233,7 +233,7 @@ const index = (() => {
 			window.scrollTo(0, 0);
 			FullScreenOverride = true;
 		}
-
+		navigation.resize();
 		UpdateFullScreenNavigate();
 	};
 
@@ -254,6 +254,7 @@ const index = (() => {
 		} else if (document.msExitFullscreen) {
 			document.msExitFullscreen();
 		}
+		navigation.resize();
 	};
 
 	const btnNavigateMenuClick = () => {

server/scripts/modules/navigation.js

@@ -23,7 +23,8 @@ const navigation = (() => {
 	let almanac;
 
 	const init = async () => {
-		// nothing to do
+		// set up resize handler
+		window.addEventListener('resize', resize);
 	};
 
 	const message = (data) => {
@@ -262,6 +263,20 @@ const navigation = (() => {
 		return almanac.getSun();
 	};
 
+	// resize the container on a page resize
+	const resize = () => {
+		const widthZoomPercent = window.innerWidth / 640;
+		const heightZoomPercent = window.innerHeight / 480;
+
+		const scale = Math.min(widthZoomPercent, heightZoomPercent);
+
+		if (scale < 1.0 || document.fullscreenElement) {
+			document.getElementById('container').style.zoom = scale;
+		} else {
+			document.getElementById('container').style.zoom = 1;
+		}
+	};
+
 	return {
 		init,
 		message,
@@ -273,5 +288,6 @@ const navigation = (() => {
 		getDisplay,
 		getCurrentWeather,
 		getSun,
+		resize,
 	};
 })();

server/styles/scss/_page.scss

@@ -240,9 +240,7 @@ jsgif {
 #container {
 	position: relative;
 	width: 100%;
-	/* max-width: 640px; */
 	height: 100%;
-	max-height: 480;
 	background-image: url(../images/BackGround1_1.png);
 }
 
@@ -298,13 +296,12 @@ jsgif {
 
 #divTwc:fullscreen {
 	display: flex;
-	align-items: center;
-	justify-content: center;
-	align-content: center;
+align-items: center;
+justify-content: center;
+align-content: center;
 }
 
 #divTwc:fullscreen #display {
-
 	position: relative;
 }
 
@@ -318,36 +315,6 @@ jsgif {
 	bottom: 0px;
 }
 
-@media screen and (orientation: portrait) {
-	#divTwc:fullscreen canvas {
-		width: 100vw;
-		max-width: 100vw;
-		height: auto;
-	}
-
-	#divTwc:fullscreen #container {
-		width: 100vw;
-		height: auto;
-		max-height: unset;
-		max-width: unset;
-	}
-}
-
-@media screen and (orientation: landscape) {
-	#divTwc:fullscreen canvas {
-		height: 100vh;
-		max-height: 100vh;
-		width: auto;
-	}
-
-	#divTwc:fullscreen #container {
-		height: 100vh;
-		width: auto;
-		max-width: 100vw;
-		max-height: unset;
-	}
-}
-
 .navButton {
 	cursor: pointer;
 }