search

unimelb / unimelb-design-system

A complete design system for the University of Melbourne
https://web.unimelb.edu.au
30 stars 12 forks source link

Pathfinder heights not consistent in responsive view #902

Closed rothenburycam closed 7 years ago

rothenburycam commented 7 years ago

Expected behaviour

Pathfinder heights should be consistent whether in a single row or two rows

Actual behaviour

Pathfinders are not forced to the same height when broken over more than a single row

Steps to reproduce

Example page here: https://cms.unimelb.edu.au/controlled-environment/learn (Currently in development)

pahtfinder-learn

axelboc commented 7 years ago

Sorry, the pathfinder boxes are really not meant to be laid out on multiple rows. The broken link on the docs page used to point to page that explained that and recommended using another listing component. I'll add this info back into the docs when I can.

rhyslawry commented 7 years ago

Hey @axelboc, I've also noticed the pathfinder-4's break-point is a width of 1400px - Below which it splits into two rows. The pathfinder-3's responsive breakpoint is only 769px, after which it breaks out into a single column. Most people viewing pages on laptops have a screen width below 1400px, the most common being around 1280px, casing them to see an ugly two-row version of the pathfinder on all sites. (see examples below)

I agree that the pathfinder looks bad when it's split over two rows. Does this suggest we should lower the pathfinder-4's responsive breakpoint to be something more reasonable like 1200px?

Happy to put this as a new issue if need-be See below:

>1400px wide: (1410px) image

<1400px wide: (1350px) image

e.g. This is what http://science.unimelb.edu.au/#courses looks like on my small laptop screen: image

When it would look much better like this: (exact same width screen) image

This was achieved by changing the min-width from 1400px to 1200px: image

axelboc commented 7 years ago

Hmm yeah, no harm in tweaking the breakpoint a little. Do you mind creating a separate issue to avoid any confusion? Thanks.

Off topic, but in my very subjective opinion, four boxes is already too much. The goal is to help users find their path, and I think having four boxes makes that quite difficult (there's too much to scan). Having a featured box in there can alleviate this issue a bit, but it looks really bad below 1400px...

rhyslawry commented 7 years ago

Opened issue https://github.com/unimelb/unimelb-design-system/issues/903

rothenburycam commented 7 years ago

@axelboc This is just using a content template in Matrix Controlled Environment - shouldn't it default to single pathfinder per row in responsive given what you're saying?

axelboc commented 7 years ago

@rothenburycam sorry I misunderstood your initial issue. I could adjust the height of the boxes at that breakpoint to fit more content, or use flexbox to make every box on each row the same height in modern browsers, but it seems to me like it would solve the wrong problem: the length of the content is the real issue I think. Any chance you can edit it down, or move some of it to the target page?