Merge branch '21126-pipeline-graph-updates' into 'master'

Curved lines at top of pipeline graph

#### What does this MR do?
Adds curved lines to second-child of each column
## Are there points in the code the reviewer needs to double check?

#### Why was this MR needed?
To match the mockup

#### What are the relevant issue numbers?
Closes #21126 

#### Screenshots (if relevant)
![Screen_Shot_2016-08-26_at_9.31.49_AM](/uploads/318d3df4ce909daa0ef8ea8d989211c4/Screen_Shot_2016-08-26_at_9.31.49_AM.png)

See merge request !6033

2 files changed, 50 insertions, 7 deletions

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 9bdf0d250bb..743fe89a9f4 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -273,7 +273,7 @@
 .stage-column {
   display: inline-block;
   vertical-align: top;
-  margin-right: 50px;
+  margin-right: 65px;
 
   li {
     list-style: none;
@@ -334,9 +334,9 @@
         content: '';
         position: absolute;
         top: 50%;
-        right: -54px;
+        right: -69px;
         border-top: 2px solid $border-color;
-        width: 54px;
+        width: 69px;
         height: 1px;
       }
     }
@@ -356,22 +356,25 @@
       &::after {
         right: -20px;
         border-right: 2px solid $border-color;
-        border-radius: 0 0 50px;
+        border-radius: 0 0 15px;
       }
 
       // Left connecting curves
       &::before {
         left: -20px;
         border-left: 2px solid $border-color;
-        border-radius: 0 0 0 50px;
+        border-radius: 0 0 0 15px;
       }
     }
 
     // Connect second build to first build with smaller curved line
     &:nth-child(2) {
       &::after, &::before {
-        height: 45px;
-        top: -26px;
+        height: 29px;
+        top: -10px;
+      }
+      .curve {
+        display: block;
       }
     }
   }
@@ -390,6 +393,12 @@
           border: none;
         }
       }
+      // Remove opposite curve
+      .curve {
+        &::before {
+          display: none;
+        }
+      }
     }
   }
 
@@ -401,6 +410,39 @@
           border: none;
         }
       }
+      // Remove opposite curve
+      .curve {
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
+
+  // Curve first child connecting lines in opposite direction
+  .curve {
+    display: none;
+
+    &::before,
+    &::after {
+      content: '';
+      width: 21px;
+      height: 25px;
+      position: absolute;
+      top: -28.5px;
+      border-top: 2px solid $border-color;
+    }
+
+    &::after {
+      left: -39px;
+      border-right: 2px solid $border-color;
+      border-radius: 0 15px;
+    }
+
+    &::before {
+      right: -39px;
+      border-left: 2px solid $border-color;
+      border-radius: 15px 0 0;
     }
   }
 }
diff --git a/app/views/projects/ci/builds/_build_pipeline.html.haml b/app/views/projects/ci/builds/_build_pipeline.html.haml
index 04cbd0c3591..ebdf60ae370 100644
--- a/app/views/projects/ci/builds/_build_pipeline.html.haml
+++ b/app/views/projects/ci/builds/_build_pipeline.html.haml
@@ -1,5 +1,6 @@
 - is_playable = subject.playable? && can?(current_user, :update_build, @project)
 %li.build{class: ("playable" if is_playable)}
+  .curve
   .build-content
     - if is_playable
       = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, title: 'Play' do