Style build container box; add check mark to active build18516-collapse-build-tabs

3 files changed, 31 insertions, 3 deletions

diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 3fa4a22258d..015fe3debf9 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -222,3 +222,7 @@ header.header-pinned-nav {
     padding-right: $sidebar_collapsed_width;
   }
 }
+
+.right-sidebar {
+  border-left: 1px solid $border-color;
+}
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index f22b5fb84f8..d910ec0ccc9 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -101,7 +101,6 @@
 
 .right-sidebar.build-sidebar {
   padding: $gl-padding 0;
-  border-left: 1px solid $border-color;
 
   &.right-sidebar-collapsed {
     display: none;
@@ -133,13 +132,19 @@
 
   .build-dropdown {
     padding: 0 $gl-padding;
+
+    .dropdown-menu-toggle {
+      margin-top: 8px;
+    }
   }
 
   .builds-container {
-    margin: $gl-padding 0;
+    margin-top: $gl-padding;
     background-color: $white-light;
     border-top: 1px solid $border-color;
     border-bottom: 1px solid $border-color;
+    max-height: 300px;
+    overflow: scroll;
 
     svg {
       position: relative;
@@ -150,7 +155,11 @@
 
     a {
       display: block;
-      padding: $gl-padding 10px;
+      padding: $gl-padding 10px $gl-padding 40px;
+      width: 270px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
       &:hover {
         background-color: $row-hover;
@@ -159,8 +168,21 @@
     }
 
     .build-job {
+      position: relative;
+
+      .fa {
+        position: absolute;
+        left: 15px;
+        top: 20px;
+        display: none;
+      }
+
       &.active {
         font-weight: bold;
+
+        .fa {
+          display: block;
+        }
       }
     }
   }
diff --git a/app/views/projects/builds/_sidebar.html.haml b/app/views/projects/builds/_sidebar.html.haml
index 726c816716c..5b0b58e087b 100644
--- a/app/views/projects/builds/_sidebar.html.haml
+++ b/app/views/projects/builds/_sidebar.html.haml
@@ -15,6 +15,7 @@
   - statuses = ["failed", "pending", "running", "canceled", "success", "skipped"]
   - if builds.size > 1
     .dropdown.build-dropdown
+      .build-light-text Stage
       %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
         %span.stage-selection More
         = icon('caret-down')
@@ -28,6 +29,7 @@
         - builds.select{|build| build.status == build_status}.each do |build|
           .build-job{class: ('active' if build == @build), data: {stage: build.stage}}
             = link_to namespace_project_build_path(@project.namespace, @project, build) do
+              = icon('check')
               = ci_icon_for_status(build.status)
               %span
                 - if build.name