markmental/ws4kp-linhanced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change Local Radar precipitation page styling

Browse source
This commit is contained in:
mrkmntal 2026-04-07 15:57:08 -04:00
commit c003305af0
5 changed files with 57 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

2
server/scripts/modules/radar.mjs
View file

@ -119,7 +119,7 @@ class Radar extends WeatherDisplay {
} }
createRadarLayer(frame) { createRadarLayer(frame) {
const tileUrl = `${this.radarHost}${frame.path}/256/{z}/{x}/{y}/4/1_1.png`; const tileUrl = `${this.radarHost}${frame.path}/256/{z}/{x}/{y}/4/1_0.png`;
const layer = window.L.tileLayer(tileUrl, { const layer = window.L.tileLayer(tileUrl, {
tileSize: 256, tileSize: 256,
opacity: 0, opacity: 0,

58
server/styles/scss/_radar.scss
View file

@ -34,68 +34,70 @@
@include u.text-shadow(); @include u.text-shadow();
text-align: center; text-align: center;
.scale>div {
display: inline-block;
}
.scale-table { .scale-table {
display: table-row; display: flex;
border-collapse: collapse; justify-content: center;
gap: 7px;
.item {
display: flex;
flex-direction: column;
align-items: center;
width: 25px;
gap: 2px;
}
.box { .box {
display: table-cell; display: block;
border: 2px solid black; border: 2px solid black;
width: 17px; width: 100%;
height: 24px; height: 22px;
padding: 0 padding: 0;
} }
.box-1 { .box-1 {
background-color: rgb(49, 210, 22); background-color: rgb(73, 190, 246);
} }
.box-2 { .box-2 {
background-color: rgb(28, 138, 18); background-color: rgb(49, 210, 22);
} }
.box-3 { .box-3 {
background-color: rgb(20, 90, 15); background-color: rgb(241, 228, 88);
} }
.box-4 { .box-4 {
background-color: rgb(10, 40, 10); background-color: rgb(224, 142, 47);
} }
.box-5 { .box-5 {
background-color: rgb(196, 179, 70); background-color: rgb(196, 42, 42);
} }
.box-6 { .box-6 {
background-color: rgb(190, 72, 19); background-color: rgb(145, 59, 184);
} }
.box-7 { .label {
background-color: rgb(171, 14, 14); font-family: 'Star4000 Small';
} font-size: 10pt;
line-height: 1;
.box-8 { white-space: nowrap;
background-color: rgb(115, 31, 4);
} }
} }
.scale { .scale {
.text { margin-top: -2px;
position: relative;
top: -5px;
}
} }
.time { .time {
position: relative; position: relative;
font-weight: normal; font-weight: normal;
top: -14px; top: -20px;
font-family: 'Star4000 Small'; font-family: 'Star4000 Small';
font-size: 24pt; font-size: 18pt;
left: 130px;
} }
} }
} }

2
server/styles/ws.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
server/styles/ws.min.css.map
View file

File diff suppressed because one or more lines are too long

34
views/partials/radar.ejs
View file

@ -12,18 +12,32 @@
<div class="precip"> <div class="precip">
<div class="precip-header">PRECIP</div> <div class="precip-header">PRECIP</div>
<div class="scale"> <div class="scale">
<div class="text">Light</div>
<div class="scale-table"> <div class="scale-table">
<div class="box box-1"></div> <div class="item">
<div class="box box-2"></div> <div class="box box-1"></div>
<div class="box box-3"></div> <div class="label">OVC</div>
<div class="box box-4"></div> </div>
<div class="box box-5"></div> <div class="item">
<div class="box box-6"></div> <div class="box box-2"></div>
<div class="box box-7"></div> <div class="label">DRZ</div>
<div class="box box-7"></div> </div>
<div class="item">
<div class="box box-3"></div>
<div class="label">LT RN</div>
</div>
<div class="item">
<div class="box box-4"></div>
<div class="label">MOD</div>
</div>
<div class="item">
<div class="box box-5"></div>
<div class="label">SHWR</div>
</div>
<div class="item">
<div class="box box-6"></div>
<div class="label">HAIL</div>
</div>
</div> </div>
<div class="text">Heavy</div>
</div> </div>
<div class="time"></div> <div class="time"></div>
</div> </div>