Skip to content

Commit 9ce2cd5

Browse files
cjcenizalcjcenizal
committed
Add globalNav styles that prevent the nav items from overlapping when the window is very short, and instead allows the user to scroll.
1 parent 0ee5d4b commit 9ce2cd5

File tree

2 files changed

+80
-36
lines changed

2 files changed

+80
-36
lines changed

‎src/ui/public/chrome/directives/global_nav/global_nav.html‎

Lines changed: 40 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,52 @@
33
ng-class="{'is-global-nav-open': isGlobalNavOpen}"
44
ng-show="isVisible"
55
>
6+
67
<!-- Logo -->
7-
<li
8-
ng-if="!logoBrand && !smallLogoBrand"
9-
aria-label="{{ appTitle }} Logo"
10-
class="logo kibana"
11-
></li>
8+
<div class="global-nav__logo">
9+
<li
10+
ng-if="!logoBrand && !smallLogoBrand"
11+
aria-label="{{ appTitle }} Logo"
12+
class="logo kibana"
13+
></li>
1214

13-
<li
14-
ng-if="logoBrand"
15-
ng-style="{ 'background': logoBrand }"
16-
aria-label="{{ appTitle }} Logo"
17-
class="logo hidden-sm"
18-
></li>
15+
<li
16+
ng-if="logoBrand"
17+
ng-style="{ 'background': logoBrand }"
18+
aria-label="{{ appTitle }} Logo"
19+
class="logo hidden-sm"
20+
></li>
1921

20-
<li
21-
ng-if="smallLogoBrand"
22-
ng-style="{ 'background': smallLogoBrand }"
23-
aria-label="{{ appTitle }} Logo"
24-
class="logo-small visible-sm hidden-xs"
25-
></li>
22+
<li
23+
ng-if="smallLogoBrand"
24+
ng-style="{ 'background': smallLogoBrand }"
25+
aria-label="{{ appTitle }} Logo"
26+
class="logo-small visible-sm hidden-xs"
27+
></li>
28+
</div>
2629

27-
<!-- Main apps -->
28-
<app-switcher
29-
chrome="chrome"
30-
></app-switcher>
30+
<!-- Links -->
31+
<div class="global-nav__links">
32+
<!-- Main apps -->
33+
<div class="global-nav__links-section">
34+
<app-switcher
35+
chrome="chrome"
36+
></app-switcher>
37+
</div>
3138

32-
<!-- Bottom button -->
33-
<div class="gloal-nav__bottom-links">
34-
<div class="chrome-actions" kbn-chrome-append-nav-controls></div>
39+
<!-- Bottom button -->
40+
<div class="global-nav__links-section">
41+
<div class="chrome-actions" kbn-chrome-append-nav-controls></div>
3542

36-
<!-- Open/close sidebar -->
37-
<global-nav-link
38-
class="{{ globalNavToggleButton.classes }}"
39-
tooltip-content="globalNavToggleButton.tooltipContent"
40-
on-click="toggleGlobalNav($event)"
41-
icon="'plugins/kibana/assets/play-circle.svg'"
42-
title="globalNavToggleButton.title"
43-
></global-nav-link>
43+
<!-- Open/close sidebar -->
44+
<global-nav-link
45+
class="{{ globalNavToggleButton.classes }}"
46+
tooltip-content="globalNavToggleButton.tooltipContent"
47+
on-click="toggleGlobalNav($event)"
48+
icon="'plugins/kibana/assets/play-circle.svg'"
49+
title="globalNavToggleButton.title"
50+
></global-nav-link>
51+
</div>
4452
</div>
4553

4654
</nav>

‎src/ui/public/chrome/directives/global_nav/global_nav.less‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11

2+
@import (reference) "~ui/styles/mixins";
23
@import (reference) "~ui/styles/variables";
34

5+
@global-nav-logo-height: 70px;
6+
47
.global-nav {
58
width: @as-closed-width;
69
position: fixed;
@@ -25,7 +28,7 @@
2528

2629
.logo-small,
2730
.logo {
28-
height: 70px;
31+
height: @global-nav-logo-height;
2932
width: @as-open-width;
3033
list-style-type: none;
3134
&.kibana {
@@ -38,7 +41,40 @@
3841
}
3942
}
4043

41-
.gloal-nav__bottom-links {
42-
position: absolute;
43-
bottom: 0;
44+
/**
45+
* 1. Push main apps to the top and bottom buttons to the bottom.
46+
* 2. Fill height of global nav, but respect the height of the logo.
47+
* 3. Allow user to scroll to see clipped nav items when the nav is too short.
48+
* 4. Style the scrollbar to look good in Chrome and Safari.
49+
*/
50+
.global-nav__links {
51+
display: flex; /* 1 */
52+
flex-direction: column; /* 1 */
53+
justify-content: space-between; /* 1 */
54+
height: ~"calc(100% - @{global-nav-logo-height})"; /* 2 */
55+
overflow-x: hidden; /* 3 */
56+
overflow-y: auto; /* 3 */
57+
58+
&::-webkit-scrollbar { /* 4 */
59+
width: 16px;
60+
height: 16px;
61+
}
62+
63+
&::-webkit-scrollbar-thumb { /* 4 */
64+
background-color: #2f99c1;
65+
border: 6px solid transparent;
66+
background-clip: content-box;
67+
}
68+
69+
&::-webkit-scrollbar-track { /* 4 */
70+
background-color: transparent;
71+
}
4472
}
73+
74+
/**
75+
* 1. Prevent the top and bottom links from collapsing when the browser window is too short.
76+
* This problem is specific to Safari.
77+
*/
78+
.global-nav__links-section {
79+
flex: 0 0 auto; /* 1 */
80+
}

0 commit comments

Comments
 (0)