From 851f01ddd29ada1266a84f519471cd2014f85026 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Tue, 19 Sep 2017 11:19:41 -0400
Subject: [PATCH 1/3] Add mobile menu styles and click handlers

Signed-off-by: Marliana Lara <mlara@redhat.com>
---
 awx/ui/client/legacy/styles/ansible-ui.less   |  8 ++++
 .../client/lib/components/layout/_index.less  | 43 +++++++++++++++++--
 .../components/layout/side-nav.directive.js   | 16 +++++--
 .../components/layout/side-nav.partial.html   |  4 +-
 .../src/bread-crumb/bread-crumb.block.less    |  9 ++++
 5 files changed, 72 insertions(+), 8 deletions(-)

diff --git a/awx/ui/client/legacy/styles/ansible-ui.less b/awx/ui/client/legacy/styles/ansible-ui.less
index 69655219b7..c66fff4412 100644
--- a/awx/ui/client/legacy/styles/ansible-ui.less
+++ b/awx/ui/client/legacy/styles/ansible-ui.less
@@ -2328,3 +2328,11 @@ body {
 .btn {
     text-transform: uppercase;
 }
+
+@breakpoint-sm: 700px;
+
+@media screen and (max-width: @breakpoint-sm) {
+    #content-container {
+        padding-top: 100px;
+    }
+}
\ No newline at end of file
diff --git a/awx/ui/client/lib/components/layout/_index.less b/awx/ui/client/lib/components/layout/_index.less
index 1a351d6bfd..64b07eda2c 100644
--- a/awx/ui/client/lib/components/layout/_index.less
+++ b/awx/ui/client/lib/components/layout/_index.less
@@ -83,8 +83,6 @@
     }
 
     &-side {
-        background: @at-color-side-nav-background;
-        color: @at-color-side-nav-content;
         position: fixed;
         bottom: 0;
         top: @at-height-top-side-nav-makeup;
@@ -94,11 +92,12 @@
         z-index: @at-z-index-side-nav;
 
         .at-Layout-sideNavItem {
+            background: @at-color-side-nav-background;
+            color: @at-color-side-nav-content;
             display: flex;
             cursor: pointer;
             text-transform: uppercase;
 
-
                 > i.fa {
                     padding-left: 20px;
                 }
@@ -124,6 +123,7 @@
 
         .at-Layout-sideNavSpacer {
             height: @at-height-side-nav-spacer;
+            background: @at-color-side-nav-background;
         }
 
         &--expanded {
@@ -173,3 +173,40 @@
         }
     }
 }
+
+
+@breakpoint-sm: 700px;
+
+@media screen and (max-width: @breakpoint-sm) {
+    .at-Layout {
+        &-side {
+            top: 60px;
+
+            .at-Layout-sideNavItem.at-Layout-sideNavToggle {
+                display: flex;
+                height: 40px;
+                align-items: center;
+                width: 55px;
+            }
+
+            .at-Layout-sideNavItem,
+            .at-Layout-sideNavSpacer {
+                display: none;
+            }
+
+            &--expanded {
+                width: 100vw;
+                z-index: @at-z-index-side-nav;
+
+                .at-Layout-sideNavItem,
+                .at-Layout-sideNavSpacer {
+                    display: flex;
+                }
+            }
+        }
+
+        .at-Layout-main {
+            padding-left: 0;
+        }
+    }
+}
diff --git a/awx/ui/client/lib/components/layout/side-nav.directive.js b/awx/ui/client/lib/components/layout/side-nav.directive.js
index 2b47d7a7da..e819549e83 100644
--- a/awx/ui/client/lib/components/layout/side-nav.directive.js
+++ b/awx/ui/client/lib/components/layout/side-nav.directive.js
@@ -4,14 +4,24 @@ function atSideNavLink (scope, element, attrs, ctrl) {
     scope.layoutVm = ctrl;
 }
 
-function AtSideNavController () {
-    const vm = this || {};
+function AtSideNavController ($scope) {
+    let vm = this || {};
 
     vm.isExpanded = false;
 
     vm.toggleExpansion = () => {
         vm.isExpanded = !vm.isExpanded;
-    };
+    }
+
+    document.body.onclick = (e) => {
+        if ($(e.target).parents(".at-Layout-side").length === 0) {
+            vm.isExpanded = false;
+        }
+    }
+
+    $scope.$on('$locationChangeStart', function(event) {
+        vm.isExpanded = false;
+    });
 }
 
 function atSideNav () {
diff --git a/awx/ui/client/lib/components/layout/side-nav.partial.html b/awx/ui/client/lib/components/layout/side-nav.partial.html
index c7e5130ef4..8996df899f 100644
--- a/awx/ui/client/lib/components/layout/side-nav.partial.html
+++ b/awx/ui/client/lib/components/layout/side-nav.partial.html
@@ -1,6 +1,6 @@
 <div class="at-Layout-side"
-    ng-class="{'at-Layout-side--expanded': vm.isExpanded && layoutVm.isLoggedIn}">
-        <div class="at-Layout-sideNavItem" ng-click="vm.toggleExpansion()"
+    ng-class="{'at-Layout-side--expanded': vm.isExpanded && layoutVm.isLoggedIn}" ng-show="layoutVm.isLoggedIn && !layoutVm.licenseIsMissing">
+        <div class="at-Layout-sideNavItem at-Layout-sideNavToggle" ng-click="vm.toggleExpansion()"
             ng-show="layoutVm.isLoggedIn && !layoutVm.licenseIsMissing">
                 <i class="fa fa-bars"></i>
         </div>
diff --git a/awx/ui/client/src/bread-crumb/bread-crumb.block.less b/awx/ui/client/src/bread-crumb/bread-crumb.block.less
index 8a9ac68d57..ffef6556df 100644
--- a/awx/ui/client/src/bread-crumb/bread-crumb.block.less
+++ b/awx/ui/client/src/bread-crumb/bread-crumb.block.less
@@ -85,6 +85,7 @@
 }
 
 @breadcrumb-breakpoint: 900px;
+@breakpoint-sm: 700px;
 
 @media screen and (max-width: @breadcrumb-breakpoint) {
     .BreadCrumb-menuLinkImage {
@@ -95,3 +96,11 @@
         padding: 0 21px;
     }
 }
+
+@media screen and (max-width: @breakpoint-sm) {
+    .BreadCrumb {
+        padding-left: 50px;
+        position: fixed;
+        z-index: 2;
+    }
+}
\ No newline at end of file

From 8d9ef4445ab65a8a817e2bd3aeb4bd6b5c2b92d9 Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Fri, 22 Sep 2017 11:30:21 -0400
Subject: [PATCH 2/3] Update webpack config to require webpack.test.js

---
 awx/ui/client/test/unit/karma.conf.js | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/awx/ui/client/test/unit/karma.conf.js b/awx/ui/client/test/unit/karma.conf.js
index 17f46201cb..e3343b0a00 100644
--- a/awx/ui/client/test/unit/karma.conf.js
+++ b/awx/ui/client/test/unit/karma.conf.js
@@ -1,4 +1,5 @@
 let path = require('path');
+const webpackConfig = require('../../../build/webpack.test.js');
 
 module.exports = config => {
     config.set({
@@ -30,22 +31,7 @@ module.exports = config => {
                 return '/static/partials' + filepath;
             }
         },
-        webpack: {
-            module: {
-                loaders: [
-                    {
-                        test: /\.js$/,
-                        loader: 'babel',
-                        exclude: /node_modules/
-                    },
-                    {
-                        test: /\.json$/,
-                        loader: 'json',
-                        exclude: /node_modules/
-                    },
-                ]
-            }
-        },
+        webpack: webpackConfig,
         webpackMiddleware: {
             noInfo: 'errors-only'
         }

From bb625264d47dfa086d2818384dabbf34464fa20b Mon Sep 17 00:00:00 2001
From: Marliana Lara <mlara@redhat.com>
Date: Mon, 25 Sep 2017 11:56:26 -0400
Subject: [PATCH 3/3] Move DOM event listener to directive

---
 awx/ui/client/legacy/styles/ansible-ui.less   |  8 ------
 .../client/lib/components/layout/_index.less  | 14 ++++++++---
 .../components/layout/side-nav.directive.js   | 25 +++++++++++++------
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/awx/ui/client/legacy/styles/ansible-ui.less b/awx/ui/client/legacy/styles/ansible-ui.less
index c66fff4412..b05aa51148 100644
--- a/awx/ui/client/legacy/styles/ansible-ui.less
+++ b/awx/ui/client/legacy/styles/ansible-ui.less
@@ -2327,12 +2327,4 @@ body {
 
 .btn {
     text-transform: uppercase;
-}
-
-@breakpoint-sm: 700px;
-
-@media screen and (max-width: @breakpoint-sm) {
-    #content-container {
-        padding-top: 100px;
-    }
 }
\ No newline at end of file
diff --git a/awx/ui/client/lib/components/layout/_index.less b/awx/ui/client/lib/components/layout/_index.less
index 64b07eda2c..78e7bf42b6 100644
--- a/awx/ui/client/lib/components/layout/_index.less
+++ b/awx/ui/client/lib/components/layout/_index.less
@@ -83,6 +83,7 @@
     }
 
     &-side {
+        background: @at-color-side-nav-background;
         position: fixed;
         bottom: 0;
         top: @at-height-top-side-nav-makeup;
@@ -92,7 +93,7 @@
         z-index: @at-z-index-side-nav;
 
         .at-Layout-sideNavItem {
-            background: @at-color-side-nav-background;
+            background: inherit;
             color: @at-color-side-nav-content;
             display: flex;
             cursor: pointer;
@@ -122,8 +123,8 @@
         }
 
         .at-Layout-sideNavSpacer {
+            background: inherit;
             height: @at-height-side-nav-spacer;
-            background: @at-color-side-nav-background;
         }
 
         &--expanded {
@@ -174,13 +175,13 @@
     }
 }
 
-
 @breakpoint-sm: 700px;
 
 @media screen and (max-width: @breakpoint-sm) {
     .at-Layout {
         &-side {
             top: 60px;
+            background-color: transparent;
 
             .at-Layout-sideNavItem.at-Layout-sideNavToggle {
                 display: flex;
@@ -192,6 +193,7 @@
             .at-Layout-sideNavItem,
             .at-Layout-sideNavSpacer {
                 display: none;
+                background-color: @at-color-side-nav-background;
             }
 
             &--expanded {
@@ -207,6 +209,10 @@
 
         .at-Layout-main {
             padding-left: 0;
+
+            #content-container {
+                padding-top: 100px;
+            }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/awx/ui/client/lib/components/layout/side-nav.directive.js b/awx/ui/client/lib/components/layout/side-nav.directive.js
index e819549e83..85ee926cec 100644
--- a/awx/ui/client/lib/components/layout/side-nav.directive.js
+++ b/awx/ui/client/lib/components/layout/side-nav.directive.js
@@ -2,28 +2,39 @@ const templateUrl = require('~components/layout/side-nav.partial.html');
 
 function atSideNavLink (scope, element, attrs, ctrl) {
     scope.layoutVm = ctrl;
+
+    document.on('click', (e) => {
+        if ($(e.target).parents('.at-Layout-side').length === 0) {
+            scope.$emit('clickOutsideSideNav');
+        }
+    });
 }
 
-function AtSideNavController ($scope) {
+function AtSideNavController ($scope, $window) {
     let vm = this || {};
+    const breakpoint = 700;
 
     vm.isExpanded = false;
 
     vm.toggleExpansion = () => {
         vm.isExpanded = !vm.isExpanded;
-    }
+    };
 
-    document.body.onclick = (e) => {
-        if ($(e.target).parents(".at-Layout-side").length === 0) {
+    $scope.$watch('layoutVm.currentState', () => {
+        if ($window.innerWidth <= breakpoint) {
             vm.isExpanded = false;
         }
-    }
+    });
 
-    $scope.$on('$locationChangeStart', function(event) {
-        vm.isExpanded = false;
+    $scope.$on('clickOutsideSideNav', () => {
+        if ($window.innerWidth <= breakpoint) {
+            vm.isExpanded = false;
+        }
     });
 }
 
+AtSideNavController.$inject = ['$scope', '$window'];
+
 function atSideNav () {
     return {
         restrict: 'E',