From 4495444ec928434ef7c98aa2331c14e00b7aefd5 Mon Sep 17 00:00:00 2001 From: Adrian Heine Date: Fri, 25 Sep 2020 19:58:48 +0200 Subject: [PATCH] Make it work on mobile devices --- index.html | 1 + src/display.js | 9 +++++---- style.css | 15 ++++++++------- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 067da55..0f1ba70 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + diff --git a/src/display.js b/src/display.js index 5ea43c6..2b3b38e 100644 --- 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, diff --git a/style.css b/style.css index 0e15793..b21099e 100644 --- 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; }