adrian/coding-precarity
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Make it work on mobile devices

Browse source
This commit is contained in:
Adrian Heine 2020-09-25 19:58:48 +02:00
parent 253559bfc8
commit 4495444ec9
3 changed files with 14 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -1,5 +1,6 @@
<html lang=de> <html lang=de>
<meta charset=utf8> <meta charset=utf8>
<meta name=viewport content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
<script src=/diffDOM.js></script> <script src=/diffDOM.js></script>
<script src=/springy.js></script> <script src=/springy.js></script>

9
src/display.js
View file

@ -78,10 +78,11 @@ export class Display {
let currentBB = this.layout.getBoundingBox() let currentBB = this.layout.getBoundingBox()
let width = this.target.scrollWidth || 100 let width = this.target.scrollWidth || 100
let height = this.target.scrollHeight || 100 let height = this.target.scrollHeight || 100
const ballRadius = Math.min(document.body.clientWidth, document.body.clientHeight) * 0.06
var toScreen = function(p) { var toScreen = function(p) {
var size = currentBB.topright.subtract(currentBB.bottomleft); var size = currentBB.topright.subtract(currentBB.bottomleft);
var sx = p.subtract(currentBB.bottomleft).divide(size.x).x * (width - 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 - 60) + 30; var sy = p.subtract(currentBB.bottomleft).divide(size.y).y * (height - ballRadius * 2) + ballRadius;
return new Springy.Vector(sx, sy); return new Springy.Vector(sx, sy);
}; };
@ -133,8 +134,8 @@ export class Display {
} }
dom.className = item.data.state dom.className = item.data.state
dom.style.position = 'absolute' dom.style.position = 'absolute'
dom.style.left = (target.x - 60) + 'px' dom.style.left = (target.x - ballRadius) + 'px'
dom.style.top = (target.y - 60) + 'px' dom.style.top = (target.y - ballRadius) + 'px'
dom.appendChild(a) dom.appendChild(a)
field.appendChild(dom) field.appendChild(dom)
}, undefined, undefined, }, undefined, undefined,

15
style.css
View file

@ -27,7 +27,7 @@ body {
background-color: #FFC63F; background-color: #FFC63F;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 1em;
flex: 1; flex: 1;
} }
@ -42,10 +42,10 @@ body {
} }
.items > li a { .items > li a {
width: 120px; width: min(12vh, 12vw);
height: 120px; height: min(12vh, 12vw);
background: #D66C00; background: #D66C00;
border-radius: 80px; border-radius: min(7vh, 7vw);
display: block; display: block;
border: 3px solid #1a1c1c; border: 3px solid #1a1c1c;
} }
@ -69,7 +69,7 @@ body {
position: absolute; position: absolute;
transform-origin: 0 0; transform-origin: 0 0;
font-size: 1.2em; font-size: 1.2em;
padding: 0 55px; padding: 0 min(6vh, 6vw);
box-sizing: border-box; box-sizing: border-box;
} }
@ -104,8 +104,9 @@ a.fullview {
} }
.fullview > div img { .fullview > div img {
float: right; float: right;
width: 120px; width: 7em;
border-radius: 80px; height: 7em;
border-radius: 7em;
border: 3px solid #1a1c1c; border: 3px solid #1a1c1c;
margin-bottom: 1em; margin-bottom: 1em;
} }