[bug] flex box on listings

[simonschwartz]

When implementing a vertical list the images do not line up at the bottom. You can view an example at http://listings.apps.staging.digital.gov.au/comms-arts-agency/index.html

[petronbot]

@simonschwartz The way the Vertical list is styled at the moment, the images won't line up in all cases.

In the latest release we've put a min-height on the heading and byline to achieve horizontal alignment for items with headings that wrap over 1 or 2 lines.

Obviously your examples fall outside this case, so we'll have to put a bit more thought into it.

The best solution I can think of at the moment is to use JavaScript to set all the <article>'s to the same height - what do you think about that idea @maxious & @klepas?

h3 {
      min-height: auto;

      @include media ($tablet) {
        min-height:  $base-spacing * 2;
      }
}

p {
      min-height: auto;

      @include media ($tablet) {
        min-height: $base-spacing * 3;
      }
}

https://github.com/AusDTO/gov-au-ui-kit/blob/master/assets/sass/_lists.scss#L167

[petronbot]

@klepas @maxious We can make the images stick to the bottom of the list item as long as we set the aspect ratio.

Here's a Codepen to demo how it would work on the 3-column version, we'd simply have to adjust the bottom-padding for 2 and 4 column:

http://codepen.io/petronbot/pen/PzjAYY?editors=1100

[simonschwartz]

@petronbot do you mean set the aspect ratio of the images? I think that would be a fair constraint for images that are place in these particular list views.

[petronbot]

@simonschwartz Yep that's it - we'd just need to fix the aspect ratio.

We can also decide how we'd like images cropped or scaled within their container, in case there's room for different shaped images to creep in.

[hannah-ustwo]

[STATUS UPDATE] Marking this as a bug.

@simonschwartz or @petronbot Can you confirm if this will affect things for the Aug 30 private beta or if this has been solved already?

[simonschwartz]

@hannah-ustwo this was affecting vertical list style of news items where an image was displaying below the news snippet. As far as I can see images are not being displayed with news snippets in the platform yet. May need @alzbetaT to confirm?

[simonschwartz]

Confirmed news articles currently don't have images associated with them in the platform and I cant seem to find it in the backlog. This means this bug doesn't need to be actioned for Aug 30

[hannah-ustwo]

Thanks for confirming @simonschwartz!

[klepas]

@petronbot @TrebBrennan @simonschwartz Just looking at this issue again. We’ve started migrating our list styles over from flexboxes to use Neat’s span-column() function (%base-list is done; %base-vertical-list is done; .list-horizontal is still to be fully moved over).

Does anyone have any updates on this now that we’re past the end of Aug? Do we need to track this in Jira?