Implement mobile-friendly menu

awx/ui/static/js/main-menu/main-menu.directive.js

@@ -20,7 +20,7 @@ function link(scope, element, attrs) {
 export default function() {
     return {
         restrict: 'E',
-        template: '<nav class="Menu Menu--main Menu--fixed-top" ng-include="menuStylePartialUrl"></nav>',
+        templateUrl: '/static/js/main-menu/main-menu.partial.html',
         scope: {
             style: '&menuStyle'
         },

awx/ui/static/js/main-menu/main-menu.partial.html

@@ -0,0 +1,7 @@
+<nav class="Menu Menu--main Menu--fixed-top">
+    <a href="#/home" title="Home" class="MenuItem MenuItem--logo">
+        <img id="ansible-brand-logo" class="MenuItem-logo" src="/static/img/TowerLogo.svg">
+        <menu-toggle-button width="15" height="15" bar-height="2"></menu-toggle-button>
+    </a>
+    <include-partial ng-include="menuStylePartialUrl"></include-partial>
+</nav>

awx/ui/static/js/main-menu/main.js

@@ -1,9 +1,13 @@
 import mainMenu from './main-menu.directive';
 import menuItem from './menu-item.directive';
+import menuToggle from './menu-toggle.directive';
 import portalModeLink from './portal-mode-link.directive';
 
+import includePartial from 'tower/shared/include-partial/main';
+
 export default
-    angular.module('mainMenu', [])
+    angular.module('mainMenu', [includePartial.name])
         .directive('portalModeLink', portalModeLink)
         .directive('menuItem', menuItem)
+        .directive('menuToggleButton', menuToggle)
         .directive('mainMenu', mainMenu);

awx/ui/static/js/main-menu/menu-default.partial.html

@@ -1,6 +1,3 @@
-<a menu-item href="/" title="Home" class="MenuItem MenuItem--logo">
-    <img id="ansible-brand-logo" class="MenuItem-logo" src="/static/img/TowerLogo.svg">
-</a>
 <a menu-item href="#/projects" title="Projects" class="MenuItem MenuItem--hoverable">
     <img src="/static/img/Projects.svg" class="MenuItem-hover-icon">
     Projects
@@ -19,12 +16,15 @@
 </a>
 <a href="#/setup" class="MenuItem MenuItem--right MenuItem--fixed" title="Setup">
     <img src="/static/img/Setup.svg" class="MenuItem-icon">
+    <span class="MenuItem-helpTitle">Setup</span>
 </a>
 <a portal-mode-link class="MenuItem MenuItem--fixed" title="Portal Mode">
     <img src="/static/img/PortalMode.svg" class="MenuItem-icon">
+    <span class="MenuItem-helpTitle">Portal Mode</span>
 </a>
 <a href="#/logout" title="Sign out" class="MenuItem MenuItem--fixed">
   <img src="/static/img/Signout.svg" class="MenuItem-icon">
+    <span class="MenuItem-helpTitle">Sign Out</span>
 </a>
 <a href="#setup" class="MenuItem MenuItem--setup" title="Setup">
   Setup

awx/ui/static/js/main-menu/menu-minimal.partial.html

@@ -1,7 +1,4 @@
-<a href="#portal" title="Home" class="MenuItem MenuItem--logo">
+<a href="#portal" title="Portal" class="MenuItem MenuItem--hoverable">
-    <img id="ansible-brand-logo" class="MenuItem-logo" src="/static/img/TowerLogo.svg">
-</a>
-<a href="#portal" title="Portal" class="MenuItem">
     Portal
 </a>
 <a portal-mode-link class="MenuItem MenuItem--right MenuItem--fixed" title="Portal Mode">

awx/ui/static/js/main-menu/menu-toggle.directive.js

@@ -0,0 +1,19 @@
+export default function() {
+    return {
+        templateUrl: '/static/js/main-menu/menu-toggle.partial.html',
+        restrict: 'E',
+        scope: {
+            width: '@',
+            height: '@',
+            barHeight: '@'
+        },
+        link: function(scope, element, attrs) {
+            element.on("click", function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                $(".Menu--main").toggleClass("Menu--open");
+                element.toggleClass("MenuToggle--open");
+            });
+        }
+    };
+}

awx/ui/static/js/main-menu/menu-toggle.partial.html

@@ -0,0 +1,9 @@
+<button menu-toggle class="Menu-toggle MenuToggle Button--pseudo">
+    <svg class="MenuToggle-icon" width="12" height="10">
+        <rect class="MenuToggle-bar MenuToggle-topBar" x="0" y="0" width="100%" height="2" />
+        <rect class="MenuToggle-bar MenuToggle-crossBar1" x="0" y="4" width="100%" height="2" />
+        <rect class="MenuToggle-bar MenuToggle-crossBar2" x="0" y="4" width="100%" height="2" />
+        <rect class="MenuToggle-bar MenuToggle-bottomBar" x="0" y="8" width="100%" height="2" />
+    </svg>
+</button>
+

awx/ui/static/js/setup-menu/setup-menu.block.less

@@ -7,7 +7,9 @@
     justify-content: flex-start;
     background-color: #EDEDED;
     flex-wrap: wrap;
-    margin-top: -2.8rem;
+    @media screen and (min-width: 571px) {
+        margin-top: -2.8rem;
+    }
 
     &-block {
         display: flex;

awx/ui/static/js/shared/include-partial/main.js

@@ -0,0 +1,5 @@
+import includePartial from './include-partial.directive';
+
+export default
+    angular.module('includePartial', [])
+        .directive('includePartial', includePartial);

awx/ui/static/js/shared/menu/menu-item.block.less

@@ -10,13 +10,25 @@
   min-width: 9.2rem;
 
   &--fixed {
+    @media screen and (max-width: 570px) {
+      flex: 1 0 100% !important;
+      justify-content: center;
+    }
       flex: none;
       min-width: 0;
       margin-right: 0 !important;
   }
 
+  &-helpTitle {
+    @media screen and (min-width: 571px) {
+      display: none;
+    }
+  }
+
   &--logo {
-      width: 202px;
+    @media screen and (max-width: 570px) {
+      justify-content: center;
+    }
   }
 
   &--active {
@@ -31,15 +43,20 @@
   }
 
   &--hoverable {
-    transition: background-color 0.3s;
     flex-direction: column;
     justify-content: center;
+    transition: background-color 0.3s;
     .MenuItem-hover-icon {
-        display: flex;
+      height: 22px;
-        opacity: 0;
+    }
-        height: 0;
+    @media screen and (min-width: 571px) {
-        width: auto;
+      .MenuItem-hover-icon {
-        transition: opacity 0.3s ease-out, height 0.2s ease-out;
+          display: flex;
+          opacity: 0;
+          height: 0;
+          width: auto;
+          transition: opacity 0.3s ease-out, height 0.2s ease-out;
+      }
     }
     &:hover {
         background-color: rgba(255,255,255,0.35);
@@ -64,7 +81,11 @@
   }
 
   &--right {
+    // Push this and all following elements to the right
     margin-left: auto;
+    @media screen and (max-width: 570px) {
+      margin-left: 0;
+    }
   }
 
   &--setup {
@@ -90,11 +111,17 @@
   &-logo {
     height: 34px;
     width: auto;
+    @media screen and (max-width: 570px) {
+        height: 25px;
+    }
   }
 
   &-icon {
       height: 13px;
       width: auto;
+      @media screen and (max-width: 570px) {
+        margin-right: 1.4rem;
+      }
   }
 
 }

awx/ui/static/js/shared/menu/menu-toggle.block.less

@@ -0,0 +1,33 @@
+/** @define MenuToggle */
+
+.MenuToggle {
+
+    &-icon {
+        // Override settings (on svg tag) from nv.d3.css that really
+        // shouldn't be there, but are, so meh.
+        display: inherit;
+        width: inherit;
+        height: inherit;
+        // border: solid thin white;
+    }
+
+    &-bar {
+        fill: #000;
+        transition: transform 0.25s cubic-bezier(.96,-0.6,.27,1.68), opacity 0.25s;
+        transform: rotate(0deg);
+        transform-origin: center center;
+    }
+
+
+    &--open {
+        .MenuToggle-crossBar1 {
+            transform: rotate(45deg);
+        }
+        .MenuToggle-topBar, .MenuToggle-bottomBar {
+            opacity: 0;
+        }
+        .MenuToggle-crossBar2 {
+            transform: rotate(-45deg);
+        }
+    }
+}

awx/ui/static/js/shared/menu/menu.block.less

@@ -18,6 +18,30 @@
             margin-right: 0;
           }
       }
+
+      @media screen and (max-width: 570px) {
+        position: relative;
+        transition: height 1s;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        height: 56px;
+        overflow: hidden;
+
+        &.Menu--open {
+          height: 348px !important;
+        border-bottom: solid thin black;
+        }
+
+        .MenuItem {
+          flex: 1 0 50%;
+          padding: 0;
+          margin-right: 0;
+
+          &--logo {
+            flex: 2 0 100%;
+          }
+        }
+      }
   }
 
   &--popup {
@@ -39,13 +63,21 @@
     }
   }
 
+  &-toggle {
+    @media screen and (min-width: 571px) {
+      display: none;
+    }
+  }
+
   &--fixed-top {
-    width: 100%;
+    // @media screen and (min-width: 571px) {
-    z-index: 1040;
+      width: 100%;
-    position: fixed;
+      z-index: 1040;
-    right: 0;
+      position: fixed;
-    left: 0;
+      right: 0;
-    top: 0;
+      left: 0;
+      top: 0;
+    // }
   }
 
 }

awx/ui/static/less/main-layout.less

@@ -10,8 +10,8 @@
 body {
     font-family: 'Open Sans', sans-serif;
     font-weight: 400;
-    padding-top: 75px;
     color: @black;
+    padding-top: 75px;
 }
 
 #main-menu-container {