commodore
/
sandboxels
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1318 from Mnem42/main 

zoom.js ui improvements
This commit is contained in:
slweeb 2025-12-07 14:06:47 -05:00 committed by GitHub
parent a280825e02 6e17036e1c
commit ddbdfbe07e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 264 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
mods/zoom.js
View File

@ -1,5 +1,3 @@
// IIFE because paranoid
(() => {
const zoom_levels = [ const zoom_levels = [
0.5, 0.5,
1, 1,
@ -73,13 +71,28 @@
} }
function add_css(){ function add_css(){
const FLOATER_CSS = ` const CSS = `
#zm_data_div { #zm_data_div { margin-bottom: 10px; }
margin-bottom: 10px; #canvasDiv { overflow: hidden }
@media(pointer=coarse){
#zm_floater_container#zm_floater_container {
width: 40%;
height: auto;
}
#zm_floater_container:has(#zm_collapse[data-collapsed="true"]){
width: calc(40% / 3);
}
} }
#canvasDiv { @media(pointer:coarse) and (orientation:landscape){
overflow: hidden #zm_floater_container#zm_floater_container {
width: auto;
top: 5px;
}
#zm_floater_container:has(#zm_collapse[data-collapsed="true"]){
width: calc(40% / 3);
}
} }
#zm_floater_container { #zm_floater_container {
@ -88,12 +101,15 @@
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
height: 24%; height: 100px;
aspect-ratio: 1; aspect-ratio: 1;
max-width: 200px;
max-height: 200px;
border: 2px solid white; border: 2px solid white;
background-color: black; background-color: black;
font-size: 1.2em; font-size: 120%;
button { text-align: center; border: 0px solid white } button { text-align: center; border: 0px solid white }
@ -103,16 +119,12 @@
button:where([data-pos="br"]) { border-width: 2px 0px 0px 2px }; button:where([data-pos="br"]) { border-width: 2px 0px 0px 2px };
} }
#zm_floater_container:has(#zm_collapse[data-collapsed="true"]) { #zm_floater_container:has(#zm_collapse[data-collapsed="true"]) {
height: calc(8% - 1px);
button:not(#zm_collapse) { button:not(#zm_collapse) {
display: none display: none
} }
} }
.zm_corner { .zm_corner { border: 2px solid white; }
border: 2px solid white;
}
#zm_collapse { #zm_collapse {
grid-row: 3; grid-row: 3;
@ -126,7 +138,7 @@
` `
const style_div = document.createElement("style") const style_div = document.createElement("style")
style_div.innerHTML = FLOATER_CSS style_div.innerHTML = CSS
document.head.appendChild(style_div) document.head.appendChild(style_div)
} }
@ -286,4 +298,3 @@
patch_keybinds() patch_keybinds()
patch_ui() patch_ui()
}) })
})()