AMBARI-20073. Side Nav: multiple changes based on feedback from UX - 2.(xiwang)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/d7e9ef21 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/d7e9ef21 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/d7e9ef21 Branch: refs/heads/branch-feature-AMBARI-12556 Commit: d7e9ef21dfa7bca1b91d94398b615f41908983c7 Parents: 36a01d4 Author: Xi Wang <[email protected]> Authored: Tue Feb 21 14:53:45 2017 -0800 Committer: Xi Wang <[email protected]> Committed: Tue Feb 21 14:53:52 2017 -0800 ---------------------------------------------------------------------- ambari-web/app/styles/application.less | 1 - .../app/styles/theme/bootstrap-ambari.css | 14 +++- ambari-web/app/templates/application.hbs | 76 ++++++++++---------- .../vendor/scripts/theme/bootstrap-ambari.js | 9 +++ 4 files changed, 59 insertions(+), 41 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/d7e9ef21/ambari-web/app/styles/application.less ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/application.less b/ambari-web/app/styles/application.less index befbf5a..b2a7706 100644 --- a/ambari-web/app/styles/application.less +++ b/ambari-web/app/styles/application.less @@ -69,7 +69,6 @@ ul.typeahead.dropdown-menu { overflow: visible; padding-bottom: @footer-height; min-width: 980px; - margin-left: @side-navigation-width; .clock-view { top: 10px; http://git-wip-us.apache.org/repos/asf/ambari/blob/d7e9ef21/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 5297c77..af78310 100644 --- a/ambari-web/app/styles/theme/bootstrap-ambari.css +++ b/ambari-web/app/styles/theme/bootstrap-ambari.css @@ -823,7 +823,6 @@ input.radio:checked + label:after { .navigation-bar-container ul.nav.side-nav-footer li.submenu-li > a, .navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li > a, .navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li > a { - padding: 15px 5px 15px 25px; display: table-cell; vertical-align: middle; width: 190px; @@ -868,6 +867,16 @@ input.radio:checked + label:after { color: #b8bec4; padding: 3px 5px 3px 10px; } +.navigation-bar-container ul.nav.side-nav-menu li.navigation-footer > a, +.navigation-bar-container ul.nav.side-nav-footer li.navigation-footer > a, +.navigation-bar-container ul.nav.side-nav-menu li.mainmenu-li > a, +.navigation-bar-container ul.nav.side-nav-footer li.mainmenu-li > a { + padding: 15px 5px 15px 25px; +} +.navigation-bar-container ul.nav.side-nav-menu li.submenu-li > a, +.navigation-bar-container ul.nav.side-nav-footer li.submenu-li > a { + padding: 10px 5px 10px 25px; +} .navigation-bar-container ul.nav.side-nav-menu li.navigation-footer, .navigation-bar-container ul.nav.side-nav-footer li.navigation-footer { background: #313d54; @@ -1005,6 +1014,7 @@ input.radio:checked + label:after { .navigation-bar-container ul.nav.side-nav-menu .menu-item-name, .navigation-bar-container ul.nav.side-nav-footer .menu-item-name { display: inline-block; + vertical-align: bottom; max-width: 94px; overflow: hidden; text-overflow: ellipsis; @@ -1068,7 +1078,7 @@ input.radio:checked + label:after { } .navigation-bar-container.collapsed ul.nav.side-nav-menu li.submenu-li > a, .navigation-bar-container.collapsed ul.nav.side-nav-footer li.submenu-li > a { - padding: 15px 5px 15px 25px; + padding: 10px 5px 10px 25px; width: 190px; } .navigation-bar-container.collapsed ul.nav.side-nav-menu li.active, http://git-wip-us.apache.org/repos/asf/ambari/blob/d7e9ef21/ambari-web/app/templates/application.hbs ---------------------------------------------------------------------- diff --git a/ambari-web/app/templates/application.hbs b/ambari-web/app/templates/application.hbs index 573d92b..9d6db78 100644 --- a/ambari-web/app/templates/application.hbs +++ b/ambari-web/app/templates/application.hbs @@ -21,46 +21,46 @@ {{/if}} {{#if App.router.mainController.isClusterDataLoaded}} -<div id="side-nav" class="navigation-bar"> - <div class="navigation-bar-container"> - <ul class="side-nav-header nav nav-pills nav-stacked"> - <li class="navigation-header"> - {{#if enableLinks}} - <a {{translateAttr href="topnav.logo.href"}} class="ambari-logo"> - <img src="/img/ambari-logo.png" alt="Apache Ambari" title="Apache Ambari"> - </a> - {{else}} - <a class="ambari-logo"> - <img src="/img/ambari-logo.png" alt="Apache Ambari" title="Apache Ambari"> - </a> - {{/if}} - <div class="btn-group"> - <div class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - <span class="ambari-header" title="Apache Ambari">{{t app.name}}</span> - <span class="toggle-icon glyphicon glyphicon-triangle-bottom"></span> + <div id="side-nav" class="navigation-bar"> + <div class="navigation-bar-container"> + <ul class="side-nav-header nav nav-pills nav-stacked"> + <li class="navigation-header"> + {{#if enableLinks}} + <a {{translateAttr href="topnav.logo.href"}} class="ambari-logo"> + <img src="/img/ambari-logo.png" alt="Apache Ambari" title="Apache Ambari"> + </a> + {{else}} + <a class="ambari-logo"> + <img src="/img/ambari-logo.png" alt="Apache Ambari" title="Apache Ambari"> + </a> + {{/if}} + <div class="btn-group"> + <div class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <span class="ambari-header" title="Apache Ambari">{{t app.name}}</span> + <span class="toggle-icon glyphicon glyphicon-triangle-bottom"></span> + </div> + <ul class="dropdown-menu"> + {{#if view.views.length}} + {{#each item in view.views}} + <li><a class="" href="#" {{action "setView" item target="App.router.mainViewsController"}}>{{item.label}}</a></li> + {{/each}} + {{else}} + <li class="disabled"><a href="javascript:void(null);">{{t menu.item.views.noViews}}</a></li> + {{/if}} + </ul> </div> - <ul class="dropdown-menu"> - {{#if view.views.length}} - {{#each item in view.views}} - <li><a class="" href="#" {{action "setView" item target="App.router.mainViewsController"}}>{{item.label}}</a></li> - {{/each}} - {{else}} - <li class="disabled"><a href="javascript:void(null);">{{t menu.item.views.noViews}}</a></li> - {{/if}} - </ul> - </div> - </li> - </ul> - {{view App.MainSideMenuView}} - <ul class="side-nav-footer nav nav-pills nav-stacked"> - <li class="navigation-footer"> - <a href="#" data-toggle="collapse-side-nav"> - <span class="navigation-icon icon-double-angle-left"></span> - </a> - </li> - </ul> + </li> + </ul> + {{view App.MainSideMenuView}} + <ul class="side-nav-footer nav nav-pills nav-stacked"> + <li class="navigation-footer"> + <a href="#" data-toggle="collapse-side-nav"> + <span class="navigation-icon icon-double-angle-left"></span> + </a> + </li> + </ul> + </div> </div> -</div> {{/if}} <div id="main"> http://git-wip-us.apache.org/repos/asf/ambari/blob/d7e9ef21/ambari-web/vendor/scripts/theme/bootstrap-ambari.js ---------------------------------------------------------------------- diff --git a/ambari-web/vendor/scripts/theme/bootstrap-ambari.js b/ambari-web/vendor/scripts/theme/bootstrap-ambari.js index eea87c4..77973a9 100644 --- a/ambari-web/vendor/scripts/theme/bootstrap-ambari.js +++ b/ambari-web/vendor/scripts/theme/bootstrap-ambari.js @@ -35,6 +35,15 @@ $(this).addClass('navigation-bar-fit-height'); } + //set main content left margin based on the width of side-nav + var containerWidth = $navigationContainer.width(); + if (settings.moveLeftContent) { + $(settings.content).css('margin-left', containerWidth); + } + if (settings.moveLeftFooter) { + $(settings.footer).css('margin-left', containerWidth); + } + function popStateHandler() { var path = window.location.pathname + window.location.hash; $navigationContainer.find('li a').each(function (index, link) {
