diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/graph/graph_component.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/graph/graph_component.vue | 42 |
1 files changed, 25 insertions, 17 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue index 27c1b639889..cfc72327ef7 100644 --- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue @@ -2,35 +2,43 @@ import { GlLoadingIcon } from '@gitlab/ui'; import StageColumnComponent from './stage_column_component.vue'; import GraphMixin from '../../mixins/graph_component_mixin'; +import GraphWidthMixin from '~/pipelines/mixins/graph_width_mixin'; export default { components: { StageColumnComponent, GlLoadingIcon, }, - mixins: [GraphMixin], + mixins: [GraphMixin, GraphWidthMixin], }; </script> <template> <div class="build-content middle-block js-pipeline-graph"> <div class="pipeline-visualization pipeline-graph pipeline-tab-content"> - <div v-if="isLoading" class="m-auto"><gl-loading-icon :size="3" /></div> + <div + :style="{ + paddingLeft: `${graphLeftPadding}px`, + paddingRight: `${graphRightPadding}px`, + }" + > + <gl-loading-icon v-if="isLoading" class="m-auto" :size="3" /> - <ul v-if="!isLoading" class="stage-column-list"> - <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)" - :is-first-column="isFirstColumn(index)" - :action="stage.status.action" - @refreshPipelineGraph="refreshPipelineGraph" - /> - </ul> + <ul v-if="!isLoading" class="stage-column-list"> + <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)" + :is-first-column="isFirstColumn(index)" + :action="stage.status.action" + @refreshPipelineGraph="refreshPipelineGraph" + /> + </ul> + </div> </div> </div> </template> |