diff --git a/app/assets/javascripts/jobs/components/artifacts_block.vue b/app/assets/javascripts/jobs/components/artifacts_block.vue
index 0f34926f6894001b51df4a43e17e79327ec7cb11..2018942a7e84bc155071b7358d6bbca0a5953e8d 100644
--- a/app/assets/javascripts/jobs/components/artifacts_block.vue
+++ b/app/assets/javascripts/jobs/components/artifacts_block.vue
@@ -37,7 +37,7 @@ export default {
};
</script>
<template>
- <div class="block">
+ <div>
<div class="title gl-font-weight-bold">{{ s__('Job|Job artifacts') }}</div>
<p
v-if="isExpired || willExpire"
diff --git a/app/assets/javascripts/jobs/components/commit_block.vue b/app/assets/javascripts/jobs/components/commit_block.vue
index 222fae6d9a81a7ff0629024f079564cdde994519..eae6b5d5419f62a2fc735b5f54278ecb79fcd153 100644
--- a/app/assets/javascripts/jobs/components/commit_block.vue
+++ b/app/assets/javascripts/jobs/components/commit_block.vue
@@ -18,20 +18,11 @@ export default {
required: false,
default: null,
},
- isLastBlock: {
- type: Boolean,
- required: true,
- },
},
};
</script>
<template>
- <div
- :class="{
- 'block-last': isLastBlock,
- block: !isLastBlock,
- }"
- >
+ <div>
<span class="font-weight-bold">{{ __('Commit') }}</span>
<gl-link :href="commit.commit_path" class="js-commit-sha commit-sha link-commit">
diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index 59b50d02ddaf5c8c41eb01b2a3beff7357b6bff1..fcf03dff34e4db132e7244c3f2bf9360c239883e 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -20,6 +20,7 @@ export default {
i18n: {
...JOB_SIDEBAR,
},
+ borderTopClass: ['gl-border-t-solid', 'gl-border-t-1', 'gl-border-t-gray-100'],
forwardDeploymentFailureModalId,
components: {
ArtifactsBlock,
@@ -72,7 +73,7 @@ export default {
<aside class="right-sidebar build-sidebar" data-offset-top="101" data-spy="affix">
<div class="sidebar-container">
<div class="blocks-container">
- <div class="block gl-display-flex gl-flex-nowrap gl-align-items-center">
+ <div class="gl-py-5 gl-display-flex gl-align-items-center">
<tooltip-on-truncate :title="job.name" truncate-target="child"
><h4 class="my-0 mr-2 gl-text-truncate">
{{ job.name }}
@@ -107,38 +108,59 @@ export default {
/>
</div>
- <div v-if="job.terminal_path || job.new_issue_path" class="block retry-link">
+ <div
+ v-if="job.terminal_path || job.new_issue_path"
+ class="gl-py-5"
+ :class="$options.borderTopClass"
+ >
<gl-button
v-if="job.new_issue_path"
+ :href="job.new_issue_path"
category="secondary"
variant="confirm"
- :href="job.new_issue_path"
- class="float-left gl-mr-2"
data-testid="job-new-issue"
- >{{ $options.i18n.newIssue }}
+ >
+ {{ $options.i18n.newIssue }}
</gl-button>
<gl-button
v-if="job.terminal_path"
:href="job.terminal_path"
- class="gl-md-display-block gl-lg-display-block float-left"
target="_blank"
data-testid="terminal-link"
>
{{ $options.i18n.debug }}
- <gl-icon :size="14" name="external-link" />
+ <gl-icon name="external-link" />
</gl-button>
</div>
- <job-sidebar-details-container />
- <artifacts-block v-if="hasArtifact" :artifact="job.artifact" :help-url="artifactHelpUrl" />
- <trigger-block v-if="hasTriggers" :trigger="job.trigger" />
+
+ <job-sidebar-details-container class="gl-py-5" :class="$options.borderTopClass" />
+
+ <artifacts-block
+ v-if="hasArtifact"
+ class="gl-py-5"
+ :class="$options.borderTopClass"
+ :artifact="job.artifact"
+ :help-url="artifactHelpUrl"
+ />
+
+ <trigger-block
+ v-if="hasTriggers"
+ class="gl-py-5"
+ :class="$options.borderTopClass"
+ :trigger="job.trigger"
+ />
+
<commit-block
:commit="commit"
- :is-last-block="hasStages"
+ class="gl-py-5"
+ :class="$options.borderTopClass"
:merge-request="job.merge_request"
/>
<stages-dropdown
v-if="job.pipeline"
+ class="gl-py-5"
+ :class="$options.borderTopClass"
:pipeline="job.pipeline"
:selected-stage="selectedStage"
:stages="stages"
diff --git a/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue b/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue
index 62cd30fb320abb44fd62a175f3145d80ccab5df8..b20d58b6ffe39d7fdc5cdd02e81740cb0479b5a7 100644
--- a/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue
+++ b/app/assets/javascripts/jobs/components/sidebar_job_details_container.vue
@@ -73,7 +73,7 @@ export default {
</script>
<template>
- <div v-if="shouldRenderBlock" class="block">
+ <div v-if="shouldRenderBlock">
<detail-row v-if="job.duration" :value="duration" title="Duration" />
<detail-row
v-if="job.finished_at"
diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue
index 64c4031b002c443d4aa4d0813fa601dcf082324f..18de849af88ef8632718dac6a9488dc9be62024a 100644
--- a/app/assets/javascripts/jobs/components/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue
@@ -43,7 +43,7 @@ export default {
};
</script>
<template>
- <div class="block-last dropdown">
+ <div class="dropdown">
<div class="js-pipeline-info">
<ci-icon :status="pipeline.details.status" class="vertical-align-middle" />
diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue
index f6b987770110cc0ebe45e25650939cc31e5b36e1..fef5b37015c336a342a2081ce0c25223ee1f3714 100644
--- a/app/assets/javascripts/jobs/components/trigger_block.vue
+++ b/app/assets/javascripts/jobs/components/trigger_block.vue
@@ -61,7 +61,7 @@ export default {
</script>
<template>
- <div class="block">
+ <div>
<p
v-if="trigger.short_token"
:class="{ 'gl-mb-2': hasVariables, 'gl-mb-0': !hasVariables }"
diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss
index 3962c546b51d19d6e9a203a568b171d4cbb68fa7..34f88f9405ac75c186d7d4593740aa671fae3004 100644
--- a/app/assets/stylesheets/page_bundles/build.scss
+++ b/app/assets/stylesheets/page_bundles/build.scss
@@ -140,23 +140,6 @@
width: 289px;
}
- .block {
- width: 100%;
- word-break: break-word;
-
- &:last-child {
- border-bottom: 1px solid $border-gray-normal;
- }
-
- &.coverage {
- padding: 0 16px 11px;
- }
- }
-
- .block-last {
- padding: 16px 0;
- }
-
.trigger-variables-btn-container {
justify-content: space-between;
align-items: center;
@@ -198,18 +181,6 @@
margin-left: 2px;
}
- .retry-link {
- display: block;
-
- .btn-inverted-secondary {
- color: $blue-500;
-
- &:hover {
- color: $white;
- }
- }
- }
-
.stage-item {
cursor: pointer;
diff --git a/changelogs/unreleased/300787-clean-up-block-class-for-jobs-feature.yml b/changelogs/unreleased/300787-clean-up-block-class-for-jobs-feature.yml
new file mode 100644
index 0000000000000000000000000000000000000000..1b8daefa22315000a69749f05c7f6726202485c5
--- /dev/null
+++ b/changelogs/unreleased/300787-clean-up-block-class-for-jobs-feature.yml
@@ -0,0 +1,5 @@
+---
+title: Adjust debug button icon size in job detail page
+merge_request: 55886
+author:
+type: changed