portrait current conditions #167

server/scripts/modules/currentweather.mjs

@@ -201,7 +201,9 @@ class CurrentWeather extends WeatherDisplay {
 			temp: this.data.Temperature + String.fromCharCode(176),
 			condition,
 			wind,
+			'wind-portrait': wind,
 			location,
+			'portrait-location': location,
 			humidity: `${this.data.Humidity}%`,
 			dewpoint: this.data.DewPoint + String.fromCharCode(176),
 			ceiling: (this.data.Ceiling === 0 ? 'Unlimited' : this.data.Ceiling + this.data.CeilingUnit),
@@ -210,7 +212,9 @@ class CurrentWeather extends WeatherDisplay {
 			icon: { type: 'img', src: this.data.Icon },
 		};
 
-		if (this.data.WindGust !== '-') fill['wind-gusts'] = `Gusts to ${this.data.WindGust}`;
+		if (this.data.WindGust !== '-') {
+			fill['wind-gusts'] = `Gusts to ${this.data.WindGust}`;
+		}
 
 		if (this.data.observations.heatIndex.value && this.data.HeatIndex !== this.data.Temperature) {
 			fill['heat-index-label'] = 'Heat Index:';

server/styles/scss/_current-weather.scss

@@ -5,9 +5,33 @@
 .weather-display .main.current-weather {
 	&.main {
 		width: calc(p.$standard-width - (2 * p.$blue-box-margin));
+		@include u.text-shadow();
+
+		.portrait-only {
+			display: none;
+
+			.portrait.enhanced & {
+				display: block;
+			}
+		}
+
+		.standard-only {
+			display: block;
+
+			.portrait.enhanced & {
+				display: none;
+			}
+		}
+
+		.portrait-location {
+			text-align: center;
+			margin-top: 175px;
+			font-family: "Star4000 Large";
+			font-size: 32pt;
+			color: c.$title-color;
+		}
 
 		.col {
-			height: 50px;
 			width: 255px;
 			display: inline-block;
 			margin-top: 10px;
@@ -20,11 +44,32 @@
 				margin-right: 25px;
 			}
 
-			@include u.text-shadow();
+			.portrait.enhanced & {
+				margin-left: 20px;
+				width: calc(p.$blue-box-width - 40px);
+				display: block;
+				position: relative;
+
+				.wind-container {
+					margin-left: 50px;
+					width: calc(p.$blue-box-width - 140px);
+				}
+			}
 
 			&.left {
 				font-family: 'Star4000 Extended';
 				font-size: 24pt;
+
+				.portrait.enhanced & {
+					font-size: 30pt;
+					line-height: 40px;
+
+					.icon {
+						margin-top: 50px;
+						transform: scale(1.5);
+						margin-bottom: 50px;
+					}
+				}
 			}
 
 			&.right {
@@ -34,6 +79,14 @@
 				font-weight: bold;
 				line-height: 24px;
 
+				.portrait.enhanced & {
+					font-family: "Star4000 Extended";
+					font-size: 28pt;
+					font-weight: 300;
+					line-height: 36px;
+				}
+
+
 				.row {
 					margin-bottom: 12px;
 
@@ -48,6 +101,7 @@
 
 					.value {
 						float: right;
+						text-align: right;
 						margin-right: 10px;
 					}
 

server/styles/scss/_page.scss

@@ -167,6 +167,10 @@ body {
 	.wide & {
 		width: p.$wide-width;
 	}
+
+	.enhanced.portrait & {
+		height: p.$portrait-height;
+	}
 }
 
 .kiosk #divTwc {
@@ -343,6 +347,12 @@ body {
 	background-image: url(../images/backgrounds/1.png);
 	transform-origin: 0 0;
 	background-repeat: no-repeat;
+
+	.portrait.enhanced & {
+		width: p.$portrait-width;
+		height: p.$portrait-height;
+		background-image: url(../images/backgrounds/1-portrait.png);
+	}
 }
 
 .wide #container {

server/styles/scss/_weather-display.scss

@@ -26,8 +26,17 @@
 	/* this method is required to hide blocks so they can be measured while off screen */
 	height: 0px;
 
+	.enhanced.portrait & {
+
+		background-image: url(../images/backgrounds/1-portrait.png);
+	}
+
 	&.show {
 		height: p.$standard-height;
+
+		.enhanced.portrait & {
+			height: p.$portrait-height;
+		}
 	}
 
 	.template {
@@ -133,8 +142,18 @@
 			overflow: hidden;
 
 			&.no-header {
-				height: 400px;
+				height: calc(p.$standard-scroll-height + 90px);
 				margin-top: 0; // Reset for no-header case since the gap issue is header-related
+
+				.portrait.enhanced & {
+					height: calc(p.$portrait-scroll-height + 90px);
+				}
+			}
+
+			.portrait.enhanced & {
+				height: p.$portrait-scroll-height;
+
+
 			}
 		}
 

server/styles/scss/shared/_positions.scss

@@ -4,11 +4,17 @@ $standard-height: 480px;
 
 // height with scroll
 $standard-scroll-height: 310px;
+$portrait-scroll-height: 967px;
 
 // blue box size
 $blue-box-margin: 64px;
+$blue-box-width: calc($standard-width - 2 * $blue-box-margin);
 
 // wide screen positioning
 $wide-padding: 107px;
 $wide-margin: 107px;
-$wide-width: 854px;
+$wide-width: 854px;
+
+// portrait positioning
+$portrait-width: 640px;
+$portrait-height: 1137px;

views/partials/current-weather.ejs

@@ -1,18 +1,23 @@
 <%- include('header.ejs', {titleDual:{ top: 'Current' , bottom: 'Conditions' }, noaaLogo: true, hasTime: true}) %>
 <div class="main has-scroll has-box current-weather can-enhance">
   <div class="weather template">
+		<div class="portrait-location portrait-only"></div>
     <div class="left col">
       <div class="temp center"></div>
       <div class="condition center"></div>
       <div class="icon center"><img src="" /></div>
-      <div class="wind-container">
+      <div class="wind-container standard-only">
         <div class="wind-label">Wind:</div>
         <div class="wind"></div>
       </div>
       <div class="wind-gusts"></div>
     </div>
     <div class="right col">
-      <div class="location"></div>
+      <div class="location standard-only"></div>
+			<div class="row portrait-only">
+				<div class="label">Wind:</div>
+				<div class="wind-portrait value"></div>
+			</div>
       <div class="row">
         <div class="label">Humidity:</div>
         <div class="humidity value"></div>