Improve the layout of the pipelines table on medium sized viewports
What does this MR do?
In the pipelines list view, on md
and lg
sized (768px - 1199px wide) viewports:
- Hide the status text, but still show the icon
- Hide the commit title and wrap the commit info
- Hide the pipeline actions (manual jobs, artifacts, retry/cancel) behind an ellipsis menu
- Adjust column widths to fit with modifications above
- Stages: 15% => 25%
- Time ago: 15% => 5%
How does it do that?
- Add a computed
shouldShowMoreInformation
prop to the pipelines table which is true if the viewport width isxs
(mobile card view) orlg
(wide enough to show everything without overlap) - Listen for viewport width changes with a
resize
event listener and updateshouldShowMoreInformation
accordingly - Add a
showTitle
prop to the commit component which we can set from the parent component: the pipeline table will setshowTitle
based onshouldShowMoreInformation
- The commit component is used in other places, but the changes to it do not affect its appearance elsewhere
- Move the pipeline action buttons (cancel, retry, artifacts etc.) into a wrapper component with two versions used based on the value of
shouldShowMoreInformation
:- a full version (current behavior) that shows all of the buttons and no ellipsis button
- a compact version that shows an ellipsis menu by default, clicking on the menu toggles the visibility of the rest of the buttons
Screenshots
Viewport width | Before | After |
---|---|---|
700 | ||
800 | ||
1000 | ||
1200 |
More screenshots
[Expand for screenshots of actions menu in action, how this looks in other browsers, and changes to other pages]
Pipelines table => Actions menu
Hover over ellipsis | |
Expanded (click ellipsis to toggle) | |
Dropdown expanded inside menu |
md
viewport width)
Pipelines table in supported browsers (Browser | Before | After |
---|---|---|
Firefox 70 | ||
Firefox 69 | ||
Chrome 78 | ||
Chrome 77 | ||
Safari 12.1 | ||
Edge 18 | ||
Edge 17 | ||
IE 11 |
Commit component in other places (no changes expected)
Where | Before | After |
---|---|---|
Environments list for a project | ||
Deployments list for an environment | ||
Project on the Operations Dashboard |
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation created/updated or follow-up review issue created -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Performance and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers
Issue: #27887 (closed)
Edited by Wayne Haber