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>
<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>

9
src/display.js
View file

@ -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,

15
style.css
View file

@ -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;
}