adrian
/
coding-precarity
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Make it work on mobile devices

master
Adrian Heine 4 years ago
parent
253559bfc8
commit
4495444ec9
3 changed files with 14 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      index.html
  2. 9
      src/display.js
  3. 15
      style.css

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 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); 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.top = (target.y - 60) + 'px'
dom.style.left = (target.x - ballRadius) + '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;
height: 120px;
width: min(12vh, 12vw);
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;
border-radius: 80px;
width: 7em;
height: 7em;
border-radius: 7em;
border: 3px solid #1a1c1c; border: 3px solid #1a1c1c;
margin-bottom: 1em; margin-bottom: 1em;
} }

Write Preview
Loading…
Cancel
Save