AMBARI-21316 Log Search UI: dock navigation bar to top. (ababiichuk)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/c57329cd Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/c57329cd Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/c57329cd Branch: refs/heads/trunk Commit: c57329cd4dafc71507ef88cd2b20ae9d0e02d66d Parents: 603297a Author: ababiichuk <ababiic...@hortonworks.com> Authored: Thu Jun 1 16:08:41 2017 +0300 Committer: ababiichuk <ababiic...@hortonworks.com> Committed: Thu Jun 22 15:36:00 2017 +0300 ---------------------------------------------------------------------- .../src/app/app.component.html | 20 ++++++++++++++------ .../src/app/app.component.less | 7 +++++-- .../ambari-logsearch-web-new/src/styles.less | 3 +++ 3 files changed, 22 insertions(+), 8 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/c57329cd/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.html ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.html b/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.html index 9b44246..8b8687a 100644 --- a/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.html +++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.html @@ -15,10 +15,18 @@ limitations under the License. --> -<nav class="navbar"> - <div class="container-fluid"> - <h1 [ngClass]="{'full-flex-width': !httpClient.isAuthorized, 'navbar-left': true}">{{'common.title' | translate}}</h1> - <top-menu *ngIf="httpClient.isAuthorized" class="navbar-right"></top-menu> - </div> -</nav> +<header> + <nav class="navbar navbar-fixed-top"> + <div class="container-fluid"> + <h1 [ngClass]="{'full-flex-width': !httpClient.isAuthorized, 'navbar-left': true}">{{'common.title' | translate}}</h1> + <top-menu *ngIf="httpClient.isAuthorized" class="navbar-right"></top-menu> + </div> + </nav> +</header> + +<!-- hidden element for moving the main bar outside the fixed header --> +<div class="navbar invisible"> + <h1> </h1> +</div> + <login-form *ngIf="!httpClient.isAuthorized"></login-form> http://git-wip-us.apache.org/repos/asf/ambari/blob/c57329cd/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.less ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.less b/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.less index d8410cf..e09da49 100644 --- a/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.less +++ b/ambari-logsearch/ambari-logsearch-web-new/src/app/app.component.less @@ -15,9 +15,12 @@ * limitations under the License. */ + +@import '../styles.less'; + .navbar { border-radius: 0; - background-color: #323544; + background-color: @navbar-background-color; color: #fff; .container-fluid { @@ -28,7 +31,7 @@ h1 { flex-basis: 70%; - margin-bottom: 20px; + margin-bottom: @h1-vertical-margin; text-transform: uppercase; &.full-flex-width { http://git-wip-us.apache.org/repos/asf/ambari/blob/c57329cd/ambari-logsearch/ambari-logsearch-web-new/src/styles.less ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-web-new/src/styles.less b/ambari-logsearch/ambari-logsearch-web-new/src/styles.less index 5d5f1e3..24136fe 100644 --- a/ambari-logsearch/ambari-logsearch-web-new/src/styles.less +++ b/ambari-logsearch/ambari-logsearch-web-new/src/styles.less @@ -15,3 +15,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +@navbar-background-color: #323544; +@h1-vertical-margin: 20px;