foreman icon indicating copy to clipboard operation
foreman copied to clipboard

Fixes #35294 - Switch to masonry card layout for Details tab

Open jeremylenz opened this issue 2 years ago • 3 comments

Our implementation of the Details tab didn't look like the original mockups because we used Patternfly's Grid layout, which means cards must be a uniform height across columns.

This PR changes to a vertical flex layout for Details tab cards, which brings several advantages:

  • cards don't have to be uniform heights
  • smaller cards take up less vertical space
  • the height of a card is independent from the height of the cards in adjacent columns

The flex layout has a maximum height and wraps cards to the next column as needed. With this change, cards will fill in from top to bottom first, then left to right.

masonry-Details

jeremylenz avatar Jul 29 '22 21:07 jeremylenz

Issues: #35294

theforeman-bot avatar Jul 29 '22 21:07 theforeman-bot

Requires https://github.com/Katello/katello/pull/10216

jeremylenz avatar Jul 29 '22 21:07 jeremylenz

Leaving in draft until I can demo it for @MariSvirik :)

jeremylenz avatar Aug 03 '22 14:08 jeremylenz

@MariSvirik Updated the max-height to calc(100vh - 225px) which accounts for the title bar and tabs etc.

details-tab-vh

jeremylenz avatar Aug 10 '22 14:08 jeremylenz