local forecast enhanced-wide #188 #196 #193 #194

gulp/publish-frontend.mjs

@@ -15,7 +15,7 @@ import { readFile } from 'fs/promises';
 import file from 'gulp-file';
 import { CloudFrontClient, CreateInvalidationCommand } from '@aws-sdk/client-cloudfront';
 import log from 'fancy-log';
-import dartSass from 'sass';
+import * as dartSass from 'sass';
 import gulpSass from 'gulp-sass';
 import sourceMaps from 'gulp-sourcemaps';
 import OVERRIDES from '../src/overrides.mjs';
@@ -222,7 +222,7 @@ const buildDist = series(clean, parallel(buildJs, compressJsVendor, buildCss, co
 // upload_images could be in parallel with upload, but _images logs a lot and has little changes
 // by running upload last the majority of the changes will be at the bottom of the log for easy viewing
 const publishFrontend = series(buildDist, uploadImages, upload, invalidate, logVersion);
-const stageFrontend = series(previewVersion, buildDist, uploadImagesPreview, uploadPreview, invalidatePreview);
+const stageFrontend = series(previewVersion, buildDist, uploadImagesPreview, uploadPreview, invalidatePreview, logVersion);
 
 export default publishFrontend;
 

server/scripts/modules/settings.mjs

@@ -37,7 +37,7 @@ const enhancedScreenChange = (value) => {
 	if (!container) {
 		// DOM not ready; defer enabling if set
 		if (value) {
-			deferredDomSettings.add('enhanced');
+			deferredDomSettings.add('enhancedScreens');
 		}
 		return;
 	}

server/styles/scss/_weather-display.scss

@@ -16,6 +16,13 @@
 		background-repeat: no-repeat;
 	}
 
+	.wide.enhanced & {
+		&:has(.can-enhance) {
+			background-image: url(../images/backgrounds/1-wide-enhanced.png);
+			background-position-x: 0px;
+		}
+	}
+
 	/* this method is required to hide blocks so they can be measured while off screen */
 	height: 0px;
 
@@ -135,6 +142,12 @@
 			margin-left: p.$blue-box-margin;
 			margin-right: p.$blue-box-margin;
 			width: calc(100% - 128px);
+
+			.wide.enhanced & {
+				&.can-enhance {
+					width: calc(p.$wide-width - p.$blue-box-margin - p.$blue-box-margin)
+				}
+			}
 		}
 
 	}

views/partials/local-forecast.ejs

@@ -1,12 +1,12 @@
 <%- include('header.ejs', {titleDual:{ top: 'Local' , bottom: 'Forecast' }, hasTime: true, noaaLogo: true}) %>
-	<div class="main has-scroll has-box local-forecast">
-		<div class="container">
-			<div class="forecasts">
-				<div class="forecast template">
-					<div class="text">
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<%- include('scroll.ejs') %>
+<div class="main has-scroll has-box local-forecast can-enhance">
+  <div class="container">
+    <div class="forecasts">
+      <div class="forecast template">
+        <div class="text">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<%- include('scroll.ejs') %>