Make it work on mobile devices

4 years ago · 4495444ec9
3 changed files with 14 additions and 11 deletions
--- a/index.html
+++ b/index.html
@ -1,5 +1,6 @@
 <html lang=de>
 <meta charset=utf8>
+<meta name=viewport content="width=device-width,initial-scale=1" />
 <link rel="stylesheet" href="/style.css">
 <script src=/diffDOM.js></script>
 <script src=/springy.js></script>
--- a/src/display.js
+++ b/src/display.js
@ -78,10 +78,11 @@ export class Display {
    let currentBB = this.layout.getBoundingBox()
    let width = this.target.scrollWidth || 100
    let height = this.target.scrollHeight || 100
+    const ballRadius = Math.min(document.body.clientWidth, document.body.clientHeight) * 0.06
    var toScreen = function(p) {
      var size = currentBB.topright.subtract(currentBB.bottomleft);
-      var sx = p.subtract(currentBB.bottomleft).divide(size.x).x * (width - 60) + 30;
-      var sy = p.subtract(currentBB.bottomleft).divide(size.y).y * (height - 60) + 30;
+      var sx = p.subtract(currentBB.bottomleft).divide(size.x).x * (width - ballRadius * 2) + ballRadius;
+      var sy = p.subtract(currentBB.bottomleft).divide(size.y).y * (height - ballRadius * 2) + ballRadius;
      return new Springy.Vector(sx, sy);
    };

@ -133,8 +134,8 @@ export class Display {
        }
        dom.className = item.data.state
        dom.style.position = 'absolute'
-        dom.style.left = (target.x - 60) + 'px'
-        dom.style.top = (target.y - 60) + 'px'
+        dom.style.left = (target.x - ballRadius) + 'px'
+        dom.style.top = (target.y - ballRadius) + 'px'
        dom.appendChild(a)
        field.appendChild(dom)
      }, undefined, undefined,
--- a/style.css
+++ b/style.css
@ -27,7 +27,7 @@ body {
  background-color: #FFC63F;
  position: relative;
  box-sizing: border-box;
-  padding: 20px;
+  padding: 1em;
  flex: 1;
 }

@ -42,10 +42,10 @@ body {
 }

 .items > li a {
-  width: 120px;
-  height: 120px;
+  width: min(12vh, 12vw);
+  height: min(12vh, 12vw);
  background: #D66C00;
-  border-radius: 80px;
+  border-radius: min(7vh, 7vw);
  display: block;
  border: 3px solid #1a1c1c;
 }
@ -69,7 +69,7 @@ body {
  position: absolute;
  transform-origin: 0 0;
  font-size: 1.2em;
-  padding: 0 55px;
+  padding: 0 min(6vh, 6vw);
  box-sizing: border-box;
 }

@ -104,8 +104,9 @@ a.fullview {
 }
 .fullview > div img {
  float: right;
-  width: 120px;
-  border-radius: 80px;
+  width: 7em;
+  height: 7em;
+  border-radius: 7em;
  border: 3px solid #1a1c1c;
  margin-bottom: 1em;
 }