Making a Material UI Page Compact (Reducing spacing, making form-groups flex and using smaller headers)

#1412 – Taskcluster Bug (PR #1449)

THE TASK:

In an effort to start to start the ball rolling on #835, I think we can start by working on the quickstart view (e.g., https://taskcluster-ui.herokuapp.com/quickstart).

The main task may involve making use of extra spacing between sections, adding dividers/borders, changing header variants, etc. to make the form easier to read.

Initial conversation:

But…

I could do whatever felt like.. so it was time to be artistic!

I made a series of change:

Before:

After:

 Reduced Spacing around main heading:

Before:

After:

Made the checkboxes flex to use space efficiently:

Before:

After:

 Reduced spacing in general between all list items:

And in the end.. Before:

After:

  1. Reduced Spacing.
  2. Stopped using ListSubHeader.
  3. Made checkboxes flex to consume space efficiently.

The code that did all this for me:

 taskShouldRunFlex: {
    display: 'flex',
    width: '100%',
    justifyContent: 'space-between',
    [theme.breakpoints.down('xs')]: {
      flexDirection: 'column',
    },
  },
  formLabelSpacing: {
    marginTop: -0.5 * theme.spacing.unit,
    marginBottom: -0.5 * theme.spacing.unit,
    marginRight: 4 * theme.spacing.triple,
    [theme.breakpoints.down('sm')]: {
      marginRight: theme.spacing.double,
    },
  },
  mainHeading: {
    marginTop: -theme.spacing.triple,
  },
  generalSpacing: {
    marginTop: -2 * theme.spacing.unit,
  },

The changes mostly involved changes in CSS and then applying the appropriate classes everywhere.

This was one fun issue to solve!

Written with love,
Rishabh Budhiraja

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s