lifning/ws4kp
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

switch from css zoom to transform-scale

Browse source
This commit is contained in:
Matt Walsh 2023-05-31 22:57:36 -05:00
parent 3b050073ed
commit 2c010a9a32
6 changed files with 11 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
server/scripts/modules/navigation.mjs
View file

@ -274,9 +274,9 @@ const resize = () => {
const scale = Math.min(widthZoomPercent, heightZoomPercent); const scale = Math.min(widthZoomPercent, heightZoomPercent);
if (scale < 1.0 || document.fullscreenElement) { if (scale < 1.0 || document.fullscreenElement) {
document.querySelector('#container').style.zoom = scale; document.querySelector('#container').style.transform = `scale(${scale})`;
} else { } else {
document.querySelector('#container').style.zoom = 1; document.querySelector('#container').style.transform = 'unset';
} }
}; };

4
server/scripts/modules/regionalforecast.mjs
View file

@ -167,9 +167,7 @@ class RegionalForecast extends WeatherDisplay {
// draw the map // draw the map
const scale = 640 / (offsetXY.x * 2); const scale = 640 / (offsetXY.x * 2);
const map = this.elem.querySelector('.map'); const map = this.elem.querySelector('.map');
map.style.zoom = scale; map.style.transform = `scale(${scale}) translate(-${sourceXY.x}px, -${sourceXY.y}px)`;
map.style.top = `-${sourceXY.y}px`;
map.style.left = `-${sourceXY.x}px`;
const cities = data.map((city) => { const cities = data.map((city) => {
const fill = {}; const fill = {};

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

5
server/styles/scss/_page.scss
View file

@ -97,6 +97,7 @@ body {
} }
.autocomplete-suggestions { .autocomplete-suggestions {
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #000000; border: 1px solid #000000;
@ -284,6 +285,7 @@ body {
height: 480px; height: 480px;
overflow: hidden; overflow: hidden;
background-image: url(../images/BackGround1_1.png); background-image: url(../images/BackGround1_1.png);
transform-origin: 0 0;
} }
@ -291,6 +293,7 @@ body {
background-image: none; background-image: none;
width: unset; width: unset;
height: unset; height: unset;
transform-origin: unset;
} }
#loading { #loading {
@ -373,7 +376,7 @@ body {
} }
#divTwcBottom img { #divTwcBottom img {
zoom: 75%; transform: scale(0.75);
} }
#divTwc:fullscreen { #divTwc:fullscreen {

1
server/styles/scss/_regional-forecast.scss
View file

@ -12,6 +12,7 @@
.map { .map {
position: absolute; position: absolute;
transform-origin: 0 0;
} }
.location { .location {