From 738060efba65c4e8727e57618c1280801c2b775e Mon Sep 17 00:00:00 2001
From: pburdette <pburdette@gitlab.com>
Date: Wed, 4 Sep 2019 12:48:07 -0400
Subject: Adds backport change for pipeline.scss

Adds the necessary backport changes for pipeline.scss. This commit is
neccessary from the changes made in MR 16135

Revert schema.rb which was automatically added will investigate
---
 .../javascripts/pipelines/components/graph/graph_component.vue |  3 +++
 .../javascripts/pipelines/mixins/graph_component_mixin.js      | 10 ++++++++++
 app/assets/stylesheets/framework/common.scss                   |  3 +++
 app/assets/stylesheets/pages/pipelines.scss                    |  4 ----
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index ba0dea626dc..27c1b639889 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -20,6 +20,9 @@ export default {
         <stage-column-component
           v-for="(stage, index) in graph"
           :key="stage.name"
+          :class="{
+            'append-right-48': shouldAddRightMargin(index),
+          }"
           :title="capitalizeStageName(stage.name)"
           :groups="stage.groups"
           :stage-connector-class="stageConnectorClass(index, stage)"
diff --git a/app/assets/javascripts/pipelines/mixins/graph_component_mixin.js b/app/assets/javascripts/pipelines/mixins/graph_component_mixin.js
index 66e9476dadf..f383a4b3368 100644
--- a/app/assets/javascripts/pipelines/mixins/graph_component_mixin.js
+++ b/app/assets/javascripts/pipelines/mixins/graph_component_mixin.js
@@ -40,5 +40,15 @@ export default {
     refreshPipelineGraph() {
       this.$emit('refreshPipelineGraph');
     },
+    /**
+     * CSS class is applied:
+     *  - if pipeline graph contains only one stage column component
+     *
+     * @param {number} index
+     * @returns {boolean}
+     */
+    shouldAddRightMargin(index) {
+      return !(index === this.graph.length - 1);
+    },
   },
 };
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index e9218dcec67..b95978b6966 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -395,6 +395,7 @@ img.emoji {
 .prepend-left-default { margin-left: $gl-padding; }
 .prepend-left-20 { margin-left: 20px; }
 .prepend-left-32 { margin-left: 32px; }
+.prepend-left-64 { margin-left: 64px; }
 .append-right-4 { margin-right: 4px; }
 .append-right-5 { margin-right: 5px; }
 .append-right-8 { margin-right: 8px; }
@@ -402,6 +403,8 @@ img.emoji {
 .append-right-15 { margin-right: 15px; }
 .append-right-default { margin-right: $gl-padding; }
 .append-right-20 { margin-right: 20px; }
+.append-right-32 { margin-right: 32px; }
+.append-right-48 { margin-right: 48px; }
 .prepend-right-32 { margin-right: 32px; }
 .append-bottom-0 { margin-bottom: 0; }
 .append-bottom-4 { margin-bottom: $gl-padding-4; }
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 5f4db37c317..d4bd5b1b7dc 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -476,10 +476,6 @@
     display: inline-block;
     vertical-align: top;
 
-    &:not(:last-child) {
-      margin-right: 44px;
-    }
-
     &.left-margin {
       &:not(:first-child) {
         margin-left: 44px;
-- 
cgit v1.2.1