Skip to content

Use pajamas default left and right spacings on Roadmap page

Chad Lavimoniere requested to merge 464602-adjust-roadmap-page-layout-to-match-system-right-left-margins into master

What does this MR do and why?

Use pajamas default left and right spacings on Roadmap page

  1. Add the appropriate left and right margin to the roadmap header bar (24px when the viewport is >= 1200px, 16px otherwise)
  2. Add the appropriate left margin to the milestones and iterations sidebar on the roadmap view (24px when the viewport is >= 1200px, 16px (which is the current value) otherwise)
  3. Ensure that the horizontally scrollable roadmap area has the correct right margin, so that when the user has scrolled all the way to the right on the roadmap they see that the end of the content aligns with this system spacing (that is, 24px or 16px from the right edge of the viewport, depending on the viewport width as noted above)

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

In the following screenshots, the roadmap is scrolled all the way to the right to show the right edge spacing.

Size Before After
md (>=768px) gdk.test_3000_groups_flightjs_-roadmap_state_all_sort_START_DATE_ASC_layout_QUARTERS_timeframe_range_type_THREE_YEARS_progress_WEIGHT_show_progress_true_show_milestones_true_milestones_type_ALL_show_labels_true__3 gdk.test_3000_groups_flightjs_-roadmap_state_all_sort_START_DATE_ASC_layout_QUARTERS_timeframe_range_type_THREE_YEARS_progress_WEIGHT_show_progress_true_show_milestones_true_milestones_type_ALL_show_labels_true__2
lg (>=992px)
(Note: also fixed spacing of header bar at this size range)		 gdk.test_3000_groups_flightjs_-roadmap_state_all_sort_START_DATE_ASC_layout_QUARTERS_timeframe_range_type_THREE_YEARS_progress_WEIGHT_show_progress_true_show_milestones_true_milestones_type_ALL_show_labels_true__4 gdk.test_3000_groups_flightjs_-roadmap_state_all_sort_START_DATE_ASC_layout_QUARTERS_timeframe_range_type_THREE_YEARS_progress_WEIGHT_show_progress_true_show_milestones_true_milestones_type_ALL_show_labels_true__1
xl (>=1200px) gdk.test_3000_groups_flightjs_-roadmap_state_all_sort_START_DATE_ASC_layout_QUARTERS_timeframe_range_type_THREE_YEARS_progress_WEIGHT_show_progress_true_show_milestones_true_milestones_type_ALL_show_labels_true__5 gdk.test_3000_groups_flightjs_-_roadmap_state_all_sort_START_DATE_ASC_layout_QUARTERS_timeframe_range_type_THREE_YEARS_progress_WEIGHT_show_progress_true_show_milestones_true_milestones_type_ALL_show_labels_true

How to set up and validate locally

  1. Check out this branch
  2. Go to a group roadmap
  3. use developer tools to set the viewport width to 1920px (this is in the xl breakpoint range)
    1. You should see that the filters header bar on the page has 24px of padding at the left and right
    2. You should see that the Milestones and Iterations sidebar items all have 24px of left padding
    3. Scroll the roadmap all the way to the right. You should see that there are 24px of spacing to the right of the end of the roadmap content, so that all of the roadmap content aligns with the right edges of the settings button and Duo chat button above.
  4. use developer tools to set the viewport width to 1000px (this is in the lg breakpoint range)
    1. You should see that the filters input and the settings button do not touch, there is a small gap between them
    2. You should see that the filters header bar on the page has 16px of padding at the left and right
    3. You should see that the Milestones and Iterations sidebar items all have 16px of left padding
    4. Scroll the roadmap all the way to the right. You should see that there are 16px of spacing to the right of the end of the roadmap content, so that all of the roadmap content aligns with the right edges of the settings button and Duo chat button above.
  5. use developer tools to set the viewport width to 800px (this is in the md breakpoint range)
    1. You should see that the filters header bar on the page has 16px of padding at the left and right
    2. You should see that the Milestones and Iterations sidebar items all have 16px of left padding
    3. Scroll the roadmap all the way to the right. You should see that there are 16px of spacing to the right of the end of the roadmap content, so that all of the roadmap content aligns with the right edges of the settings button and Duo chat button above.

Related to #464602

Merge request reports