Add job log mixins5766-add-pod-dropdown-to-pod-logs-screen

3 files changed, 115 insertions, 75 deletions

diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 0b645eb811b..f850e441001 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -232,3 +232,102 @@
   word-break: break-word;
   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, $top_position) {
+  height: $height;
+  min-height: $height;
+  background: $gray-light;
+  border: 1px solid $border-color;
+  color: $gl-text-color;
+  position: sticky;
+  position: -webkit-sticky;
+  top: $top_position;
+  padding: $grid-size;
+}
+
+/*
+* 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;
+  width: 6px;
+  height: 6px;
+  margin: auto auto 12px 2px;
+  border-radius: 50%;
+  animation: blinking-dots 1s linear infinite;
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 7808f6d3a25..00ccd8cc209 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -264,6 +264,7 @@ $row-hover-border: $blue-200;
 $progress-color: #c0392b;
 $header-height: 40px;
 $ide-statusbar-height: 25px;
+$header-height-pod-logs: 75px;
 $fixed-layout-width: 1280px;
 $limited-layout-width: 990px;
 $container-text-max-width: 540px;
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index f030189af06..49b5713c9c4 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -55,34 +55,11 @@
   }
 
   .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;
-    }
+    @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, $header-height);
 
     &.affix {
       top: $header-height;
@@ -120,50 +97,7 @@
     }
 
     .controllers {
-      display: flex;
-      font-size: 15px;
-      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);
     }
   }
 
@@ -182,12 +116,7 @@
   }
 
   .build-loader-animation {
-    position: relative;
-    width: 6px;
-    height: 6px;
-    margin: auto auto 12px 2px;
-    border-radius: 50%;
-    animation: blinking-dots 1s linear infinite;
+    @include build-loader-animation();
   }
 }
 
@@ -448,3 +377,14 @@
   right: 0;
   margin-top: -17px;
 }
+
+@include media-breakpoint-down(sm) {
+  .top-bar {
+    .truncated-info {
+      white-space: nowrap;
+      overflow: hidden;
+      max-width: 220px;
+      text-overflow: ellipsis;
+    }
+  }
+}