diff options
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/pipeline.js.es6 | 9 | ||||
-rw-r--r-- | 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; } } } |