Merge pull request #1318 from Mnem42/main

zoom.js ui improvements

mods/zoom.js

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