Update styles for pipeline badge in operations/enviroments cards footer to correctly center it vertically
What does this MR do?
For issue #39531 (closed)
All work on this issue is based on advice from the style guide found here
To solve this issue there are a handful of approaches that can be taken:
This merge uses approach 1
- Update the
ci-badge-link.vue
to add the classes:d-inline-block align-middle
and then a even set of padding:py-0
. i.e.
From:
<ci-badge-link
ref="status"
class="bg-white"
:status="lastPipeline.details.status"
:show-text="true"
/>
To:
<ci-badge-link
ref="status"
+ class="bg-white d-inline-block align-middle py-0"
:status="lastPipeline.details.status"
:show-text="true"
/>
- Center
dashboard-card-footer
child content via flex display and reduce the padding on the badge link itself slightly to ensure a flush fit
From:
<div :class="pipelineClasses" class="dashboard-card-footer py-1 px-2 mt-3">
<ci-badge-link
ref="status"
class="bg-white py-0"
:status="lastPipeline.details.status"
:show-text="true"
/>
To:
+ <div :class="pipelineClasses" class="dashboard-card-footer py-1 px-2 mt-3 d-flex">
<ci-badge-link
ref="status"
+ class="bg-white"
:status="lastPipeline.details.status"
:show-text="true"
/>
- Update
dashboard-card-footer
padding by removing the current utility class for top/bottom padding and adding a custom line of padding inside thedashboard_skeleton.scss
file i.e.
From:
<div :class="pipelineClasses" class="dashboard-card-footer py-1 px-2 mt-3">
&-footer {
border-radius: $gl-padding;
height: $gl-padding-32;
To:
- <div :class="pipelineClasses" class="dashboard-card-footer mt-3">
&-footer {
border-radius: $gl-padding;
height: $gl-padding-32;
+ padding: 0.29rem 0.5rem;
This merge uses approach 1 for a handful of reasons:
- Based on the style guide we always want to take a utility first approach to styling content in gitlab.
For option 2, we could make use of a flex layout for the dashboard card footer but this has potential for a knock on effect for other child elements inside inside the card footer i.e. upstream and downstream pipeline details.
For option 3 we could have also approached the issue by updating the CSS around the elements to use different values but this would be a less than ideal approach as it breaks the utility first concept outlined here
Screenshots
Before | After |
---|---|
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
While I have checked the update on multiple displays and browsers, I have not written any tests for this update as I am unsure how gitlab approaches its testing for style changes. Any advice on this would be great!