Merge pull request #96 from alexgibson/mobile-nav

[fix bug 932866] Hamburger Nav Does Not Work FFOS
mozmeao · Dec 12, 2013 · 36fcf67 · 36fcf67
2 parents 9cf92f4 + 27c7fd3
commit 36fcf67
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 64 deletions.
diff --git a/careers/base/static/css/base.css b/careers/base/static/css/base.css
@@ -140,7 +140,6 @@ body {
     background: #f5f1e8 url(/static/img/bg-sand.png) repeat;
     background: url(/static/img/bg-gradient-sand.png) repeat-x 0 0,
                 url(/static/img/bg-sand.png) repeat 0 0, #f5f1e8;
-    border-top: 2px solid #fff;
     color: #4d4e53;
     font: 14px/1.5 'Open Sans', sans-serif;
     width: 100%;
@@ -169,7 +168,7 @@ figure {
 }
 
 @media (max-width: 680px) {
-    .js-enabled body {
+    .js-enabled #wrapper {
         padding-top: 60px; /* space for fixed menu */
     }
 }
@@ -223,7 +222,7 @@ figure {
     Header
     ------------------------------------------------------------------- */
 
-.masthead-wrapper{
+.masthead-wrapper {
     border-top: 2px solid #fff;
 }
 
@@ -248,16 +247,11 @@ figure {
         -webkit-transition: -webkit-transform 0.8s;
                 transition: transform 0.8s;
     }
+
         .js-enabled .tray-open .masthead {
             left: 200px; /* moves over if tray is open to make space */
         }
 
-        .mod-csstransitions.mod-csstransforms .tray-open .masthead {
-            left: 0;
-            -webkit-transform: translate(200px);
-            transform: translate(200px);
-        }
-
     .js-enabled .masthead .contain {
         height: 60px; /* restrict menu to height of padding added to body */
         overflow: hidden;
@@ -384,28 +378,21 @@ figure {
     Tray Navigation - side nav for mobile
     ------------------------------------ */
 
-
 /* wrapper goes around content so it can be pushed over when menu opens */
+
 #wrapper {
     position: relative;
-    width: 100%;
-    overflow: hidden;
     left: 0;
     width:100%;
     overflow:hidden;
     -webkit-transition: -webkit-transform 0.8s;
             transition: transform 0.8s;
 }
+
     .tray-open #wrapper {
         left: 200px;
     }
 
-    .mod-csstransitions.mod-csstransforms .tray-open #wrapper {
-        left: 0;
-        -webkit-transform: translateX(200px);
-                transform: translateX(200px);
-    }
-
 #tray-toggle {
     position: absolute;
     bottom: 14px;
@@ -425,40 +412,36 @@ figure {
     bottom: 0;
     z-index: 101;
     display: none;
-    width: 0;
+    width: 100%;
     margin: 0;
     border: 0;
-    padding-left: 100%;
+    opacity: 0;
     background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
 }
 
     .tray-open #nav-tray-close {
          display: block;
+         left: 200px;
     }
 
 #nav-tray {
     position: fixed;
-    top: 2px;
-    left: -200px;
-    bottom: -60px;
-    z-index: 102;
+    display: none;
+    top: 0;
+    left: 0;
+    bottom: auto;
+    right: auto;
     -webkit-overflow-scrolling: touch;
     overflow: scroll;
     width: 200px;
+    height: 100%;
     box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.5);
     background-color: #4d4e53;
-    -webkit-transition: -webkit-transform 0.8s;
-            transition: transform 0.8s;
 }
 
-    .tray-open #nav-tray {
-        left: 0;
+    #nav-tray.open {
+        display: block;
     }
-    .mod-csstransitions.mod-csstransforms .tray-open #nav-tray {
-            left: -200px;
-            -webkit-transform: translateX(200px);
-            transform: translateX(200px);
-        }
 
 #nav-tray > ul {
     height: 100%;

diff --git a/careers/base/static/js/base.js b/careers/base/static/js/base.js
@@ -81,20 +81,23 @@ Mozilla.Test = (function(w, $) {
     function trayMenuInit() {
         // add toggle button
         $('#nav-main').append('<button id="tray-toggle" aria-controls="nav-tray" tabindex="0" type="button">Menu</button>');
-        $('#tray-toggle').on('click touchend' , trayMenuOpen);
+        $('#tray-toggle').on('click', trayMenuOpen);
 
         // add tray and copy nav there
         $('body').prepend('<div id="nav-tray" tabindex="-1"></div>');
-        $('#nav-main-menu').clone().attr('id', '').appendTo('#nav-tray');
+        $('#nav-main-menu').clone().attr({
+            'id': 'nav-mobile-menu',
+            'role': 'navigation'
+        }).appendTo('#nav-tray');
 
         // add close button
-        $('body').prepend('<button id="nav-tray-close" type="button">Close</button>');
-        $('#nav-tray-close').on('click touchend', trayMenuClose);
+        $('#wrapper').prepend('<button id="nav-tray-close" type="button">Close</button>');
+        $('#nav-tray-close').on('click', trayMenuClose);
 
         // capture touch on body while tray open
         document.ontouchstart = function trayMenuHandleTouch(e) {
-            if ($('body.tray-open').length) {
-                if ($(e.target).parents('#nav-tray').length === 1) {
+            if ($('body').hasClass('tray-open')) {
+                if ($(e.target).parents('#nav-mobile-menu').length === 1) {
                     // do nothing - allow interaction with tray
                 } else if ($(e.target).attr('id') === 'nav-tray-close') {
                     // close tray if button touched or swiped
@@ -106,7 +109,6 @@ Mozilla.Test = (function(w, $) {
                 }
             }
         };
-
     }
 
     function trayMenuOpen(e) {
@@ -115,34 +117,21 @@ Mozilla.Test = (function(w, $) {
             e.stopPropagation();
             e.preventDefault();
         }
-
-        // add class to body to prevent scrolling
-        $('body').addClass('freeze');
-
-        /* add class to body to display menu
-        *  FF bug #625289 prevents the transition from animating if we apply the change together,
-           so this gets a small delay
-        */
-        window.setTimeout(function trayMenuClass() {
-                $('body').addClass('tray-open');
-        }, 100);
-
+        // open menu and add class to body to prevent scrolling
+        $('body').addClass('tray-open freeze');
+        // make the nav menu visible
+        $('#nav-tray').addClass('open');
+        // remove tray open listener on toggle menu icon
+        $('#tray-toggle').off('click', trayMenuOpen);
         // move focus to newly visible menu
-        $('#nav-tray-close').focus();
+        $('#nav-main-menu').focus();
     }
 
     function trayMenuClose() {
-       // remove class from body which displays menu
-       $('body').removeClass('tray-open');
-
-       /* remove class from body that prevents scrolling
-       *  FF bug #625289 prevents the transition from animating if we apply the change together,
-          so this gets a small delay
-       */
-       window.setTimeout(function trayMenuClassRemove() {
-            $('body').removeClass('freeze');
-       }, 100);
-       $('#tray-toggle').focus();
+        // remove class from body which displays menu
+        $('body').removeClass('tray-open freeze');
+        $('#nav-tray').removeClass('open');
+        $('#tray-toggle').on('click', trayMenuOpen);
     }
 
     // trigger menu