Repository: zeppelin Updated Branches: refs/heads/master 21e702c65 -> c70f29b2c
[ZEPPELIN-2573] Improve navbar style ### What is this PR for? Improved navbar style. Refer the screenshots for detail. ### What type of PR is it? [Improvement] ### Todos * [x] - Fix nav brand text font-size * [x] - Fix nav menu text font-weight * [x] - Removed icon for search input * [x] - Fix bug in notebook menu (focus state remains after it's closed) ### What is the Jira issue? [ZEPPELIN-2573](https://issues.apache.org/jira/browse/ZEPPELIN-2573) ### How should this be tested? 1. Build Zeppelin: ` mvn clean package -DskipTests; ./bin/zeppelin-daemon.sh restart` 2. Open the main page ### Screenshots (if appropriate) #### Before: Navbar Style  #### After: Navbar Style  ### Questions: * Does the licenses files need update? - NO * Is there breaking changes for older versions? - NO * Does this needs documentation? - NO Author: 1ambda <[email protected]> Closes #2355 from 1ambda/ZEPPELIN-2573/improve-navbar and squashes the following commits: a470b94 [1ambda] fix: Set proper css for navbar in small browser 75f9980 [1ambda] fix: Add username comment in navbar.css a880268 [1ambda] fix: DON'T use :focus for notebook menu 4ae922a [1ambda] fix: Move username related css into navbar 05f63f3 [1ambda] fix: Update search input in navbar 1e574f0 [1ambda] feat: Set font style in navbar f563d9e [1ambda] fix: Move navbar related style to navbar.css Project: http://git-wip-us.apache.org/repos/asf/zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/zeppelin/commit/c70f29b2 Tree: http://git-wip-us.apache.org/repos/asf/zeppelin/tree/c70f29b2 Diff: http://git-wip-us.apache.org/repos/asf/zeppelin/diff/c70f29b2 Branch: refs/heads/master Commit: c70f29b2c065bcc8b818840e80e40d3c979c6877 Parents: 21e702c Author: 1ambda <[email protected]> Authored: Thu May 25 18:24:38 2017 +0900 Committer: Lee moon soo <[email protected]> Committed: Sun May 28 09:30:36 2017 +0900 ---------------------------------------------------------------------- zeppelin-web/src/app/home/home.css | 107 +------------- zeppelin-web/src/components/navbar/navbar.css | 154 +++++++++++++++++++- zeppelin-web/src/components/navbar/navbar.html | 63 ++++---- 3 files changed, 184 insertions(+), 140 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/zeppelin/blob/c70f29b2/zeppelin-web/src/app/home/home.css ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/home/home.css b/zeppelin-web/src/app/home/home.css index 6c82253..03ae4c1 100644 --- a/zeppelin-web/src/app/home/home.css +++ b/zeppelin-web/src/app/home/home.css @@ -32,14 +32,14 @@ body { background: white; } -.displayNavBar { - display: inline !important; -} - body.asIframe { padding-top: 0; } +.displayNavBar { + display: inline !important; +} + body .navbar { margin-bottom: 0; } @@ -59,58 +59,6 @@ body .navbar { text-decoration: none; } -.navbar-inverse { - background: #3071a9; - color: #fff; - border-color: #3071a9; - font-size: 18px; -} - -.navbar-inverse .navbar-nav > .open > a, -.navbar-inverse .navbar-nav > .open > a:hover, -.navbar-inverse .navbar-nav > .open > a:focus { - color: #fff; - background: #3071a9; -} - -.navbar-inverse .navbar-toggle:hover, -.navbar-inverse .navbar-toggle:focus { - background: #3071a9; -} - -.navbar-inverse .navbar-nav > li > a:hover, -.navbar-inverse .navbar-nav > li > a:focus { - color: #fff; - background: rgba(0, 0, 0, 0.2); - -} - -.navbar-inverse .navbar-toggle { - border-color: #FFFFFF; -} - -.navbar-inverse .navbar-nav > .active > a, -.navbar-inverse .navbar-nav > .active > a:hover, -.navbar-inverse .navbar-nav > .active > a:focus { - color: #fff; - background: #080808; -} - -.navbar-inverse .navbar-nav > li > a { - color: #FFFFFF; -} - -.navbar-inverse .navbar-brand { - color: #fff; - text-decoration: none; - font-family: 'Patua One', cursive; - font-size: 32px; -} - -a.navbar-brand:hover { - color: #fff !important; -} - /* Css for the Notebook Dropdown */ .expandable ul { @@ -248,45 +196,6 @@ a.navbar-brand:hover { border-radius:6px 0 6px 6px; } -@media (max-width: 767px) { - .navbar-inverse .navbar-nav .open .dropdown-menu > li > a, - #notebook-list li a { - color: #D3D3D3; - } - - .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a, - #notebook-list li a { - padding: 5px 15px 5px 25px; - line-height: 20px; - } - - .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a { - color: #D3D3D3; - } - - .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a:hover, - .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a:focus, - #notebook-list li a:hover { - color: #fff; - background: transparent; - } - - .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > .active > a, - .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > .active > a:hover, - .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > .active > a:focus { - color: #fff; - background: #080808; - } - - .navbar-inverse .navbar-nav .open .dropdown-menu .divider { - background: #3071A9; - } - - .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { - border-color: #3071A9; - } -} - #main { padding: 10px; height: 100%; @@ -335,14 +244,6 @@ a.navbar-brand:hover { border-color: #357ebd; } -.username { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 120px; - display: inline-block; -} - .server-connected { padding-top: 12px; color: #00CC00; http://git-wip-us.apache.org/repos/asf/zeppelin/blob/c70f29b2/zeppelin-web/src/components/navbar/navbar.css ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/components/navbar/navbar.css b/zeppelin-web/src/components/navbar/navbar.css index ebd813c..d825c67 100644 --- a/zeppelin-web/src/components/navbar/navbar.css +++ b/zeppelin-web/src/components/navbar/navbar.css @@ -12,22 +12,60 @@ * limitations under the License. */ -#searchTermId { - min-width: 200px; +/* ------------------------------------------- */ +/* Navbar +/* ------------------------------------------- */ + +.navbar-title { + font-family: 'Patua One', cursive; + font-size: 25px; + color: white; + margin-top: 7px; + margin-right: 20px; + display: inline-block; +} + +.navbar-menu { + font-weight: 300; + font-size: 16px; +} + +.navbar-inverse .navbar-nav > li > a.navbar-menu-notebook:focus { + background-color: transparent; +} + +.navbar-inverse .navbar-nav > li > a.navbar-menu-notebook:hover{ + background-color: rgba(0, 0, 0, 0.2); +} + +.navbar-inverse .navbar-nav > li > a { + padding-top: 16px; +} + +.navbar-logo { + padding-right: 10px; +} + +.navbar-search { + font-size: 14px; + font-family: 'FontAwesome', 'Helvetica Neue', Helvetica, Arial, sans-serif; } +#navbar-search { + min-width: 170px; +} @media (min-width: 795px) and (max-width: 830px) { - input#searchTermId { - width: 170px; - min-width: 170px; + #navbar-search { + width: 150px; + min-width: 150px; } } @media (min-width: 768px) and (max-width: 794px) { - input#searchTermId { - width: 140px; - min-width: 140px; + #navbar-search { + width: 130px; + min-width: 130px; } } @@ -42,6 +80,106 @@ .navbar-fixed-top.headroom--unpinned { top: -100px; } .navbar-fixed-top.headroom--pinned { top: 0; /** `navbar` top */ } +.navbar-inverse { + background: #3071a9; + color: #fff; + border-color: #3071a9; + font-size: 18px; +} + +.navbar-inverse .navbar-nav > .open > a, +.navbar-inverse .navbar-nav > .open > a:hover, +.navbar-inverse .navbar-nav > .open > a:focus { + color: #fff; + background: #3071a9; +} + +.navbar-inverse .navbar-toggle:hover, +.navbar-inverse .navbar-toggle:focus { + background: #3071a9; +} + +.navbar-inverse .navbar-nav > li > a:hover, +.navbar-inverse .navbar-nav > li > a:focus { + color: #fff; + background: rgba(0, 0, 0, 0.2); +} + +.navbar-inverse .navbar-toggle { + border-color: transparent; +} + +.navbar-inverse .navbar-nav > .active > a, +.navbar-inverse .navbar-nav > .active > a:hover, +.navbar-inverse .navbar-nav > .active > a:focus { + color: #fff; + background: #080808; +} + +.navbar-inverse .navbar-nav > li > a { + color: #FFFFFF; +} + +.navbar-inverse .navbar-brand { + color: #fff; + text-decoration: none; + font-family: 'Patua One', cursive; + font-size: 32px; +} + +a.navbar-brand:hover { + color: #fff !important; +} + +@media (max-width: 767px) { + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a, + #notebook-list li a { + color: #ecf0f1; + } + + .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a, + #notebook-list li a { + padding: 5px 15px 5px 25px; + line-height: 20px; + } + + .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a { + color: #D3D3D3; + } + + .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > li > a:focus, + #notebook-list li a:hover { + color: #fff; + background: transparent; + } + + .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > .active > a, + .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > .active > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > .scrollbar-container > .active > a:focus { + color: #fff; + background: #080808; + } + + .navbar-inverse .navbar-nav .open .dropdown-menu .divider { + background: #3071A9; + } + + .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { + border-color: #3071A9; + } +} + +.username { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 120px; + display: inline-block; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + + /* About Dialog */ .modal-header-about { http://git-wip-us.apache.org/repos/asf/zeppelin/blob/c70f29b2/zeppelin-web/src/components/navbar/navbar.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/components/navbar/navbar.html b/zeppelin-web/src/components/navbar/navbar.html index a766ea9..cbff368 100644 --- a/zeppelin-web/src/components/navbar/navbar.html +++ b/zeppelin-web/src/components/navbar/navbar.html @@ -20,18 +20,31 @@ limitations under the License. <span class="icon-bar"></span> <span class="icon-bar"></span> </button> - <a class="navbar-brand" href="#/"> - <img style="margin-top: -7px;" src="assets/images/zepLogoW.png" width="50" alt="I'm zeppelin" /> Zeppelin + <!-- title --> + <a class="navbar-brand navbar-logo" href="#/"> + <img style="margin-top: -7px;" src="assets/images/zepLogoW.png" width="50" alt="Zeppelin" /> + </a> + <a class="" href="#/"> + <span class="navbar-title">Zeppelin</span> </a> </div> <div class="collapse navbar-collapse" ng-controller="NavCtrl as navbar"> <ul class="nav navbar-nav" ng-if="ticket"> + <!-- menu: Notebook --> <li class="dropdown notebook-list-dropdown" uib-dropdown> - <a href="#" class="dropdown-toggle" data-toggle="dropdown" uib-dropdown-toggle>Notebook <span class="caret"></span></a> + <a href="#" class="navbar-menu navbar-menu-notebook dropdown-toggle" + data-toggle="dropdown" uib-dropdown-toggle> + <span>Notebook</span> + <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> - <li ng-controller="NotenameCtrl as notenamectrl"><a href="" data-toggle="modal" data-target="#noteNameModal" ng-click="notenamectrl.getInterpreterSettings()"><i class="fa fa-plus"></i> Create new note</a></li> - <li class="divider"></li> + <li ng-controller="NotenameCtrl as notenamectrl"> + <a href="" data-toggle="modal" data-target="#noteNameModal" ng-click="notenamectrl.getInterpreterSettings()"> + <i class="fa fa-plus"></i> + Create new note + </a> + </li> + <li class="divider hidden-xs"></li> <div id="notebook-list" class="scrollbar-container" ng-if="isDrawNavbarNoteList"> <li class="filter-names" ng-include="'components/filterNoteNames/filter-note-names.html'"></li> <div ng-if="!query.q || query.q === ''"> @@ -47,36 +60,28 @@ limitations under the License. </div> </ul> </li> - <li><a href="#/jobmanager">Job</a></li> + <!-- menu: Job --> + <li> + <a class="navbar-menu navbar-menu-job" href="#/jobmanager"> + <span>Job</span> + </a> + </li> </ul> <ul class="nav navbar-nav navbar-right" style="margin-right:5px;"> <li class="nav-component" ng-if="ticket"> - <!--TODO(bzz): move to Typeahead https://angular-ui.github.io/bootstrap --> <form role="search" data-ng-model="navbar.searchForm" - style="display: inline-block; margin: 0px" - class="navbar-form" - ng-submit="navbar.search(navbar.searchForm.searchTerm)"> - <div class="input-group"> - <input - type="text" - ng-model="navbar.searchForm.searchTerm" - id="searchTermId" - ng-disabled="!navbar.connected" - class="form-control" - placeholder="Search your Notes" - /> - <span class="input-group-btn"> - <button - type="submit" - class="btn btn-default" - ng-disabled="!navbar.connected || !navbar.searchForm.searchTerm" - > - <i class="glyphicon glyphicon-search"></i> - </button> - </span> - </div> + style="display: inline-block; margin: 0px" + class="navbar-form" + ng-submit="navbar.search(navbar.searchForm.searchTerm)"> + <input + type="text" + ng-model="navbar.searchForm.searchTerm" + ng-disabled="!navbar.connected" + id="navbar-search" + class="form-control navbar-search" + placeholder=" Search" /> </form> </li> <li style="margin-left: 10px;">
