Merge pull request #65 from sg00dwin/pf-vertical-nav-updates

Enhancements to vertical nav animation and fix primary nav vertical alignment with arrows at mobile

app/index.html

@@ -42,34 +42,36 @@
     <p ng-if="globalTechPreviewIndicator" ng-cloak class="tech-preview-banner">Technology preview is enabled</p>
     <osc-header></osc-header>
     <toast-notifications></toast-notifications>
-    <div ng-view class="container-pf-nav-pf-vertical" ng-class="{ 'collapsed-nav': nav.collapsed }">
-      <!-- Include default simple nav and shaded background as a placeholder until API discovery finishes -->
-      <!-- <nav class="navbar navbar-pf-vertical top-header" role="navigation">
-        <div row>
-          <div class="navbar-header">
-            <a class="navbar-brand" id="openshift-logo" href="./">
-              <div id="header-logo"></div>
-            </a>
-          </div>
-        </div>
-      </nav> -->
-      <div class="middle">
-        <div class="middle-content">
-          <div class="empty-state-message">
-            <h2 class="text-center" id="temporary-loading-message" style="display: none;">Loading...</h2>
-            <!-- So that we don't get the Loading... message AND the noscript message -->
-            <script>
-              document.getElementById('temporary-loading-message').style.display = "";
-            </script>
+    <div class="container-pf-nav-pf-vertical" ng-class="{ 'collapsed-nav': nav.collapsed }">
+      <div ng-view class="view">
+        <!-- Include default simple nav and shaded background as a placeholder until API discovery finishes -->
+        <!-- <nav class="navbar navbar-pf-vertical top-header" role="navigation">
+          <div row>
+            <div class="navbar-header">
+              <a class="navbar-brand" id="openshift-logo" href="./">
+                <div id="header-logo"></div>
+              </a>
+            </div>
           </div>
-          <noscript>
-            <div class="attention-message">
-              <h1>JavaScript Required</h1>
-              <p>The OpenShift web console requires JavaScript to provide a rich interactive experience. Please
-              enable JavaScript to continue. If you do not wish to enable JavaScript or are unable to do so,
-              you may use the command-line tools to manage your projects and applications instead.</p>
+        </nav> -->
+        <div class="middle">
+          <div class="middle-content">
+            <div class="empty-state-message">
+              <h2 class="text-center" id="temporary-loading-message" style="display: none;">Loading...</h2>
+              <!-- So that we don't get the Loading... message AND the noscript message -->
+              <script>
+                document.getElementById('temporary-loading-message').style.display = "";
+              </script>
             </div>
-          </noscript>
+            <noscript>
+              <div class="attention-message">
+                <h1>JavaScript Required</h1>
+                <p>The OpenShift web console requires JavaScript to provide a rich interactive experience. Please
+                enable JavaScript to continue. If you do not wish to enable JavaScript or are unable to do so,
+                you may use the command-line tools to manage your projects and applications instead.</p>
+              </div>
+            </noscript>
+          </div>
         </div>
       </div>
     </div>

app/styles/_layouts.less

@@ -41,13 +41,17 @@
   }
   .container-pf-nav-pf-vertical {
     height: 100%;
+    transition: margin-left .1s ease-in-out;
     &,
     &.collapsed-nav {
       margin-left: 0; // override PatternFly default
     }
     .middle-header {
       margin-bottom: @grid-gutter-width / 2;
     }
+    .view {
+      height: 100%;
+    }
   }
 }
 .surface-shaded {

app/styles/_vertical-nav.less

@@ -5,6 +5,7 @@
 .nav-pf-vertical {
   background-color: @nav-pf-vertical-bg-color;
   top: @navbar-os-header-mobile;
+  transition: width .1s ease-in-out, left .1s ease-in-out;
   z-index: 990;
   @media(min-width: @screen-sm-min) {
     top: @navbar-os-header-desktop;
@@ -66,9 +67,17 @@
         }
       }
       .list-group-item-value {
+        line-height: inherit;
         text-decoration: none !important;
       }
     }
+    // padding aligns arrow vertically
+    &.secondary-nav-item-pf > a:after {
+      padding: 16px 0;
+      @media(max-width: @screen-xs-max) {
+        padding: 8px 0;
+      }
+    }
   }
   &.collapsed {
     .list-group-item.secondary-nav-item-pf:hover,
@@ -81,6 +90,13 @@
       left: (@nav-pf-vertical-collapsed-width - 1); // adjust for 1px border
     }
   }
+  &.hide-mobile-nav {
+    left: -(@nav-pf-vertical-width + 2); // width + box-shadow
+  }
+  &.show-mobile-nav {
+    box-shadow: 2px 0 3px rgba(3,3,3,.15);
+    left: 0;
+  }
   .list-group-item.secondary-nav-item-pf {
     &:hover > a:after {
       color: @sidebar-os-icon-hover-color;
@@ -94,9 +110,10 @@
     background: @nav-pf-vertical-secondary-bg-color;
     border-left: 0;
     border-right: 1px solid @nav-pf-vertical-border-color;
-    top: (@project-bar-height-mobile + @navbar-os-header-mobile - 1); // adjust for 1px border
+    top:(@project-bar-height-mobile + @navbar-os-header-mobile);
+    width: @nav-pf-vertical-width + 1; // adjust for 1px border
     @media(min-width: @screen-sm-min) {
-      border-left: 1px solid @nav-pf-vertical-border-color;
+      border-left: 1px solid @nav-pf-vertical-border-color; // inset border between primary and secondary
       top: (@project-bar-height-desktop + @navbar-os-header-desktop);
     }
     .list-group-item {

app/views/_sidebar.html

@@ -1,7 +1,7 @@
 <div class="nav-pf-vertical nav-pf-vertical-with-sub-menus"
   ng-class="{
     collapsed: nav.collapsed && !isMobile,
-    hidden: !nav.showMobileNav && isMobile,
+    'hide-mobile-nav': !nav.showMobileNav && isMobile,
     'hover-secondary-nav-pf': sidebar.secondaryOpen && !isMobile,
     'show-mobile-nav': nav.showMobileNav && isMobile,
     'show-mobile-secondary': nav.showMobileNav && sidebar.showMobileSecondary && isMobile