Merge branch 'backport-ee-7203-sticky-logs-topbar' into 'master'

Backport ee 7203 sticky logs topbar

See merge request gitlab-org/gitlab-ce!22282

3 files changed, 100 insertions, 74 deletions

diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 1c84baf68ed..c030d75f5a4 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -250,6 +250,100 @@
   max-width: 100%;
 }
 
+/*
+* Mixin that handles the container for the job logs (CI/CD and kubernetes pod logs)
+*/
+@mixin build-trace {
+  background: $black;
+  color: $gray-darkest;
+  white-space: pre;
+  overflow-x: auto;
+  font-size: 12px;
+  border-radius: 0;
+  border: 0;
+  padding: $grid-size;
+
+  .bash {
+    display: block;
+  }
+
+  &.build-trace-rounded {
+    border-radius: $border-radius-base;
+  }
+}
+
+@mixin build-trace-top-bar($height) {
+  height: $height;
+  min-height: $height;
+  background: $gray-light;
+  border: 1px solid $border-color;
+  color: $gl-text-color;
+  position: sticky;
+  position: -webkit-sticky;
+  top: $header-height;
+  padding: $grid-size;
+
+  .with-performance-bar & {
+    top: $header-height + $performance-bar-height;
+  }
+}
+
+/*
+* Mixin that handles the position of the controls placed on the top bar
+*/
+@mixin build-controllers($control-font-size, $flex-direction, $with-grow, $flex-grow-size) {
+  display: flex;
+  font-size: $control-font-size;
+  justify-content: $flex-direction;
+  align-items: center;
+  align-self: baseline;
+  @if $with-grow {
+    flex-grow: $flex-grow-size;
+  }
+
+  svg {
+    width: 15px;
+    height: 15px;
+    display: block;
+    fill: $gl-text-color;
+  }
+
+  .controllers-buttons {
+    color: $gl-text-color;
+    margin: 0 $grid-size;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .btn-scroll.animate {
+    .first-triangle {
+      animation: blinking-scroll-button 1s ease infinite;
+      animation-delay: 0.3s;
+    }
+
+    .second-triangle {
+      animation: blinking-scroll-button 1s ease infinite;
+      animation-delay: 0.2s;
+    }
+
+    .third-triangle {
+      animation: blinking-scroll-button 1s ease infinite;
+    }
+
+    &:disabled {
+      opacity: 1;
+    }
+  }
+
+  .btn-scroll:disabled,
+  .btn-refresh:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
+}
+
 @mixin build-loader-animation {
   position: relative;
   white-space: initial;
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 227f49ec595..31b258e56dd 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -50,35 +50,13 @@
     position: relative;
   }
 
-  .build-trace {
-    background: $black;
-    color: $gray-darkest;
-    white-space: pre;
-    overflow-x: auto;
-    font-size: 12px;
-    border-radius: 0;
-    border: 0;
-    padding: $grid-size;
-
-    .bash {
-      display: block;
-    }
 
-    &.build-trace-rounded {
-      border-radius: $border-radius-base;
-    }
+  .build-trace {
+    @include build-trace();
   }
 
   .top-bar {
-    height: 35px;
-    min-height: 35px;
-    background: $gray-light;
-    border: 1px solid $border-color;
-    color: $gl-text-color;
-    position: sticky;
-    position: -webkit-sticky;
-    top: $header-height;
-    padding: $grid-size;
+    @include build-trace-top-bar(35px);
 
     &.affix {
       top: $header-height;
@@ -116,49 +94,7 @@
     }
 
     .controllers {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      svg {
-        height: 15px;
-        display: block;
-        fill: $gl-text-color;
-      }
-
-      .controllers-buttons {
-        color: $gl-text-color;
-        margin: 0 $grid-size;
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-
-      .btn-scroll.animate {
-        .first-triangle {
-          animation: blinking-scroll-button 1s ease infinite;
-          animation-delay: 0.3s;
-        }
-
-        .second-triangle {
-          animation: blinking-scroll-button 1s ease infinite;
-          animation-delay: 0.2s;
-        }
-
-        .third-triangle {
-          animation: blinking-scroll-button 1s ease infinite;
-        }
-
-        &:disabled {
-          opacity: 1;
-        }
-      }
-
-      .btn-scroll:disabled {
-        opacity: 0.35;
-        cursor: not-allowed;
-      }
+      @include build-controllers(15px, center, false, 0);
     }
   }
 
@@ -183,12 +119,8 @@
 }
 
 .with-performance-bar .build-page {
-  .top-bar {
+  .top-bar.affix {
     top: $header-height + $performance-bar-height;
-
-    &.affix {
-      top: $header-height + $performance-bar-height;
-    }
   }
 }
 
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 596fc3985b3..b7d69539eb7 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -5,7 +5,7 @@
 - else
   - search_path_url = search_path
 
-%header.navbar.navbar-gitlab.qa-navbar.navbar-expand-sm
+%header.navbar.navbar-gitlab.qa-navbar.navbar-expand-sm.js-navbar
   %a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content
   .container-fluid
     .header-content