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) {
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, {
tileSize: 256,
opacity: 0,

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

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