Much improved mobile menu

When screen width goes below 1076px the menu disappears, being replaced by a button. Clicking the button displayed the default twitter bootstrap, which was pretty icky. Now it displays a much nicer slide in menu from the right.

awx/ui/static/js/app.js

@@ -460,6 +460,11 @@ angular.module('Tower', [
                     $(this).removeClass('active');
                 });
                 $('#ansible-main-menu #' + base).addClass('active');
+                // Apply to mobile menu as well
+                $('#ansible-mobile-menu a').each(function() {
+                    $(this).removeClass('active');
+                });
+                $('#ansible-mobile-menu a[href="#' + base + '"]').addClass('active');
             }
 
             $rootScope.browser = detectBrowser();

awx/ui/static/less/ansible-ui.less

@@ -59,6 +59,7 @@
 @import "stdout.less";
 @import "lists.less";
 @import "new-dashboard.less";
+@import "jPushMenu.less";
 
 
 /* Bootstrap fix that's causing a right margin to appear

awx/ui/static/less/jPushMenu.less

@@ -0,0 +1,176 @@
+/*********************************************
+ *  Copyright (c) 2014 AnsibleWorks, Inc.
+ *
+ *  jPushMenu.less
+ *
+ *  Custom styles for slideout menu
+ *
+ */
+.cbp-spmenu {
+    background: #E8E8E8;
+    position: fixed;
+}
+
+.cbp-spmenu h3 {
+    color: @white;
+    font-size: 14px;
+    padding: 15px 10px 15px 10px;
+    margin: 0;
+    font-weight: 600;
+    background: @grey;
+}
+
+.cbp-spmenu a {
+    display: block;
+    color: @grey-txt;
+    font-size: 1.1em;
+    font-weight: 300;
+}
+
+.cbp-spmenu a:hover {
+    background: #D8D8D8;
+    color: @black;
+}
+
+.cbp-spmenu a.active {
+    background: #E8E8E8;
+    color: @black;
+    font-weight: 600;
+}
+
+/* Orientation-dependent styles for the content of the menu */
+
+.cbp-spmenu-vertical {
+    width: 240px;
+    height: 100%;
+    top: 0;
+    z-index: 1100;
+    overflow-y:auto;
+}
+
+.cbp-spmenu-vertical a {
+    border-bottom: 1px solid #D8D8D8;
+    padding: 10px 10px 10px 20px;
+}
+
+.cbp-spmenu-horizontal {
+    width: 100%;
+    height: 150px;
+    left: 0;
+    z-index: 1000;
+    overflow: hidden;
+}
+
+.cbp-spmenu-horizontal h3 {
+    height: 100%;
+    width: 20%;
+    float: left;
+}
+
+.cbp-spmenu-horizontal a {
+    float: left;
+    width: 20%;
+    padding: 0.8em;
+    border-left: 1px solid #258ecd;
+}
+
+/* Vertical menu that slides from the left or right */
+
+.cbp-spmenu-left {
+    left: -240px;
+}
+
+.cbp-spmenu-right {
+    right: -240px;
+}
+
+.cbp-spmenu-left.cbp-spmenu-open {
+    left: 0px;
+}
+
+.cbp-spmenu-right.cbp-spmenu-open {
+    right: 0px;
+}
+
+/* Horizontal menu that slides from the top or bottom */
+
+.cbp-spmenu-top {
+    top: -150px;
+}
+
+.cbp-spmenu-bottom {
+    bottom: -150px;
+}
+
+.cbp-spmenu-top.cbp-spmenu-open {
+    top: 0px;
+}
+
+.cbp-spmenu-bottom.cbp-spmenu-open {
+    bottom: 0px;
+}
+
+/* Push classes applied to the body */
+
+.cbp-spmenu-push {
+    overflow-x: hidden;
+    position: relative;
+    left: 0;
+}
+
+.cbp-spmenu-push-toright {
+    left: 240px;
+}
+
+.cbp-spmenu-push-toleft {
+    left: -240px;
+}
+
+/* Transitions */
+
+.cbp-spmenu,
+.cbp-spmenu-push {
+    -webkit-transition: all 0.3s ease;
+    -moz-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+}
+
+/* Example media queries */
+
+@media screen and (max-width: 55.1875em){
+
+    .cbp-spmenu-horizontal {
+        font-size: 75%;
+        height: 110px;
+    }
+
+    .cbp-spmenu-top {
+        top: -110px;
+    }
+
+    .cbp-spmenu-bottom {
+        bottom: -110px;
+    }
+
+}
+
+@media screen and (max-height: 26.375em){
+
+    .cbp-spmenu-vertical {
+        font-size: 90%;
+        width: 190px;
+    }
+
+    .cbp-spmenu-left,
+    .cbp-spmenu-push-toleft {
+        left: -190px;
+    }
+
+    .cbp-spmenu-right {
+        right: -190px;
+    }
+
+    .cbp-spmenu-push-toright {
+        left: 190px;
+    }
+}

awx/ui/static/lib/jPushMenu/jPushMenu.css

@@ -0,0 +1,167 @@
+/* General styles for all menus */
+
+.cbp-spmenu {
+    background: #47a3da;
+    position: fixed;
+}
+
+.cbp-spmenu h3 {
+    color: #afdefa;
+    font-size: 1.9em;
+    padding: 20px;
+    margin: 0;
+    font-weight: 300;
+    background: #0d77b6;
+}
+
+.cbp-spmenu a {
+    display: block;
+    color: #fff;
+    font-size: 1.1em;
+    font-weight: 300;
+}
+
+.cbp-spmenu a:hover {
+    background: #258ecd;
+}
+
+.cbp-spmenu a:active {
+    background: #afdefa;
+    color: #47a3da;
+}
+
+/* Orientation-dependent styles for the content of the menu */
+
+.cbp-spmenu-vertical {
+    width: 240px;
+    height: 100%;
+    top: 0;
+    z-index: 1100;
+}
+
+.cbp-spmenu-vertical a {
+    border-bottom: 1px solid #258ecd;
+    padding: 1em;
+}
+
+.cbp-spmenu-horizontal {
+    width: 100%;
+    height: 150px;
+    left: 0;
+    z-index: 1000;
+    overflow: hidden;
+}
+
+.cbp-spmenu-horizontal h3 {
+    height: 100%;
+    width: 20%;
+    float: left;
+}
+
+.cbp-spmenu-horizontal a {
+    float: left;
+    width: 20%;
+    padding: 0.8em;
+    border-left: 1px solid #258ecd;
+}
+
+/* Vertical menu that slides from the left or right */
+
+.cbp-spmenu-left {
+    left: -240px;
+}
+
+.cbp-spmenu-right {
+    right: -240px;
+}
+
+.cbp-spmenu-left.cbp-spmenu-open {
+    left: 0px;
+}
+
+.cbp-spmenu-right.cbp-spmenu-open {
+    right: 0px;
+}
+
+/* Horizontal menu that slides from the top or bottom */
+
+.cbp-spmenu-top {
+    top: -150px;
+}
+
+.cbp-spmenu-bottom {
+    bottom: -150px;
+}
+
+.cbp-spmenu-top.cbp-spmenu-open {
+    top: 0px;
+}
+
+.cbp-spmenu-bottom.cbp-spmenu-open {
+    bottom: 0px;
+}
+
+/* Push classes applied to the body */
+
+.cbp-spmenu-push {
+    overflow-x: hidden;
+    position: relative;
+    left: 0;
+}
+
+.cbp-spmenu-push-toright {
+    left: 240px;
+}
+
+.cbp-spmenu-push-toleft {
+    left: -240px;
+}
+
+/* Transitions */
+
+.cbp-spmenu,
+.cbp-spmenu-push {
+    -webkit-transition: all 0.3s ease;
+    -moz-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+}
+
+/* Example media queries */
+
+@media screen and (max-width: 55.1875em){
+
+    .cbp-spmenu-horizontal {
+        font-size: 75%;
+        height: 110px;
+    }
+
+    .cbp-spmenu-top {
+        top: -110px;
+    }
+
+    .cbp-spmenu-bottom {
+        bottom: -110px;
+    }
+
+}
+
+@media screen and (max-height: 26.375em){
+
+    .cbp-spmenu-vertical {
+        font-size: 90%;
+        width: 190px;
+    }
+
+    .cbp-spmenu-left,
+    .cbp-spmenu-push-toleft {
+        left: -190px;
+    }
+
+    .cbp-spmenu-right {
+        right: -190px;
+    }
+
+    .cbp-spmenu-push-toright {
+        left: 190px;
+    }
+}

awx/ui/static/lib/jPushMenu/jPushMenu.js

@@ -0,0 +1,99 @@
+/*!
+ * jPushMenu.js
+ * 1.1.1
+ * @author: takien
+ * http://takien.com
+ * Original version (pure JS) is created by Mary Lou http://tympanus.net/
+ */
+
+(function($) {
+    $.fn.jPushMenu = function(customOptions) {
+        var jPushMenu,
+            o = $.extend({}, $.fn.jPushMenu.defaultOptions, customOptions);
+
+        /* add class to the body.*/
+
+        $('body').addClass(o.bodyClass);
+        $(this).addClass('jPushMenuBtn');
+        $(this).click(function() {
+            var target         = '',
+            push_direction     = '';
+
+            if($(this).is('.'+o.showLeftClass)) {
+                target         = '.cbp-spmenu-left';
+                push_direction = 'toright';
+            }
+            else if($(this).is('.'+o.showRightClass)) {
+                target         = '.cbp-spmenu-right';
+                push_direction = 'toleft';
+            }
+            else if($(this).is('.'+o.showTopClass)) {
+                target         = '.cbp-spmenu-top';
+            }
+            else if($(this).is('.'+o.showBottomClass)) {
+                target         = '.cbp-spmenu-bottom';
+            }
+
+
+            $(this).toggleClass(o.activeClass);
+            $(target).toggleClass(o.menuOpenClass);
+
+            if ($(this).is('.'+o.pushBodyClass)) {
+                $('body').toggleClass( 'cbp-spmenu-push-'+push_direction );
+            }
+
+            /* disable all other button*/
+            $('.jPushMenuBtn').not($(this)).toggleClass('disabled');
+
+            return false;
+        });
+        jPushMenu = {
+            close: function () {
+                $('.jPushMenuBtn,body,.cbp-spmenu').removeClass('disabled active cbp-spmenu-open cbp-spmenu-push-toleft cbp-spmenu-push-toright');
+            }
+        };
+
+        if (o.closeOnClickInside) {
+            $(document).click(function() {
+                jPushMenu.close();
+            });
+
+            $('.cbp-spmenu,.toggle-menu').click(function(e){
+                e.stopPropagation();
+            });
+        }
+
+        if (o.closeOnClickOutside) {
+            $(document).click(function() {
+                jPushMenu.close();
+            });
+
+            $('.cbp-spmenu,.toggle-menu').click(function(e){
+                e.stopPropagation();
+            });
+         }
+
+        // On Click Link
+        if (o.closeOnClickLink) {
+            $('.cbp-spmenu a').on('click',function(){
+                jPushMenu.close();
+            });
+        }
+    };
+   /*  in case you want to customize class name,
+    *  do not directly edit here, use function parameter when call jPushMenu.
+    */
+    $.fn.jPushMenu.defaultOptions = {
+        bodyClass       : 'cbp-spmenu-push',
+        activeClass     : 'menu-active',
+        showLeftClass   : 'menu-left',
+        showRightClass  : 'menu-right',
+        showTopClass    : 'menu-top',
+        showBottomClass : 'menu-bottom',
+        menuOpenClass   : 'cbp-spmenu-open',
+        pushBodyClass   : 'push-body',
+        closeOnClickOutside: true,
+        closeOnClickInside: true,
+        closeOnClickLink: true
+    };
+})(jQuery);

awx/ui/templates/ui/index.html

@@ -171,12 +171,30 @@
 
 </head>
 <body>
+
+    <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="ansible-mobile-menu">
+        <h3>Hello, <span ng-bind="current_user.username"></span></h3>
+        <a href="#home" id="main_home_link" >Dashboard</a></li>
+        <a href="#organizations" id="main_organizations_link">Organizations</a></li>
+        <a href="#users" id="main_users_link">Users</a></li>
+        <a href="#teams" id="main_teams_link">Teams</a></li>
+        <a href="#credentials" id="main_credentials_link">Credentials</a></li>
+        <a href="#projects" id="main_projects_link">Projects</a></li>
+        <a href="#inventories" id="main_inventories_link">Inventories</a></li>
+        <a href="#job_templates" id="main_job_templates_link">Job Templates</a></li>
+        <a href="#jobs" id="main_jobs_link">Jobs</a></li>
+        <a href="" id="main_view_user" ng-click="viewCurrentUser()">Account Settings</a></li>
+        <a href="" id="main_view_license" ng-click="viewLicense()">View License</a></li>
+        <a href="https://ansibleworks.zendesk.com/anonymous_requests/new" id="main_contact_support" target="_blank">Contact Support</a></li>
+        <a href="#/logout" id="main_logout">Logout</a>
+    </nav>
+
     <div id="main-menu-container">
         <div class="navbar navbar-default navbar-fixed-top" role="navigation">
             <div class="container-fluid">
                 <div class="navbar-header">
                     <div id="socket-beacon-div"></div>
-                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar-collapse">
+                    <button type="button" class="navbar-toggle toggle-menu menu-right" id="main-menu-toggle-button">
                       <span class="sr-only">Toggle navigation</span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
@@ -425,6 +443,11 @@
   <script src="{{ STATIC_URL }}lib/d3js/build/d3.v3.min.js"></script>
   <script src="{{ STATIC_URL }}lib/novus-nvd3/nv.d3.min.js"></script>
   <script src="{{ STATIC_URL }}lib/d3Donut/d3Donut.js"></script>
+  <script src="{{ STATIC_URL }}lib/jPushMenu/jPushMenu.js"></script>
+
+  <script>
+      $('#main-menu-toggle-button').jPushMenu();
+  </script>
 
 </body>
 </html>