Updated mobile menu to more resemble the desktop menu

bennyvdhoogen · Jun 7, 2017 · 30a934a · 30a934a
1 parent 5a5944f
commit 30a934a
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 40 deletions.
diff --git 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
@@ -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
@@ -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
diff --git a/styles/css/style.css.map b/styles/css/style.css.map
diff --git 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;