From cc8ad60fc42e9a115da63f0e0eca71c4b2567c35 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Mon, 12 Sep 2016 12:19:20 +0200
Subject: [PATCH 01/14] Update pipeline graph styles to match mockup

---
 app/assets/javascripts/pipeline.js.es6      |  9 ++++++
 app/assets/stylesheets/pages/pipelines.scss | 36 ++++++++++++---------
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6
index 8813bb5dfef..d3ed9757afe 100644
--- a/app/assets/javascripts/pipeline.js.es6
+++ b/app/assets/javascripts/pipeline.js.es6
@@ -1,4 +1,12 @@
 (function() {
+
+  function addMarginToBuild () {
+    const $secondChild = $('.build:nth-child(2)');
+    if ($secondChild.length) {
+      $secondChild.closest('.stage-column').addClass('left-margin');
+    }
+  }
+
   function toggleGraph() {
     const $pipelineBtn = $(this).closest('.toggle-pipeline-btn');
     const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph');
@@ -21,4 +29,5 @@
   }
 
   $(document).on('click', '.toggle-pipeline-btn', toggleGraph);
+  $(document).on('ready', addMarginToBuild);
 })();
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index a2779704eff..e7e1a2a9b18 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -303,7 +303,13 @@
 .stage-column {
   display: inline-block;
   vertical-align: top;
-  margin-right: 65px;
+  margin-right: 48px;
+
+  &.left-margin {
+    &:not(:first-child) {
+      margin-left: 48px;
+    }
+  }
 
   li {
     list-style: none;
@@ -321,9 +327,9 @@
   .build {
     border: 1px solid $border-color;
     position: relative;
-    padding: 6px 10px;
+    padding: 8px 10px;
     border-radius: 30px;
-    width: 150px;
+    width: 186px;
     margin-bottom: 10px;
 
     &.playable {
@@ -443,9 +449,9 @@
         content: '';
         position: absolute;
         top: 50%;
-        right: -69px;
+        right: -48px;
         border-top: 2px solid $border-color;
-        width: 69px;
+        width: 48px;
         height: 1px;
       }
     }
@@ -457,22 +463,22 @@
         top: -47px;
         position: absolute;
         border-bottom: 2px solid $border-color;
-        width: 20px;
+        width: 25px;
         height: 65px;
       }
 
       // Right connecting curves
       &::after {
-        right: -20px;
+        right: -25px;
         border-right: 2px solid $border-color;
-        border-radius: 0 0 15px;
+        border-radius: 0 0 20px;
       }
 
       // Left connecting curves
       &::before {
-        left: -20px;
+        left: -25px;
         border-left: 2px solid $border-color;
-        border-radius: 0 0 0 15px;
+        border-radius: 0 0 0 20px;
       }
     }
 
@@ -538,20 +544,20 @@
       width: 21px;
       height: 25px;
       position: absolute;
-      top: -29px;
+      top: -30px;
       border-top: 2px solid $border-color;
     }
 
     &::after {
-      left: -39px;
+      left: -44px;
       border-right: 2px solid $border-color;
-      border-radius: 0 15px;
+      border-radius: 0 20px;
     }
 
     &::before {
-      right: -39px;
+      right: -44px;
       border-left: 2px solid $border-color;
-      border-radius: 15px 0 0;
+      border-radius: 20px 0 0;
     }
   }
 }

From ff0f70c0fe75773d060ecf5cf75d6fc5f879283b Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Wed, 14 Sep 2016 13:51:36 +0200
Subject: [PATCH 02/14] Change length of connecting lines based on number of
 builds

---
 app/assets/javascripts/pipeline.js.es6      |  9 +++++---
 app/assets/stylesheets/pages/pipelines.scss | 24 ++++++++++++++++++---
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6
index d3ed9757afe..f501761b1ec 100644
--- a/app/assets/javascripts/pipeline.js.es6
+++ b/app/assets/javascripts/pipeline.js.es6
@@ -1,9 +1,12 @@
 (function() {
 
   function addMarginToBuild () {
-    const $secondChild = $('.build:nth-child(2)');
-    if ($secondChild.length) {
-      $secondChild.closest('.stage-column').addClass('left-margin');
+    const $secondChildBuildNode = $('.build:nth-child(2)');
+    const $firstChildBuildNode = $secondChildBuildNode.prev('.build');
+    // const $previousBuildColumn = $secondChildBuildNode.closest('.stage-column').prev('.stage-column');
+    if ($secondChildBuildNode.length) {
+      $secondChildBuildNode.closest('.stage-column').addClass('left-margin');
+      $firstChildBuildNode.addClass('left-connector');
     }
   }
 
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index e7e1a2a9b18..37df702ea13 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -303,11 +303,26 @@
 .stage-column {
   display: inline-block;
   vertical-align: top;
-  margin-right: 48px;
+
+  &:not(:last-child) {
+    margin-right: 44px;
+  }
 
   &.left-margin {
     &:not(:first-child) {
-      margin-left: 48px;
+      margin-left: 44px;
+
+      .left-connector {
+        &::before {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: -48px;
+          border-top: 2px solid $border-color;
+          width: 48px;
+          height: 1px;
+        }
+      }
     }
   }
 
@@ -348,7 +363,10 @@
     }
 
     .build-content {
-      width: 130px;
+      width: 164px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
       .ci-status-text {
         width: 110px;

From 65e482e7e9b7385e6d8ee72c102eca6e79ee97fa Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Fri, 16 Sep 2016 09:44:00 +0200
Subject: [PATCH 03/14] Change size of pipeline status icons and dropdowns

---
 app/assets/stylesheets/pages/pipelines.scss   | 47 ++++++++++++-------
 .../ci/builds/_build_pipeline.html.haml       |  6 ++-
 .../commit/_pipeline_status_group.html.haml   |  3 +-
 .../_generic_commit_status_pipeline.html.haml |  6 ++-
 4 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 37df702ea13..547b9742dff 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -331,9 +331,9 @@
   }
 
   .stage-name {
-    margin-bottom: 15px;
+    margin: 0 0 15px 10px;
     font-weight: bold;
-    width: 150px;
+    width: 176px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -364,12 +364,17 @@
 
     .build-content {
       width: 164px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+
+      .ci-status-icon {
+
+        svg {
+          height: 20px;
+          width: 20px;
+        }
+      }
 
       .ci-status-text {
-        width: 110px;
+        width: 135px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -397,27 +402,37 @@
         color: $layout-link-gray;
 
         .ci-status-text {
-          width: 80px;
+          width: 112px;
         }
       }
 
       .grouped-pipeline-dropdown {
         padding: 8px 0;
-        width: 200px;
+        width: 168px;
         left: auto;
-        right: -214px;
+        right: -180px;
         top: -9px;
         max-height: 245px;
         overflow-y: scroll;
 
-        a:hover {
-          .ci-status-text {
-            text-decoration: none;
+        a {
+          padding: 7px 8px;
+          margin: 0 8px;
+
+          &:hover {
+            .ci-status-text {
+              text-decoration: none;
+            }
           }
         }
 
+        svg {
+          width: 14px;
+          height: 14px;
+        }
+
         .ci-status-text {
-          width: 145px;
+          width: 112px;
         }
 
         .arrow {
@@ -482,7 +497,7 @@
         position: absolute;
         border-bottom: 2px solid $border-color;
         width: 25px;
-        height: 65px;
+        height: 69px;
       }
 
       // Right connecting curves
@@ -504,7 +519,7 @@
     &:nth-child(2) {
       &::after, &::before {
         height: 29px;
-        top: -10px;
+        top: -7px;
       }
       .curve {
         display: block;
@@ -562,7 +577,7 @@
       width: 21px;
       height: 25px;
       position: absolute;
-      top: -30px;
+      top: -31.5px;
       border-top: 2px solid $border-color;
     }
 
diff --git a/app/views/projects/ci/builds/_build_pipeline.html.haml b/app/views/projects/ci/builds/_build_pipeline.html.haml
index 547bc0c9c19..017d3ff6af2 100644
--- a/app/views/projects/ci/builds/_build_pipeline.html.haml
+++ b/app/views/projects/ci/builds/_build_pipeline.html.haml
@@ -5,8 +5,10 @@
     .ci-status-text= subject.name
 - elsif can?(current_user, :read_build, @project)
   = link_to namespace_project_build_path(subject.project.namespace, subject.project, subject) do
-    = render_status_with_link('build', subject.status)
+    %span.ci-status-icon
+      = render_status_with_link('build', subject.status)
     .ci-status-text= subject.name
 - else
-  = render_status_with_link('build', subject.status)
+  %span.ci-status-icon
+    = render_status_with_link('build', subject.status)
   = ci_icon_for_status(subject.status)
diff --git a/app/views/projects/commit/_pipeline_status_group.html.haml b/app/views/projects/commit/_pipeline_status_group.html.haml
index 4e7a6f1af08..2064242ab54 100644
--- a/app/views/projects/commit/_pipeline_status_group.html.haml
+++ b/app/views/projects/commit/_pipeline_status_group.html.haml
@@ -1,5 +1,6 @@
 - group_status = CommitStatus.where(id: subject).status
-= render_status_with_link('build', group_status)
+%span.ci-status-icon
+  = render_status_with_link('build', group_status)
 .dropdown.inline
   %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
     %span.ci-status-text
diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml
index 409f4701e4b..0a66d60accc 100644
--- a/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml
+++ b/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml
@@ -1,7 +1,9 @@
 - if subject.target_url
   = link_to subject.target_url do
-    = render_status_with_link('commit status', subject.status)
+    %span.ci-status-icon
+      = render_status_with_link('commit status', subject.status)
     %span.ci-status-text= subject.name
 - else
-  = render_status_with_link('commit status', subject.status)
+  %span.ci-status-icon
+    = render_status_with_link('commit status', subject.status)
   %span.ci-status-text= subject.name

From eb55ac7d4d13a2c404d24c68cef10675ce29cf3c Mon Sep 17 00:00:00 2001
From: Luke Bennett <lukeeeebennettplus@gmail.com>
Date: Wed, 21 Sep 2016 01:45:39 +0100
Subject: [PATCH 04/14] Added final changes from handover

---
 .../stylesheets/framework/variables.scss      |  5 +++
 app/assets/stylesheets/pages/pipelines.scss   | 38 +++++++++++--------
 .../projects/commit/_pipeline_stage.html.haml |  2 +-
 .../commit/_pipeline_status_group.html.haml   | 17 ++++-----
 4 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 14ec310de2d..4c34ed3ebf7 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -17,8 +17,10 @@ $white-normal: #ededed;
 $white-dark: #ececec;
 
 $gray-light: #fafafa;
+$gray-lighter: #f9f9f9;
 $gray-normal: #f5f5f5;
 $gray-dark: #ededed;
+$gray-darker: #eee;
 $gray-darkest: #c9c9c9;
 
 $green-light: #38ae67;
@@ -33,6 +35,8 @@ $blue-medium-light: #3498cb;
 $blue-medium: #2f8ebf;
 $blue-medium-dark: #2d86b4;
 
+$blue-light-transparent: rgba(44, 159, 216, 0.05);
+
 $orange-light: #fc8a51;
 $orange-normal: #e75e40;
 $orange-dark: #ce5237;
@@ -91,6 +95,7 @@ $table-text-gray:       #8f8f8f;
 $gl-font-size:         15px;
 $gl-title-color:       #333;
 $gl-text-color:        #5c5c5c;
+$gl-text-color-light:  #8c8c8c;
 $gl-text-green:        #4a2;
 $gl-text-red:          #d12f19;
 $gl-text-orange:       #d90;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 547b9742dff..36c57f3ca30 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -342,11 +342,18 @@
   .build {
     border: 1px solid $border-color;
     position: relative;
-    padding: 8px 10px;
+    padding: 7px 10px 8px;
     border-radius: 30px;
     width: 186px;
     margin-bottom: 10px;
 
+    &:hover {
+      background-color: $gray-lighter;
+      .dropdown-menu-toggle {
+        background-color: transparent;
+      }
+    }
+
     &.playable {
       background-color: $gray-light;
 
@@ -366,7 +373,6 @@
       width: 164px;
 
       .ci-status-icon {
-
         svg {
           height: 20px;
           width: 20px;
@@ -385,41 +391,40 @@
       }
 
       a {
-        color: $layout-link-gray;
+        color: $gl-text-color-light;
         text-decoration: none;
-
-        &:hover {
-          .ci-status-text {
-            text-decoration: underline;
-          }
-        }
       }
 
       .dropdown-menu-toggle {
         border: none;
         width: auto;
         padding: 0;
-        color: $layout-link-gray;
+        color: $gl-text-color-light;
 
         .ci-status-text {
-          width: 112px;
+          max-width: 112px;
+          width: auto;
         }
       }
 
       .grouped-pipeline-dropdown {
         padding: 8px 0;
-        width: 168px;
+        width: 186px;
         left: auto;
-        right: -180px;
+        right: -197px;
         top: -9px;
         max-height: 245px;
         overflow-y: scroll;
 
         a {
-          padding: 7px 8px;
+          color: $gl-text-color;
+          padding: 7px 8px 8px;
           margin: 0 8px;
 
           &:hover {
+            background-color: $blue-light-transparent;
+            border-radius: 3px;
+
             .ci-status-text {
               text-decoration: none;
             }
@@ -465,9 +470,10 @@
       }
 
       .badge {
-        background-color: $gray-dark;
-        color: $layout-link-gray;
+        background-color: $gray-darker;
+        color: $gl-text-color-light;
         font-weight: normal;
+        margin-left: $btn-xs-side-margin;
       }
     }
 
diff --git a/app/views/projects/commit/_pipeline_stage.html.haml b/app/views/projects/commit/_pipeline_stage.html.haml
index 23c5c51fbc2..68d42126bf6 100644
--- a/app/views/projects/commit/_pipeline_stage.html.haml
+++ b/app/views/projects/commit/_pipeline_stage.html.haml
@@ -10,5 +10,5 @@
   - else
     %li.build
       .curve
-      .build-content
+      .dropdown.inline.build-content{ type: 'button', data: { toggle: 'dropdown' } }
         = render "projects/commit/pipeline_status_group", name: group_name, subject: grouped_statuses
diff --git a/app/views/projects/commit/_pipeline_status_group.html.haml b/app/views/projects/commit/_pipeline_status_group.html.haml
index 2064242ab54..bff65bff653 100644
--- a/app/views/projects/commit/_pipeline_status_group.html.haml
+++ b/app/views/projects/commit/_pipeline_status_group.html.haml
@@ -1,12 +1,11 @@
 - group_status = CommitStatus.where(id: subject).status
 %span.ci-status-icon
   = render_status_with_link('build', group_status)
-.dropdown.inline
-  %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
-    %span.ci-status-text
-      = name
-    %span.badge= subject.size
-  %ul.dropdown-menu.grouped-pipeline-dropdown
-    .arrow
-    - subject.each do |status|
-      = render "projects/#{status.to_partial_path}_pipeline", subject: status
+%button.dropdown-menu-toggle
+  %span.ci-status-text
+    = name
+  %span.badge= subject.size
+%ul.dropdown-menu.grouped-pipeline-dropdown
+  .arrow
+  - subject.each do |status|
+    = render "projects/#{status.to_partial_path}_pipeline", subject: status

From 5defad2d21b6481c07fb4a77f0a56ed7c19ff899 Mon Sep 17 00:00:00 2001
From: Luke Bennett <lukeeeebennettplus@gmail.com>
Date: Thu, 29 Sep 2016 22:24:37 +0100
Subject: [PATCH 05/14] Finished up margin JS logic

---
 app/assets/javascripts/dispatcher.js          |  3 +
 app/assets/javascripts/pipeline.js.es6        | 66 ++++++++--------
 app/assets/stylesheets/pages/pipelines.scss   |  4 +
 app/views/projects/commit/_pipeline.html.haml | 79 ++++++++++---------
 4 files changed, 82 insertions(+), 70 deletions(-)

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 8d99b12102d..45494afe7aa 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -126,6 +126,9 @@
             new TreeView();
           }
           break;
+        case 'projects:pipelines:show':
+          new window.gl.Pipelines();
+          break;
         case 'groups:activity':
           new Activities();
           break;
diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6
index f501761b1ec..6299ba2269d 100644
--- a/app/assets/javascripts/pipeline.js.es6
+++ b/app/assets/javascripts/pipeline.js.es6
@@ -1,36 +1,40 @@
-(function() {
+((global) => {
 
-  function addMarginToBuild () {
-    const $secondChildBuildNode = $('.build:nth-child(2)');
-    const $firstChildBuildNode = $secondChildBuildNode.prev('.build');
-    // const $previousBuildColumn = $secondChildBuildNode.closest('.stage-column').prev('.stage-column');
-    if ($secondChildBuildNode.length) {
-      $secondChildBuildNode.closest('.stage-column').addClass('left-margin');
-      $firstChildBuildNode.addClass('left-connector');
+  class Pipelines {
+    constructor() {
+      $(document).off('click', '.toggle-pipeline-btn').on('click', '.toggle-pipeline-btn', this.toggleGraph);
+      $(document).off('ready.addMarginToBuildColumns').on('ready.addMarginToBuildColumns', this.addMarginToBuildColumns);
+    }
+
+    toggleGraph() {
+      const $pipelineBtn = $(this).closest('.toggle-pipeline-btn');
+      const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph');
+      const $btnText = $(this).find('.toggle-btn-text');
+
+      $($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed');
+
+      const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed');
+
+      graphCollapsed ? $btnText.text('Expand') : $btnText.text('Hide')
+    }
+
+    addMarginToBuildColumns() {
+      const $secondChildBuildNode = $('.build:nth-child(2)');
+      if ($secondChildBuildNode.length) {
+        const $firstChildBuildNode = $secondChildBuildNode.prev('.build');
+        const $multiBuildColumn = $secondChildBuildNode.closest('.stage-column');
+        const $previousColumn = $multiBuildColumn.prev('.stage-column');
+        $multiBuildColumn.addClass('left-margin');
+        $firstChildBuildNode.addClass('left-connector');
+        $previousColumn.each(function() {
+          $this = $(this);
+          if ($('.build', $this).length === 1) $this.addClass('no-margin');
+        });
+      }
+      $('.pipeline-graph-container').removeClass('hidden');
     }
   }
 
-  function toggleGraph() {
-    const $pipelineBtn = $(this).closest('.toggle-pipeline-btn');
-    const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph');
-    const $btnText = $(this).find('.toggle-btn-text');
-    const $icon = $(this).find('.fa');
+  global.Pipelines = Pipelines;
 
-    $($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed');
-
-    const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed');
-    const expandIcon = 'fa-caret-down';
-    const hideIcon = 'fa-caret-up';
-
-    if(graphCollapsed) {
-      $btnText.text('Expand');
-      $icon.removeClass(hideIcon).addClass(expandIcon);
-    } else {
-      $btnText.text('Hide');
-      $icon.removeClass(expandIcon).addClass(hideIcon);
-    }
-  }
-
-  $(document).on('click', '.toggle-pipeline-btn', toggleGraph);
-  $(document).on('ready', addMarginToBuild);
-})();
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 36c57f3ca30..f4211ea3b2d 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -326,6 +326,10 @@
     }
   }
 
+  &.no-margin {
+    margin: 0;
+  }
+
   li {
     list-style: none;
   }
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index da5b9832ba5..bdf3c0a2aba 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -1,45 +1,46 @@
-.row-content-block.build-content.middle-block.pipeline-actions
-  .pull-right
-    .btn.btn-grouped.btn-white.toggle-pipeline-btn
-      %span.toggle-btn-text Hide
-      %span pipeline graph
-      = icon('caret-up')
-    - if can?(current_user, :update_pipeline, pipeline.project)
-      - if pipeline.builds.latest.failed.any?(&:retryable?)
-        = link_to "Retry failed", retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-grouped btn-primary', method: :post
+.pipeline-graph-container.hidden
+  .row-content-block.build-content.middle-block.pipeline-actions
+    .pull-right
+      .btn.btn-grouped.btn-white.toggle-pipeline-btn
+        %span.toggle-btn-text Hide
+        %span pipeline graph
+        %span.caret
+      - if can?(current_user, :update_pipeline, pipeline.project)
+        - if pipeline.builds.latest.failed.any?(&:retryable?)
+          = link_to "Retry failed", retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-grouped btn-primary', method: :post
 
-      - if pipeline.builds.running_or_pending.any?
-        = link_to "Cancel running", cancel_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-grouped btn-danger', method: :post
+        - if pipeline.builds.running_or_pending.any?
+          = link_to "Cancel running", cancel_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-grouped btn-danger', method: :post
 
-  .oneline.clearfix
-    - if defined?(pipeline_details) && pipeline_details
-      Pipeline
-      = link_to "##{pipeline.id}", namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: "monospace"
-      with
-      = pluralize pipeline.statuses.count(:id), "build"
-      - if pipeline.ref
-        for
-        = link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace"
-      - if defined?(link_to_commit) && link_to_commit
-        for commit
-        = link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "monospace"
-      - if pipeline.duration
-        in
-        = time_interval_in_words pipeline.duration
+    .oneline.clearfix
+      - if defined?(pipeline_details) && pipeline_details
+        Pipeline
+        = link_to "##{pipeline.id}", namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: "monospace"
+        with
+        = pluralize pipeline.statuses.count(:id), "build"
+        - if pipeline.ref
+          for
+          = link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace"
+        - if defined?(link_to_commit) && link_to_commit
+          for commit
+          = link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "monospace"
+        - if pipeline.duration
+          in
+          = time_interval_in_words pipeline.duration
 
-.row-content-block.build-content.middle-block.pipeline-graph
-  .pipeline-visualization
-    %ul.stage-column-list
-      - stages = pipeline.stages_with_latest_statuses
-      - stages.each do |stage, statuses|
-        %li.stage-column
-          .stage-name
-            %a{name: stage}
-            - if stage
-              = stage.titleize
-          .builds-container
-            %ul
-              = render "projects/commit/pipeline_stage", statuses: statuses
+  .row-content-block.build-content.middle-block.pipeline-graph
+    .pipeline-visualization
+      %ul.stage-column-list
+        - stages = pipeline.stages_with_latest_statuses
+        - stages.each do |stage, statuses|
+          %li.stage-column
+            .stage-name
+              %a{name: stage}
+              - if stage
+                = stage.titleize
+            .builds-container
+              %ul
+                = render "projects/commit/pipeline_stage", statuses: statuses
 
 
 - if pipeline.yaml_errors.present?

From c2deaa7e0db808abad86e87bac9524784b02e602 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Tue, 4 Oct 2016 13:59:57 -0500
Subject: [PATCH 06/14] Move hidden class to graph itself; remove background
 color from play node & align icon

---
 app/assets/javascripts/pipeline.js.es6        | 2 +-
 app/assets/stylesheets/pages/pipelines.scss   | 5 ++---
 app/views/projects/commit/_pipeline.html.haml | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6
index 6299ba2269d..68a34dda2af 100644
--- a/app/assets/javascripts/pipeline.js.es6
+++ b/app/assets/javascripts/pipeline.js.es6
@@ -31,7 +31,7 @@
           if ($('.build', $this).length === 1) $this.addClass('no-margin');
         });
       }
-      $('.pipeline-graph-container').removeClass('hidden');
+      $('.pipeline-graph').removeClass('hidden');
     }
   }
 
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index f4211ea3b2d..4e53c9765df 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -359,11 +359,10 @@
     }
 
     &.playable {
-      background-color: $gray-light;
 
       svg {
-        height: 12px;
-        width: 12px;
+        height: 13px;
+        width: 20px;
         position: relative;
         top: 1px;
 
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index bdf3c0a2aba..288c06d9b67 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -1,4 +1,4 @@
-.pipeline-graph-container.hidden
+.pipeline-graph-container
   .row-content-block.build-content.middle-block.pipeline-actions
     .pull-right
       .btn.btn-grouped.btn-white.toggle-pipeline-btn
@@ -28,7 +28,7 @@
           in
           = time_interval_in_words pipeline.duration
 
-  .row-content-block.build-content.middle-block.pipeline-graph
+  .row-content-block.build-content.middle-block.pipeline-graph.hidden
     .pipeline-visualization
       %ul.stage-column-list
         - stages = pipeline.stages_with_latest_statuses

From 113050c5709a204f58e0395b08e1582b3c862d66 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Thu, 6 Oct 2016 13:35:13 -0500
Subject: [PATCH 07/14] Fix ul html

---
 app/assets/stylesheets/pages/pipelines.scss                | 1 -
 app/views/projects/commit/_pipeline_status_group.html.haml | 5 +++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 4e53c9765df..9ce5bee466f 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -422,7 +422,6 @@
         a {
           color: $gl-text-color;
           padding: 7px 8px 8px;
-          margin: 0 8px;
 
           &:hover {
             background-color: $blue-light-transparent;
diff --git a/app/views/projects/commit/_pipeline_status_group.html.haml b/app/views/projects/commit/_pipeline_status_group.html.haml
index bff65bff653..b26de822450 100644
--- a/app/views/projects/commit/_pipeline_status_group.html.haml
+++ b/app/views/projects/commit/_pipeline_status_group.html.haml
@@ -6,6 +6,7 @@
     = name
   %span.badge= subject.size
 %ul.dropdown-menu.grouped-pipeline-dropdown
-  .arrow
+  %li.arrow
   - subject.each do |status|
-    = render "projects/#{status.to_partial_path}_pipeline", subject: status
+    %li
+      = render "projects/#{status.to_partial_path}_pipeline", subject: status

From 6a7b673035752890023e630755f27ec0d412a129 Mon Sep 17 00:00:00 2001
From: Luke Bennett <lukeeeebennettplus@gmail.com>
Date: Thu, 6 Oct 2016 18:00:06 +0100
Subject: [PATCH 08/14] JS review changes - Removed window from window.gl in
 dispatcher

Added page:load event as ready isnt fired by turbolinks

Fix dropdown menu link click registration
---
 app/assets/javascripts/dispatcher.js                       | 2 +-
 app/assets/javascripts/pipeline.js.es6                     | 1 +
 app/assets/stylesheets/pages/pipelines.scss                | 4 ++++
 app/views/projects/commit/_pipeline_stage.html.haml        | 2 +-
 app/views/projects/commit/_pipeline_status_group.html.haml | 2 +-
 5 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 45494afe7aa..adff73af79c 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -127,7 +127,7 @@
           }
           break;
         case 'projects:pipelines:show':
-          new window.gl.Pipelines();
+          new gl.Pipelines();
           break;
         case 'groups:activity':
           new Activities();
diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6
index 68a34dda2af..1030447f74a 100644
--- a/app/assets/javascripts/pipeline.js.es6
+++ b/app/assets/javascripts/pipeline.js.es6
@@ -4,6 +4,7 @@
     constructor() {
       $(document).off('click', '.toggle-pipeline-btn').on('click', '.toggle-pipeline-btn', this.toggleGraph);
       $(document).off('ready.addMarginToBuildColumns').on('ready.addMarginToBuildColumns', this.addMarginToBuildColumns);
+      $(document).off('page:load.addMarginToBuildColumns').on('page:load.addMarginToBuildColumns', this.addMarginToBuildColumns);
     }
 
     toggleGraph() {
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 9ce5bee466f..0c3c1e404af 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -373,6 +373,9 @@
     }
 
     .build-content {
+      display: -ms-flexbox;
+      display: -webkit-flex;
+      display: flex;
       width: 164px;
 
       .ci-status-icon {
@@ -403,6 +406,7 @@
         width: auto;
         padding: 0;
         color: $gl-text-color-light;
+        flex-grow: 1;
 
         .ci-status-text {
           max-width: 112px;
diff --git a/app/views/projects/commit/_pipeline_stage.html.haml b/app/views/projects/commit/_pipeline_stage.html.haml
index 68d42126bf6..289aa5178b1 100644
--- a/app/views/projects/commit/_pipeline_stage.html.haml
+++ b/app/views/projects/commit/_pipeline_stage.html.haml
@@ -10,5 +10,5 @@
   - else
     %li.build
       .curve
-      .dropdown.inline.build-content{ type: 'button', data: { toggle: 'dropdown' } }
+      .dropdown.inline.build-content
         = render "projects/commit/pipeline_status_group", name: group_name, subject: grouped_statuses
diff --git a/app/views/projects/commit/_pipeline_status_group.html.haml b/app/views/projects/commit/_pipeline_status_group.html.haml
index b26de822450..8582e9a8772 100644
--- a/app/views/projects/commit/_pipeline_status_group.html.haml
+++ b/app/views/projects/commit/_pipeline_status_group.html.haml
@@ -1,7 +1,7 @@
 - group_status = CommitStatus.where(id: subject).status
 %span.ci-status-icon
   = render_status_with_link('build', group_status)
-%button.dropdown-menu-toggle
+%button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
   %span.ci-status-text
     = name
   %span.badge= subject.size

From 4e1efca14119a25c441d833268894a632eb269d5 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Thu, 6 Oct 2016 14:33:55 -0500
Subject: [PATCH 09/14] Fix node flex alignment

---
 app/views/projects/commit/_pipeline_status_group.html.haml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/projects/commit/_pipeline_status_group.html.haml b/app/views/projects/commit/_pipeline_status_group.html.haml
index 8582e9a8772..6ada719e006 100644
--- a/app/views/projects/commit/_pipeline_status_group.html.haml
+++ b/app/views/projects/commit/_pipeline_status_group.html.haml
@@ -1,7 +1,7 @@
 - group_status = CommitStatus.where(id: subject).status
-%span.ci-status-icon
-  = render_status_with_link('build', group_status)
 %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+  %span.ci-status-icon
+    = render_status_with_link('build', group_status)
   %span.ci-status-text
     = name
   %span.badge= subject.size

From a57b3fc80c50b951d3a54ce2108608d45826c5ef Mon Sep 17 00:00:00 2001
From: Luke Bennett <lukeeeebennettplus@gmail.com>
Date: Thu, 6 Oct 2016 21:20:25 +0100
Subject: [PATCH 10/14] Corrected my correction for turbolinks -.-'

Removed extra cell on generic pipeline
---
 app/assets/javascripts/pipeline.js.es6                         | 3 +--
 .../generic_commit_statuses/_generic_commit_status.html.haml   | 2 --
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6
index 1030447f74a..a29f6ecdd59 100644
--- a/app/assets/javascripts/pipeline.js.es6
+++ b/app/assets/javascripts/pipeline.js.es6
@@ -3,8 +3,7 @@
   class Pipelines {
     constructor() {
       $(document).off('click', '.toggle-pipeline-btn').on('click', '.toggle-pipeline-btn', this.toggleGraph);
-      $(document).off('ready.addMarginToBuildColumns').on('ready.addMarginToBuildColumns', this.addMarginToBuildColumns);
-      $(document).off('page:load.addMarginToBuildColumns').on('page:load.addMarginToBuildColumns', this.addMarginToBuildColumns);
+      this.addMarginToBuildColumns();
     }
 
     toggleGraph() {
diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
index 331dc1fcc29..80fe6be49b0 100644
--- a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
+++ b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
@@ -62,5 +62,3 @@
     %td.coverage
       - if generic_commit_status.try(:coverage)
         #{generic_commit_status.coverage}%
-
-  %td

From 274ac4efdb94efe4d3ea4d5fff193eb2f02db507 Mon Sep 17 00:00:00 2001
From: Luke Bennett <lukeeeebennettplus@gmail.com>
Date: Fri, 7 Oct 2016 12:23:00 +0100
Subject: [PATCH 11/14] JS review changes and fixed conflicts

---
 app/assets/javascripts/pipeline.js.es6 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6
index a29f6ecdd59..6bf63ee6979 100644
--- a/app/assets/javascripts/pipeline.js.es6
+++ b/app/assets/javascripts/pipeline.js.es6
@@ -10,10 +10,10 @@
       const $pipelineBtn = $(this).closest('.toggle-pipeline-btn');
       const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph');
       const $btnText = $(this).find('.toggle-btn-text');
+      const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed');
 
       $($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed');
 
-      const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed');
 
       graphCollapsed ? $btnText.text('Expand') : $btnText.text('Hide')
     }

From 879a68a7c48c469c2646ecd89412cab9679d8860 Mon Sep 17 00:00:00 2001
From: Dimitrie Hoekstra <dimitriehoekstra@gmail.com>
Date: Fri, 7 Oct 2016 14:57:57 +0200
Subject: [PATCH 12/14] slight update to lines and curves positioning

---
 app/assets/stylesheets/pages/pipelines.scss | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 0c3c1e404af..04cce24ce7d 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -321,6 +321,7 @@
           border-top: 2px solid $border-color;
           width: 48px;
           height: 1px;
+          margin-top: -1px;
         }
       }
     }
@@ -498,6 +499,7 @@
         border-top: 2px solid $border-color;
         width: 48px;
         height: 1px;
+        margin-top: -1px;
       }
     }
 
@@ -505,7 +507,7 @@
     &:not(:first-child) {
       &::after, &::before {
         content: '';
-        top: -47px;
+        top: -49px;
         position: absolute;
         border-bottom: 2px solid $border-color;
         width: 25px;
@@ -531,7 +533,7 @@
     &:nth-child(2) {
       &::after, &::before {
         height: 29px;
-        top: -7px;
+        top: -9px;
       }
       .curve {
         display: block;
@@ -589,7 +591,7 @@
       width: 21px;
       height: 25px;
       position: absolute;
-      top: -31.5px;
+      top: -32.5px;
       border-top: 2px solid $border-color;
     }
 

From 7a28205629962427bfe5a48610ee4890b37f5ae8 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Fri, 7 Oct 2016 08:57:30 -0500
Subject: [PATCH 13/14] Remove negative margins

---
 app/assets/stylesheets/pages/pipelines.scss | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 04cce24ce7d..21224447628 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -316,12 +316,11 @@
         &::before {
           content: '';
           position: absolute;
-          top: 50%;
+          top: 49%;
           left: -48px;
           border-top: 2px solid $border-color;
           width: 48px;
           height: 1px;
-          margin-top: -1px;
         }
       }
     }
@@ -494,12 +493,11 @@
       &::after {
         content: '';
         position: absolute;
-        top: 50%;
+        top: 49%;
         right: -48px;
         border-top: 2px solid $border-color;
         width: 48px;
         height: 1px;
-        margin-top: -1px;
       }
     }
 
@@ -591,7 +589,7 @@
       width: 21px;
       height: 25px;
       position: absolute;
-      top: -32.5px;
+      top: -31px;
       border-top: 2px solid $border-color;
     }
 

From d87df157987e5ba2690fc1a7937e557821efb997 Mon Sep 17 00:00:00 2001
From: Dimitrie Hoekstra <dimitriehoekstra@gmail.com>
Date: Tue, 11 Oct 2016 11:34:20 +0200
Subject: [PATCH 14/14] changed the scss for the top line connectors to be
 exactly centered

---
 app/assets/stylesheets/pages/pipelines.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 21224447628..05f59279637 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -316,7 +316,7 @@
         &::before {
           content: '';
           position: absolute;
-          top: 49%;
+          top: 48%;
           left: -48px;
           border-top: 2px solid $border-color;
           width: 48px;
@@ -493,7 +493,7 @@
       &::after {
         content: '';
         position: absolute;
-        top: 49%;
+        top: 48%;
         right: -48px;
         border-top: 2px solid $border-color;
         width: 48px;
@@ -589,7 +589,7 @@
       width: 21px;
       height: 25px;
       position: absolute;
-      top: -31px;
+      top: -32px;
       border-top: 2px solid $border-color;
     }