eric/WeatherStar4000
1
0
Fork 0
mirror of https://github.com/netbymatt/ws4kp.git synced 2026-04-14 07:39:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

better background and wide screen for hazard displays

Browse Source
This commit is contained in:
Matt Walsh
2025-09-09 21:35:31 -05:00
parent bfc4bddfef
commit 8ee1e954eb
9 changed files with 44 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
server/images/backgrounds/7-wide.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
server/images/backgrounds/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

6
server/scripts/modules/currentweatherscroll.mjs
View File

@@ -97,6 +97,12 @@ const drawScreen = async () => {
if (elem.parentElement.id === 'progress-html') return;
thisScreen?.classes?.forEach((cls) => elem.classList.add(cls));
});
// special case for red background on hazard scroll
const mainScrollBg = document.getElementById('scroll-bg');
mainScrollBg.className = '';
if (thisScreen?.classes?.includes('hazard')) {
mainScrollBg.classList.add('hazard');
}
if (typeof thisScreen === 'string') {
// only a string

2
server/styles/main.css
View File

File diff suppressed because one or more lines are too long

2
server/styles/main.css.map
View File

File diff suppressed because one or more lines are too long

13
server/styles/scss/_hazards.scss
View File

@@ -1,5 +1,9 @@
@use 'shared/_colors' as c;
@use 'shared/_utils' as u;
@use 'shared/_colors'as c;
@use 'shared/_utils'as u;
#hazards-html.weather-display {
background-image: url('../images/backgrounds/7.png');
}
.weather-display .main.hazards {
&.main {
@@ -7,6 +11,7 @@
height: 480px;
background-color: rgb(112, 35, 35);
.hazard-lines {
min-height: 400px;
padding-top: 10px;
@@ -26,3 +31,7 @@
}
}
}
.wide.hazards #container {
background: url(../images/backgrounds/7-wide.png);
}

7
server/styles/scss/_page.scss
View File

@@ -1,5 +1,5 @@
@use 'shared/_utils' as u;
@use 'shared/_colors' as c;
@use 'shared/_utils'as u;
@use 'shared/_colors'as c;
@font-face {
font-family: "Star4000";
@@ -161,6 +161,7 @@ body {
#divTwcMain {
width: 640px;
height: 480px;
position: relative;
.wide & {
width: 854px;
@@ -813,4 +814,4 @@ body.kiosk #loading .instructions {
>*:not(#divTwc) {
display: none !important;
}
}
}

23
server/styles/scss/_weather-display.scss
View File

@@ -1,5 +1,5 @@
@use 'shared/_colors' as c;
@use 'shared/_utils' as u;
@use 'shared/_colors'as c;
@use 'shared/_utils'as u;
.weather-display {
width: 640px;
@@ -116,9 +116,11 @@
.scroll {
@include u.text-shadow(3px, 1.5px);
width: 640px;
height: 70px;
height: 77px;
overflow: hidden;
margin-top: 3px;
position: relative;
z-index: 1;
&.hazard {
background-color: rgb(112, 35, 35);
@@ -159,3 +161,18 @@
}
}
#scroll-bg {
position: absolute;
bottom: 0px;
height: 77px;
width: 640px;
&.hazard {
background-color: rgb(112, 35, 35);
}
}
.wide #scroll-bg {
width: 854px;
}

1
views/index.ejs
View File

@@ -134,6 +134,7 @@
<%- include('partials/hazards.ejs') %>
</div>
</div>
<div id="scroll-bg"></div>
</div>
<div id="divTwcBottom">
<div id="divTwcBottomLeft">