From 5a5944fefbf681b7801a5395d84a0fce6214ce6c Mon Sep 17 00:00:00 2001
From: benjaminluck <bennyvandenhoogen@192.168.2.47>
Date: Mon, 5 Jun 2017 22:53:58 +0200
Subject: [PATCH 1/2] Making the top menu more like on desktop

---
 index.php                |  2 +-
 styles/css/style.css     | 75 ++---------------------------------
 styles/css/style.css.map |  2 +-
 styles/css/style.scss    | 85 ++--------------------------------------
 4 files changed, 9 insertions(+), 155 deletions(-)

diff --git a/index.php b/index.php
index 7f7b58a..bc6c31b 100644
--- a/index.php
+++ b/index.php
@@ -42,7 +42,7 @@
       <div id="track-info-text">
 
       </div>
-      <div id="actions" class="float-right hidden-xs">
+      <div id="actions" class="float-right">
         <button id="mute-btn" onclick="mutePlayer();" class="mute-btn mute-btn-unmuted"></button>
         <div id="mute-btn-muted" class="mute-btn mute-btn-muted hidden"></div>
       </div>
diff --git a/styles/css/style.css b/styles/css/style.css
index 2a358a5..c4761a2 100644
--- a/styles/css/style.css
+++ b/styles/css/style.css
@@ -57,10 +57,6 @@ body {
   .track-information #actions {
     opacity: 0;
     margin-top: -17px; }
-  @media (max-width: 480px) {
-    .track-information {
-      top: 31px;
-      left: 0px; } }
   .track-information.active {
     height: 23px; }
     .track-information.active #actions {
@@ -200,6 +196,9 @@ body {
   .menu:hover {
     width: 575px;
     height: 31px; }
+    @media (max-width: 480px) {
+      .menu:hover {
+        width: 198px; } }
   .menu ul {
     list-style: none;
     display: inline;
@@ -299,72 +298,4 @@ body {
   filter: progid:DXImageTransform.Microsoft.Shadow(Strength=38, Direction=135, Color=#000000);
   /*IE 5.5-7*/ }
 
-@media (max-width: 767px) {
-  li {
-    font-size: 1.5em;
-    color: black;
-    font-weight: 400;
-    margin-bottom: 10px;
-    padding-bottom: 10px; }
-
-  .panel {
-    -webkit-box-shadow: 0 0px 0px;
-    box-shadow: 0 0px 0px; }
-
-  .panel-body {
-    padding-left: 0px;
-    padding-right: 0px; }
-
-  /* menu styling for xs */
-  .menu {
-    overflow: hidden;
-    transition: height 1s;
-    z-index: 2;
-    top: 2.5%;
-    left: 2.5%;
-    color: black;
-    background-color: white;
-    border: 0px solid black;
-    width: 100%;
-    height: 240px; }
-
-  .menu-wrapper {
-    position: absolute;
-    z-index: 10;
-    top: 0px;
-    left: 0px; }
-
-  .menu ul {
-    width: 100%;
-    list-style: none;
-    display: inline;
-    margin: 0;
-    padding: 0; }
-  .menu li {
-    width: 100%;
-    display: inline-block;
-    list-style-type: none;
-    padding: 5px;
-    padding-right: 15px; }
-    .menu li:first-child:hover {
-      /*    color:white;
-          background-color:black; */ }
-    .menu li:nth-child(2) {
-      font-weight: 300;
-      margin-top: -10px;
-      margin-left: 0px;
-      border-right: 0px;
-      border-bottom: 1px solid black;
-      /*  color: white; */
-      /*  background-color: #000; */ }
-    .menu li:first-child {
-      font-weight: 500; }
-
-  .short {
-    height: 40px; }
-
-  .init {
-    /* only applied directly after page load */
-    height: 80px; } }
-
 /*# sourceMappingURL=style.css.map */
diff --git a/styles/css/style.css.map b/styles/css/style.css.map
index 2b533c6..d0d6b97 100644
--- a/styles/css/style.css.map
+++ b/styles/css/style.css.map
@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "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",
 "sources": ["style.scss","mixins/mediaqueries.scss"],
 "names": [],
 "file": "style.css"
diff --git a/styles/css/style.scss b/styles/css/style.scss
index 00fba57..f0a4f93 100644
--- a/styles/css/style.scss
+++ b/styles/css/style.scss
@@ -69,11 +69,6 @@ body {
     margin-top:-17px;
   }
 
-  @include mobile-only{
-    top: 31px;
-    left: 0px;
-  }
-
   &.active{
     height: 23px;
 
@@ -243,6 +238,10 @@ body {
   &:hover {
     width: 575px;
     height: 31px;
+
+    @include mobile-only{
+        width: $menu-nav-width;
+    }
   }
   ul {
     list-style: none;
@@ -365,79 +364,3 @@ body {
   filter: progid:DXImageTransform.Microsoft.Shadow(Strength=38, Direction=135, Color=#000000);
   /*IE 5.5-7*/
 }
-
-@media (max-width: 767px) {
-  li {
-    font-size: 1.5em;
-    color: black;
-    font-weight: 400;
-    margin-bottom: 10px;
-    padding-bottom: 10px;
-  }
-  .panel {
-    -webkit-box-shadow: 0 0px 0px;
-    box-shadow: 0 0px 0px;
-  }
-  .panel-body {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-  /* menu styling for xs */
-  .menu {
-    overflow: hidden;
-    transition: height 1s;
-    z-index: 2;
-    top: 2.5%;
-    left: 2.5%;
-    color: black;
-    background-color: white;
-    border: 0px solid black;
-    width: 100%;
-    height: 240px;
-  }
-  .menu-wrapper {
-    position: absolute;
-    z-index: 10;
-    top: 0px;
-    left: 0px;
-  }
-  .menu {
-    ul {
-      width: 100%;
-      list-style: none;
-      display: inline;
-      margin: 0;
-      padding: 0;
-    }
-    li {
-      &:first-child:hover {
-        /*    color:white;
-            background-color:black; */
-      }
-      &:nth-child(2) {
-        font-weight: 300;
-        margin-top: -10px;
-        margin-left: 0px;
-        border-right: 0px;
-        border-bottom: 1px solid black;
-        /*  color: white; */
-        /*  background-color: #000; */
-      }
-      &:first-child {
-        font-weight: 500;
-      }
-      width: 100%;
-      display: inline-block;
-      list-style-type: none;
-      padding: 5px;
-      padding-right: 15px;
-    }
-  }
-  .short {
-    height: 40px;
-  }
-  .init {
-    /* only applied directly after page load */
-    height: 80px;
-  }
-}

From 30a934a68b4b8eee98ce4d4637ab75121850ec09 Mon Sep 17 00:00:00 2001
From: benjaminluck <bennyvandenhoogen@192.168.2.47>
Date: Thu, 8 Jun 2017 00:59:50 +0200
Subject: [PATCH 2/2] Updated mobile menu to more resemble the desktop menu

---
 index.php                        |  2 +-
 js/components/InputController.js | 45 +++++++++++++++++++-------------
 js/components/SoundManager.js    |  4 +--
 styles/css/style.css             | 29 ++++++++++++--------
 styles/css/style.css.map         |  2 +-
 styles/css/style.scss            | 29 +++++++++++++++-----
 6 files changed, 71 insertions(+), 40 deletions(-)

diff --git a/index.php b/index.php
index bc6c31b..2dc64da 100644
--- a/index.php
+++ b/index.php
@@ -17,7 +17,7 @@
   <body>
     <header>
       <div class="menu-wrapper">
-        <div class="menu init float-left">
+        <div id="menu-elem" class="menu init float-left">
           <ul>
             <li><?= $info['release']; ?></li>
             <li><?= $info['artist']; ?></li>
diff --git a/js/components/InputController.js b/js/components/InputController.js
index cc296d7..21b40d4 100644
--- a/js/components/InputController.js
+++ b/js/components/InputController.js
@@ -14,8 +14,18 @@ function detachIOEventListeners(){
 	window.removeEventListener( 'mousewheel', onMouseWheel, false );
 }
 
+menuElem = document.getElementById('menu-elem');
+menuElem.addEventListener("touchstart", toggleMobileExpand, false);
+trackInfoElem = document.getElementById('track-information');
+trackInfoElem.addEventListener("touchstart", toggleMobileExpand, false);
+
+function toggleMobileExpand(){
+  menuElem.classList.toggle('expand-mobile');
+  trackInfoElem.classList.toggle('expand-mobile');
+}
+
 function onWindowResize() {
-  camera.aspect = window.innerWidth / window.innerHeight; 
+  camera.aspect = window.innerWidth / window.innerHeight;
   camera.updateProjectionMatrix();
   renderer.setSize( window.innerWidth, window.innerHeight );
 }
@@ -65,29 +75,28 @@ function onTouchEnd(event){
 function onTouchStart(event){
   console.log(event);
   if(event.targetTouches){
+    mouse.x = +(event.targetTouches[0].pageX / window.innerWidth) * 2 +-1;
+    mouse.y = -(event.targetTouches[0].pageY / window.innerHeight) * 2 + 1;
 
-	}else{
-		return false;
-	}
-  mouse.x = +(event.targetTouches[0].pageX / window.innerWidth) * 2 +-1;
-  mouse.y = -(event.targetTouches[0].pageY / window.innerHeight) * 2 + 1;
+    raycaster.setFromCamera( mouse, camera );
 
-  raycaster.setFromCamera( mouse, camera );
+    var intersects = raycaster.intersectObjects( scene.children[1].children, true);
 
-  var intersects = raycaster.intersectObjects( scene.children[1].children, true);
+    if ( intersects.length > 0 ) {
+    //  alert(mesh.name);
 
-  if ( intersects.length > 0 ) {
-  //  alert(mesh.name);
+      var mesh  = intersects[0].object.parent;
+      if(mesh.name == 'Cylinder'){
+        moveToDownloadPage();
+      }
+    //  console.log(intersects[0].object.parent)
+    //  alert(mesh.name);
+      SoundManager.playTrackByName(mesh.name);
 
-    var mesh  = intersects[0].object.parent;
-    if(mesh.name == 'Cylinder'){
-      moveToDownloadPage();
     }
-  //  console.log(intersects[0].object.parent)
-  //  alert(mesh.name);
-    SoundManager.playTrackByName(mesh.name);
-
-  }
+  }else{
+		return false;
+	}
 }
 
 function onDocumentMouseDown( event ) {
diff --git a/js/components/SoundManager.js b/js/components/SoundManager.js
index cbceec1..1abb367 100644
--- a/js/components/SoundManager.js
+++ b/js/components/SoundManager.js
@@ -30,7 +30,7 @@ var SoundManager = (function () {
 
 	self.displayTrackName = function(){
 		var elemWrapper = document.getElementById("track-information");
-		elemWrapper.classList = 'track-information active';
+		elemWrapper.classList.toggle('active');
 		var elem = document.getElementById("track-info-text");
 		var trackTitle = self.songs[self.currentPlayingIndex].displayName;
 		elem.innerHTML = trackTitle;
@@ -42,7 +42,7 @@ var SoundManager = (function () {
 			console.log(sounds);
 			sounds.forEach(function(sound, index){
 				if(sound.title){
-					if(self.songs[index]){  
+					if(self.songs[index]){
 						self.songs[index].displayName = sound.title;
 					}
 				}
diff --git a/styles/css/style.css b/styles/css/style.css
index c4761a2..83f521a 100644
--- a/styles/css/style.css
+++ b/styles/css/style.css
@@ -40,7 +40,7 @@ body {
       transform: rotate(-90deg); } }
 
 .track-information {
-  transition: height 0.3s ease;
+  transition: height 0.3s ease, top 0.3s ease, width 0.3s ease;
   height: 0px;
   position: absolute;
   z-index: 5;
@@ -54,6 +54,10 @@ body {
   left: 25px;
   background-color: black;
   border: none; }
+  @media (max-width: 480px) {
+    .track-information.expand-mobile {
+      width: 283px;
+      top: 88px; } }
   .track-information #actions {
     opacity: 0;
     margin-top: -17px; }
@@ -184,7 +188,7 @@ body {
 
 .menu {
   overflow: hidden;
-  transition: width 1s;
+  transition: width 0.3s, height 0.3s ease;
   z-index: 2;
   top: 25px;
   left: 25px;
@@ -193,12 +197,14 @@ body {
   border: 1px solid black;
   width: 198px;
   height: 31px; }
-  .menu:hover {
-    width: 575px;
-    height: 31px; }
-    @media (max-width: 480px) {
-      .menu:hover {
-        width: 198px; } }
+  @media only screen and (min-width: 321px) {
+    .menu:hover {
+      width: 575px;
+      height: 31px; } }
+  @media (max-width: 480px) {
+    .menu.expand-mobile {
+      width: 283px;
+      height: 63px; } }
   .menu ul {
     list-style: none;
     display: inline;
@@ -219,9 +225,10 @@ body {
       font-weight: 300;
       margin-left: -10px;
       border-right: 1px solid black;
-      padding-left: 15px;
-      /*  color: white;
-        background-color: #000; */ }
+      padding-left: 15px; }
+      @media (max-width: 480px) {
+        .menu li:nth-child(2) {
+          border-right: none; } }
   .menu a {
     color: #000; }
 
diff --git a/styles/css/style.css.map b/styles/css/style.css.map
index d0d6b97..41efa87 100644
--- a/styles/css/style.css.map
+++ b/styles/css/style.css.map
@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "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",
 "sources": ["style.scss","mixins/mediaqueries.scss"],
 "names": [],
 "file": "style.css"
diff --git a/styles/css/style.scss b/styles/css/style.scss
index f0a4f93..c03877b 100644
--- a/styles/css/style.scss
+++ b/styles/css/style.scss
@@ -1,5 +1,6 @@
 @import 'mixins/mediaqueries';
 $menu-nav-width: 198px;
+$menu-nav-expand: 283px;
 
 html {
   overflow: hidden;
@@ -49,7 +50,7 @@ body {
 }
 
 .track-information{
-  transition: height 0.3s ease;
+  transition: height 0.3s ease, top 0.3s ease, width 0.3s ease;
   height: 0px;
   position: absolute;
   z-index: 5;
@@ -64,6 +65,14 @@ body {
   background-color: black;
   border: none;
 
+
+  &.expand-mobile{
+    @include mobile-only{
+        width: $menu-nav-expand;
+        top:88px;
+    }
+  }
+
   #actions{
     opacity: 0;
     margin-top:-17px;
@@ -226,7 +235,7 @@ body {
 
 .menu {
   overflow: hidden;
-  transition: width 1s;
+  transition: width 0.3s, height 0.3s ease;
   z-index: 2;
   top: 25px;
   left: 25px;
@@ -236,11 +245,16 @@ body {
   width: $menu-nav-width;
   height: 31px;
   &:hover {
-    width: 575px;
-    height: 31px;
+    @include mobile-landscape-and-up {
+      width: 575px;
+      height: 31px;
+    }
+  }
 
+  &.expand-mobile{
     @include mobile-only{
-        width: $menu-nav-width;
+        width:  $menu-nav-expand;
+        height: 63px;
     }
   }
   ul {
@@ -263,8 +277,9 @@ body {
       margin-left: -10px;
       border-right: 1px solid black;
       padding-left: 15px;
-      /*  color: white;
-        background-color: #000; */
+      @include mobile-only{
+          border-right: none;
+      }
     }
     display: inline-block;
     list-style-type: none;