Skip to content

Add ViewComponent for settings two column layout

Peter Hegman requested to merge 365054-add-viewcomponent-for-settings-layout into master

What does this MR do and why?

Related to #365054 (closed)

The two column layout is something we use on a lot of the settings pages. We would like to update all settings pages so they utilize this standard layout (see #361999 (comment 972784750) for discussion). Up until now we we had to repeat the markup in each section to create this layout. This MR creates a Layouts::HorizontalSectionComponent ViewComponent that can be used to dry up some of the markup. As a reference example it uses this component in the /admin/groups/<group slug>/edit view.

Screenshots or screen recordings

Expected to look the same

Desktop

Before After
gdk.test_3000_admin_groups_flightjs_edit__1_ gdk.test_3000_admin_groups_flightjs_edit

Mobile

Vertical spacing looks slightly different, but this is just because the table column widths aren't the same for some reason

Before After
gdk.test_3000_admin_groups_flightjs_edit_iPhone_SE___1_ gdk.test_3000_admin_groups_flightjs_edit_iPhone_SE___2_

How to set up and validate locally

  1. Navigate to http://gdk.test:3000/admin/groups
  2. Click Edit next to a group

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Peter Hegman

Merge request reports