Skip to content

Improve the layout of the pipelines table on medium sized viewports

Miranda Fluharty requested to merge 60128-responsive-pipelines-table-ee into master

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 is xs (mobile card view) or lg (wide enough to show everything without overlap)
  • Listen for viewport width changes with a resize event listener and update shouldShowMoreInformation accordingly
  • Add a showTitle prop to the commit component which we can set from the parent component: the pipeline table will set showTitle based on shouldShowMoreInformation
    • 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 Screen_Shot_2019-09-15_at_11.12.33 Screen_Shot_2019-09-25_at_16.46.36
800 Screen_Shot_2019-09-15_at_11.12.14 Screen_Shot_2019-09-15_at_11.07.57
1000 Screen_Shot_2019-09-15_at_11.11.27 Screen_Shot_2019-09-15_at_11.08.35
1200 Screen_Shot_2019-09-15_at_11.11.02 Screen_Shot_2019-09-15_at_11.09.22

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 Screen_Shot_2019-09-15_at_11.30.54
Expanded (click ellipsis to toggle) Screen_Shot_2019-09-15_at_11.31.35
Dropdown expanded inside menu Screen_Shot_2019-09-15_at_11.32.51

Pipelines table in supported browsers (md viewport width)

Browser Before After
Firefox 70 Screen_Shot_2019-11-04_at_13.58.34 Screen_Shot_2019-11-04_at_13.59.39
Firefox 69 Screen_Shot_2019-11-04_at_14.05.40 Screen_Shot_2019-11-04_at_14.04.36
Chrome 78 Screen_Shot_2019-11-04_at_13.50.15 Screen_Shot_2019-11-04_at_13.49.02
Chrome 77 Screen_Shot_2019-11-04_at_13.53.51 Screen_Shot_2019-11-04_at_13.52.39
Safari 12.1 Screen_Shot_2019-11-04_at_14.15.31 Screen_Shot_2019-11-04_at_14.16.28
Edge 18 Screen_Shot_2019-11-04_at_15.09.40 Screen_Shot_2019-11-04_at_15.07.43
Edge 17 Screen_Shot_2019-11-04_at_15.12.41 Screen_Shot_2019-11-04_at_15.13.56
IE 11 Screen_Shot_2019-11-04_at_15.19.39 Screen_Shot_2019-11-04_at_15.18.53

Commit component in other places (no changes expected)

Where Before After
Environments list for a project Screen_Shot_2019-11-14_at_14.04.58 Screen_Shot_2019-11-14_at_14.00.39
Deployments list for an environment Screen_Shot_2019-11-14_at_14.05.03 Screen_Shot_2019-11-14_at_14.00.44
Project on the Operations Dashboard Screen_Shot_2019-11-14_at_14.05.28 Screen_Shot_2019-11-14_at_14.00.48

Does this MR meet the acceptance criteria?

Conformity

Performance and Testing

Issue: #27887 (closed)

Edited by Wayne Haber

Merge request reports