Merge pull request #8196 from cjcenizal/improvement/scrolling-nav-ove…

…rflow Add globalNav styles that prevent the nav items from overlapping when the window is very short.
elastic · Sep 9, 2016 · 0718a94 · 0718a94
2 parents 643898b + 9ce2cd5
commit 0718a94
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 36 deletions.
diff --git a/src/ui/public/chrome/directives/global_nav/global_nav.html b/src/ui/public/chrome/directives/global_nav/global_nav.html
@@ -3,44 +3,52 @@
   ng-class="{'is-global-nav-open': isGlobalNavOpen}"
   ng-show="isVisible"
 >
+
   <!-- Logo -->
-  <li
-    ng-if="!logoBrand && !smallLogoBrand"
-    aria-label="{{ appTitle }} Logo"
-    class="logo kibana"
-  ></li>
+  <div class="global-nav__logo">
+    <li
+      ng-if="!logoBrand && !smallLogoBrand"
+      aria-label="{{ appTitle }} Logo"
+      class="logo kibana"
+    ></li>
 
-  <li
-    ng-if="logoBrand"
-    ng-style="{ 'background': logoBrand }"
-    aria-label="{{ appTitle }} Logo"
-    class="logo hidden-sm"
-  ></li>
+    <li
+      ng-if="logoBrand"
+      ng-style="{ 'background': logoBrand }"
+      aria-label="{{ appTitle }} Logo"
+      class="logo hidden-sm"
+    ></li>
 
-  <li
-    ng-if="smallLogoBrand"
-    ng-style="{ 'background': smallLogoBrand }"
-    aria-label="{{ appTitle }} Logo"
-    class="logo-small visible-sm hidden-xs"
-  ></li>
+    <li
+      ng-if="smallLogoBrand"
+      ng-style="{ 'background': smallLogoBrand }"
+      aria-label="{{ appTitle }} Logo"
+      class="logo-small visible-sm hidden-xs"
+    ></li>
+  </div>
 
-  <!-- Main apps -->
-  <app-switcher
-    chrome="chrome"
-  ></app-switcher>
+  <!-- Links -->
+  <div class="global-nav__links">
+    <!-- Main apps -->
+    <div class="global-nav__links-section">
+      <app-switcher
+        chrome="chrome"
+      ></app-switcher>
+    </div>
 
-  <!-- Bottom button -->
-  <div class="gloal-nav__bottom-links">
-    <div class="chrome-actions" kbn-chrome-append-nav-controls></div>
+    <!-- Bottom button -->
+    <div class="global-nav__links-section">
+      <div class="chrome-actions" kbn-chrome-append-nav-controls></div>
 
-    <!-- Open/close sidebar -->
-    <global-nav-link
-      class="{{ globalNavToggleButton.classes }}"
-      tooltip-content="globalNavToggleButton.tooltipContent"
-      on-click="toggleGlobalNav($event)"
-      icon="'plugins/kibana/assets/play-circle.svg'"
-      title="globalNavToggleButton.title"
-    ></global-nav-link>
+      <!-- Open/close sidebar -->
+      <global-nav-link
+        class="{{ globalNavToggleButton.classes }}"
+        tooltip-content="globalNavToggleButton.tooltipContent"
+        on-click="toggleGlobalNav($event)"
+        icon="'plugins/kibana/assets/play-circle.svg'"
+        title="globalNavToggleButton.title"
+      ></global-nav-link>
+    </div>
   </div>
 
 </nav>
diff --git a/src/ui/public/chrome/directives/global_nav/global_nav.less b/src/ui/public/chrome/directives/global_nav/global_nav.less
@@ -1,6 +1,9 @@
 
+@import (reference) "~ui/styles/mixins";
 @import (reference) "~ui/styles/variables";
 
+@global-nav-logo-height: 70px;
+
 .global-nav {
   width: @as-closed-width;
   position: fixed;
@@ -25,7 +28,7 @@
 
   .logo-small,
   .logo {
-    height: 70px;
+    height: @global-nav-logo-height;
     width: @as-open-width;
     list-style-type: none;
     &.kibana {
@@ -38,7 +41,40 @@
   }
 }
 
-  .gloal-nav__bottom-links {
-    position: absolute;
-    bottom: 0;
+  /**
+   * 1. Push main apps to the top and bottom buttons to the bottom.
+   * 2. Fill height of global nav, but respect the height of the logo.
+   * 3. Allow user to scroll to see clipped nav items when the nav is too short.
+   * 4. Style the scrollbar to look good in Chrome and Safari.
+   */
+  .global-nav__links {
+    display: flex; /* 1 */
+    flex-direction: column; /* 1 */
+    justify-content: space-between; /* 1 */
+    height: ~"calc(100% - @{global-nav-logo-height})"; /* 2 */
+    overflow-x: hidden; /* 3 */
+    overflow-y: auto; /* 3 */
+
+    &::-webkit-scrollbar { /* 4 */
+      width: 16px;
+      height: 16px;
+    }
+
+    &::-webkit-scrollbar-thumb { /* 4 */
+      background-color: #2f99c1;
+      border: 6px solid transparent;
+      background-clip: content-box;
+    }
+
+    &::-webkit-scrollbar-track { /* 4 */
+      background-color: transparent;
+    }
   }
+
+    /**
+     * 1. Prevent the top and bottom links from collapsing when the browser window is too short.
+     *    This problem is specific to Safari.
+     */
+    .global-nav__links-section {
+      flex: 0 0 auto; /* 1 */
+    }