add media queries and resize event handler

Author: Raphael Brand

demo/app/index.pug

@@ -9,8 +9,6 @@ html
         script(type='text/javascript', data-main='js/main', src='js/vendor/require.min.js')
     body
         .container
-          .jumbotron
-            .heading1.animation Hello World!
           canvas#canvas(width=300,height=300)
           #perspective
           #perspective_stats

demo/app/js/acceleration.js

@@ -45,9 +45,10 @@ define('acceleration', () => {
         return el.classList.remove("active");
       });
       return true;
-    }, 400) && document.querySelector('.' + code).classList.add("active");
+    }, 400) && code && document.querySelector('.' + code).classList.add("active");
     setTimeout(function () {
-      return document.querySelector('.' + code).blur();
+      if(code)
+        return document.querySelector('.' + code).blur();
     }, 400);
   };
 
@@ -99,6 +100,21 @@ define('acceleration', () => {
     return hasMoved;
   };
 
+    let toggleView = false // window.innerWidth <= 414;
+  let onWindowResize = (update) => {
+    
+    if(update)
+      toggleView = window.innerWidth <= 414;
+    
+    if(toggleView)
+        document.querySelector('.info.button').classList.add('active')
+    else
+        document.querySelector('.info.button').classList.remove('active')
+  };
+  
+  onWindowResize(false);
+
+
   var printMap = function printMap() {
     //var x, y;
     //x=0, y=0;
@@ -135,10 +151,12 @@ define('acceleration', () => {
     el.classList.remove("active"), el.blur();
     document.querySelector(".info.button").focus();
     document.querySelector(".overlay").classList.add("hidden");
+    window.addEventListener('resize', onWindowResize);
     //document.querySelector('.info.button').innerHTML += '<br>' + printMap();
   }, 500, document.querySelector(".up"));
   document.querySelector(".info.button").addEventListener("click", function (e) {
-    e.target.classList.add("active");
+    toggleView = !toggleView
+    onWindowResize(false)
   }, false);
   console.log("Legend:\n player is 2,\nfield free-to-go is 0,\nno-go is 1");
   //printMap();

demo/app/sass/acceleration.sass

@@ -30,15 +30,21 @@
     cursor: pointer
 
 .btnWrap
+  top: 10px
   overflow: hidden
   display: inline
   position: absolute
   width: calc(50% - 10px)
   right: 10px
+  min-width: 280px
+  opacity: 1
+  transition: all 1s
 
 body
   overflow: hidden
   background-color: slategray
+  padding: 7px
+  transition: background-color 1s
 
 .overlay
   position: absolute
@@ -71,23 +77,55 @@ body
 div.info.button
   font-family: 'Courier'
   cursor: pointer
-  padding: 20px
-  width: 100%
-  padding: 2px
-  height: 20px
   display: block
+  //margin: 3px
+  margin-top: 12px
+  //padding: 5px
+  height: 45px
   font-size: 1.1em
   font-stretch: 1.1em
   background-color: lightgray
-  padding-right: 0%
+  padding: 10px
   overflow: hidden
   line-height: 1.4em
   transition: all 1s
   color: #000
-
+  
+  .innerText
+    padding: 0
+    opacity: 0
+    transition: padding 2s, opacity 1s
+   
   &.active
     height: 300px
-    padding-right: 40%
     overflow-y: yes
     text-decoration: none
+    
+    .innerText
+      padding: 3px
+      opacity: 1
+
+
+@media screen and(max-width:414px)
+  body
+    background-color: #338
+  .btnWrap
+    opacity: 0.5
+    position: absolute
+    top: 40px
+  
+  div.info.button
+    min-width: 279px
+    height: 72px
+  div.info.button.active
+    color: transparent
+    height: 282px
+    .innerText
+      padding: 3px
+      color: black
+      position: relative
+      //overflow: visible
+      bottom: 62px
+      clear: both
+