AMBARI-20657. Usability: screen jumps when you scroll down (pallavkul)

contrib/views/hive20/src/main/resources/ui/app/styles/app.scss

@@ -38,7 +38,10 @@
 .main-wrapper {
   padding: 5px 0;
   background-color: #fff;
-  min-height: 100vh;
+}
+
+.top-application-header{
+  background-color: #e1e1e0;
 }
 
 .fa-1-5{
@@ -49,7 +52,7 @@
   font-size: 2em;
 }
 
-$database-search-background: lighten($body-bg, 10%);
+$database-search-background: lighten($base-bg, 10%);
 $database-search-text-color: $gray;
 .database-search, .multiple-database-search {
   color:  $database-search-text-color;
@@ -128,7 +131,7 @@ $database-search-text-color: $gray;
   }
 }
 
-$list-filter-header-background: lighten($body-bg, 10%);
+$list-filter-header-background: lighten($base-bg, 10%);
 $list-filter-text-color: $gray;
 
 .list-filter {
@@ -152,7 +155,7 @@ $list-filter-text-color: $gray;
 
 .table-list {
   .list-group-item {
-    background-color: lighten($body-bg, 10%);
+    background-color: lighten($base-bg, 10%);
   }
 }
 
@@ -174,10 +177,10 @@ $list-filter-text-color: $gray;
   }
 }
 
-$table-info-background: lighten($body-bg, 10%);
+$table-info-background: lighten($base-bg, 10%);
 .table-info {
 
-  background-color: $body-bg;
+  background-color: $base-bg;
   .table-header {
     border: 1px solid darken($table-info-background, 15%);
     p {
@@ -218,7 +221,7 @@ pre {
 }
 
 .scroll-fix {
-  background-color: lighten($body-bg, 5%);
+  background-color: lighten($base-bg, 5%);
   height: calc(100vh - 180px);
   overflow-y: scroll;
 }
@@ -718,8 +721,8 @@ pre {
 }
 
 .jobs-status {
-  border-top: 1px solid darken($body-bg, 10%);
-  border-bottom: 1px solid darken($body-bg, 10%);
+  border-top: 1px solid darken($base-bg, 10%);
+  border-bottom: 1px solid darken($base-bg, 10%);
   .strip {
     margin-top: 20px;
   }
@@ -969,4 +972,4 @@ rect.operator__box {
   position:relative;
   bottom:10px;
   right:-15px;
-}
+}

contrib/views/hive20/src/main/resources/ui/app/styles/bootstrap-overrides.scss

@@ -18,7 +18,8 @@
 
 $font-family-sans-serif: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
 
-$body-bg: #e1e1e0;
+$body-bg: #FFF;
+$base-bg: #e1e1e0;
 $border-radius-base:        3px;
 $border-radius-large:       4px;
 $border-radius-small:       2px;
@@ -26,10 +27,10 @@ $border-radius-small:       2px;
 
 // nav-tabs
 $nav-link-padding:                          10px 20px !default;
-$nav-tabs-border-color:                     darken($body-bg, 15%);
-$nav-tabs-link-hover-border-color:          darken($body-bg, 15%);
+$nav-tabs-border-color:                     darken($base-bg, 15%);
+$nav-tabs-link-hover-border-color:          darken($base-bg, 15%);
 $nav-tabs-active-link-hover-bg:             #fff;
-$nav-tabs-active-link-hover-border-color:   darken($body-bg, 15%);
+$nav-tabs-active-link-hover-border-color:   darken($base-bg, 15%);
 
 @import 'bootstrap';
 
@@ -40,18 +41,18 @@ $nav-tabs-active-link-hover-border-color:   darken($body-bg, 15%);
          &.active {
            background-color: $gray-dark;
            color: #fff;
-           border: 1px solid darken($body-bg, 15%);
+           border: 1px solid darken($base-bg, 15%);
            border-bottom: none;
            &.ember-transitioning-out {
-             background-color: $body-bg;
-             color: darken($body-bg, 50%);
+             background-color: $base-bg;
+             color: darken($base-bg, 50%);
              border: none;
            }
          }
          &.ember-transitioning-in {
            background-color: $gray-dark;
            color: #fff;
-           border: 1px solid darken($body-bg, 15%);
+           border: 1px solid darken($base-bg, 15%);
            border-bottom: none;
          }
        }
@@ -60,19 +61,19 @@ $nav-tabs-active-link-hover-border-color:   darken($body-bg, 15%);
   li {
     a {
       font-weight: bold;
-      color: darken($body-bg, 50%);
+      color: darken($base-bg, 50%);
       &.active {
         background-color: #fff;
-        border: 1px solid darken($body-bg, 15%);
+        border: 1px solid darken($base-bg, 15%);
         border-bottom: none;
         &.ember-transitioning-out {
-          background-color: $body-bg;
+          background-color: $base-bg;
           border: none;
         }
       }
       &.ember-transitioning-in {
         background-color: #fff;
-        border: 1px solid darken($body-bg, 15%);
+        border: 1px solid darken($base-bg, 15%);
         border-bottom: none;
       }
     }

contrib/views/hive20/src/main/resources/ui/app/templates/application.hbs

@@ -22,7 +22,7 @@
       {{alert-message flash=flash}}
     {{/each}}
   </div>
-  <div class="row">
+  <div class="row  top-application-header">
     <div class="col-md-12">
       {{#if serviceCheckCompleted}}
         {{top-application-bar}}