AMBARI-19803. Side Nav: Long menu should be visible if longer than window height.(xiwang)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/7691d94e Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/7691d94e Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/7691d94e Branch: refs/heads/side-navigation-feature-branch Commit: 7691d94ec4092033346e41339dd2945cfbf0a588 Parents: 9a70640 Author: Xi Wang <[email protected]> Authored: Tue Jan 31 13:02:54 2017 -0800 Committer: Xi Wang <[email protected]> Committed: Fri Feb 3 15:51:20 2017 -0800 ---------------------------------------------------------------------- ambari-web/app/styles/side_navigation.less | 14 ++++++++-- .../app/styles/theme/bootstrap-ambari.css | 29 ++++++++++++++++++-- .../app/templates/main/side-menu-item.hbs | 2 +- ambari-web/app/views/main/menu.js | 2 +- 4 files changed, 39 insertions(+), 8 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/7691d94e/ambari-web/app/styles/side_navigation.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/side_navigation.less b/ambari-web/app/styles/side_navigation.less index 5e188ac..48b8699 100644 --- a/ambari-web/app/styles/side_navigation.less +++ b/ambari-web/app/styles/side_navigation.less @@ -21,11 +21,19 @@ #side-nav { position: fixed; top: 0px; - bottom: auto; + bottom: 0px; z-index: 2079; - padding-bottom: 9999px; - margin-bottom: -9999px; + .side-nav-header { + position: absolute; + top: 0px; + } + .side-nav-menu { + position: fixed; + top: 55px; + bottom: 50px; + overflow-y: auto; + } .side-nav-footer { position: fixed; bottom: 0px; http://git-wip-us.apache.org/repos/asf/ambari/blob/7691d94e/ambari-web/app/styles/theme/bootstrap-ambari.css ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/theme/bootstrap-ambari.css b/ambari-web/app/styles/theme/bootstrap-ambari.css index c3998a5..d3e6698 100644 --- a/ambari-web/app/styles/theme/bootstrap-ambari.css +++ b/ambari-web/app/styles/theme/bootstrap-ambari.css @@ -753,10 +753,13 @@ input.radio:checked + label:after { padding: 0px 0px; overflow: hidden; } +.navigation-bar-container ul.nav.side-nav-header { + width: 190px; +} .navigation-bar-container ul.nav.side-nav-header li.navigation-header { background: #313d54; padding: 15px 5px 15px 25px; - min-height: 50px; + height: 55px; } .navigation-bar-container ul.nav.side-nav-header li.navigation-header > a.ambari-logo { padding: 0px; @@ -818,6 +821,11 @@ input.radio:checked + label:after { background: #404351; color: #fff; } +.navigation-bar-container ul.nav.side-nav-menu, +.navigation-bar-container ul.nav.side-nav-footer { + background-color: #323544; + width: 190px; +} .navigation-bar-container ul.nav.side-nav-menu li, .navigation-bar-container ul.nav.side-nav-footer li { padding: 0px; @@ -860,6 +868,7 @@ input.radio:checked + label:after { .navigation-bar-container ul.nav.side-nav-menu li.navigation-footer, .navigation-bar-container ul.nav.side-nav-footer li.navigation-footer { background: #313d54; + height: 50px; } .navigation-bar-container ul.nav.side-nav-menu li.navigation-footer a .navigation-icon, .navigation-bar-container ul.nav.side-nav-footer li.navigation-footer a .navigation-icon { @@ -950,6 +959,9 @@ input.radio:checked + label:after { width: 50px; overflow: visible; } +.navigation-bar-container.collapsed ul.nav.side-nav-header { + width: 50px; +} .navigation-bar-container.collapsed ul.nav.side-nav-header li.navigation-header { padding: 15px 0px 15px 17px; } @@ -958,6 +970,10 @@ input.radio:checked + label:after { .navigation-bar-container.collapsed ul.nav.side-nav-header li.navigation-header .dropdown-menu { display: none; } +.navigation-bar-container.collapsed ul.nav.side-nav-menu, +.navigation-bar-container.collapsed ul.nav.side-nav-footer { + width: 50px; +} .navigation-bar-container.collapsed ul.nav.side-nav-menu li a, .navigation-bar-container.collapsed ul.nav.side-nav-footer li a { padding: 15px 0px 15px 17px; @@ -978,9 +994,16 @@ input.radio:checked + label:after { .navigation-bar-container.collapsed ul.nav.side-nav-footer li ul.sub-menu { display: none; width: 190px; - position: absolute; + position: fixed; left: 50px; - top: 0px; +} +.navigation-bar-container.collapsed ul.nav.side-nav-menu li ul.admin-submenu, +.navigation-bar-container.collapsed ul.nav.side-nav-footer li ul.admin-submenu { + top: 249px; +} +.navigation-bar-container.collapsed ul.nav.side-nav-menu li ul.services-submenu, +.navigation-bar-container.collapsed ul.nav.side-nav-footer li ul.services-submenu { + top: 103px; } .navigation-bar-container.collapsed ul.nav.side-nav-menu li:hover ul.sub-menu, .navigation-bar-container.collapsed ul.nav.side-nav-footer li:hover ul.sub-menu { http://git-wip-us.apache.org/repos/asf/ambari/blob/7691d94e/ambari-web/app/templates/main/side-menu-item.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/main/side-menu-item.hbs b/ambari-web/app/templates/main/side-menu-item.hbs index ca10a73..19f0a8d 100644 --- a/ambari-web/app/templates/main/side-menu-item.hbs +++ b/ambari-web/app/templates/main/side-menu-item.hbs @@ -33,7 +33,7 @@ {{view App.SideNavServiceMenuView}} {{/if}} {{#if view.isAdminItem}} - <ul class="sub-menu nav nav-pills nav-stacked"> + <ul class="admin-submenu sub-menu nav nav-pills nav-stacked"> {{#each category in view.dropdownCategories}} {{#view view.AdminDropdownItemView itemBinding="category.name"}} <a href="#" {{action "goToCategory" category.url target="view"}}>{{category.label}}</a> http://git-wip-us.apache.org/repos/asf/ambari/blob/7691d94e/ambari-web/app/views/main/menu.js ---------------------------------------------------------------------- diff --git a/ambari-web/app/views/main/menu.js b/ambari-web/app/views/main/menu.js index 45eb2b9..5cb03f5 100644 --- a/ambari-web/app/views/main/menu.js +++ b/ambari-web/app/views/main/menu.js @@ -202,7 +202,7 @@ App.SideNavServiceMenuView = Em.CollectionView.extend({ }, tagName:'ul', - classNames:[ 'sub-menu', 'nav', 'nav-pills', 'nav-stacked'], + classNames:[ 'sub-menu', 'nav', 'nav-pills', 'nav-stacked', 'services-submenu'], itemViewClass:Em.View.extend({
