Fix #3 - Make the full shelving always fit the screen.

agarsev · Oct 24, 2016 · b8bacac · b8bacac
1 parent 712fcc3
commit b8bacac
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -24,12 +24,12 @@
     <link rel="stylesheet" href="out/style.css" />
 </head>
 <body class="page-background">
-    <header>
+    <nav>
         <button class="page-background" id="reset" />
         <button class="page-background" id="score" />
         <button class="page-background" id="aboutButton" />
         <button id="switchLang"><span>&nbsp;</span></button>
-    </header>
+    </nav>
     <main>
     <table class="shelves-texture" id="Chronoshelves"></table>
     <div id="Drawerlayer"></div>

diff --git a/src/drawer.js b/src/drawer.js
@@ -37,13 +37,14 @@ export default class Drawer {
 
     resetPosition (dom) {
         let r = dom.getBoundingClientRect();
+        let w = this.div.clientWidth;
         removeClass(this.div, 'dropped');
         removeClass(this.div, 'wrong');
         this.correct = 0;
         this.droppedshelf = undefined;
         Shelf.deadjustDrawer(this);
-        this.div.style.left = (r.left+(r.right-r.left)*(0.05+Math.random()*0.7))+"px";
-        this.div.style.top = (r.top+(r.bottom-r.top)*(0.05+Math.random()*0.8))+"px";
+        this.div.style.left = (r.left+(r.right-r.left-w)*(0.05+Math.random()*0.95))+"px";
+        this.div.style.top = (r.top+(r.bottom-r.top)*(0.05+Math.random()*0.85))+"px";
     }
 
     dragHandler (istouch, e) {

diff --git a/src/main.js b/src/main.js
@@ -24,6 +24,22 @@ if (agedata.style) {
     document.head.appendChild(custom);
 }
 
+// Fit shelves
+
+
+function resize () {
+    if (window.innerWidth>0.75*window.innerHeight) {
+        let top = document.querySelector('nav').getBoundingClientRect().bottom;
+        let n_shelves = myShelves.root.querySelectorAll('tr').length;
+        document.body.style.fontSize = 3*(window.innerHeight-top)/n_shelves+'px';
+    } else {
+        document.body.style.fontSize = '';
+    }
+    myShelves.resize();
+}
+resize();
+window.onresize = resize;
+
 // DIALOGS
 
 let overlay = document.getElementById('overlay');

diff --git a/src/shelves.js b/src/shelves.js
@@ -26,10 +26,15 @@ export default class Shelves {
         this.drawers.forEach(x => x.resetPosition(this.layer));
 
         document.addEventListener('touchmove', this.checkTouchShelf.bind(this), false);
-        window.onresize = () => this.drawers.forEach(d => {
+    }
+
+    resize () {
+        this.drawers.forEach(d => {
             if (d.droppedshelf) {
                 d.droppedshelf.adjustDrawer(d);
                 d.droppedshelf.drop(d);
+            } else {
+                d.resetPosition(this.layer);
             }
         });
     }

diff --git a/src/style.less b/src/style.less
@@ -6,9 +6,10 @@
 @shadowcolor: rgba(0,0,0,0.5);
 @fossils: #eddebb url('../res/fossils.png') repeat;
 
-@shelfh: 4.2vh;
+@bodyspacing: 1vh;
+@shelfh: @shelfw/4;
 @shelfspace: @shelfh/6;
-@shelfw: 4*@shelfh;
+@shelfw: 1em;
 
 @import 'https://fonts.googleapis.com/css?family=Catamaran';
 
@@ -27,14 +28,16 @@
 }
 
 body {
-    padding: 2vh;
+    font-size: 20vmin;
+    padding: @bodyspacing;
     font-family: 'Catamaran', sans-serif;
 }
 
-header {
+nav {
+    padding-bottom: @bodyspacing;
     display: block;
-    width: 100%;
     text-align: center;
+    line-height: 0;
 }
 
 main {
@@ -136,10 +139,10 @@ aside {
 button {
     font-family: inherit;
     font-size: @shelfh/2;
-    padding: @shelfh/16 @shelfh/4;
-    margin: @shelfh/8;
+    padding: 0.2em 0.8em;
+    margin: 0 0.3em;
     border: 1px solid black;
-    border-radius: @shelfh/2;
+    border-radius: 0.8em;
     cursor: pointer;
     overflow: hidden;
     min-width: 3em;