-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Move club cards display to masonry layout #711
Conversation
frontend/components/ClubDisplay.tsx
Outdated
<StyledMasonry | ||
breakpointCols={{ | ||
default: 2, | ||
960: 1, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ideally use some existing constant to define sm screen sizes
default: 2, | ||
960: 1, | ||
}} | ||
className="masonry-grid" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is the classname for the parent Masonry component ever used?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks Avi! Using a pure CSS library like this that doesn't re-order to optimize for height is probably the right move from a performance standpoint as well as maintaining rankings. Made some nits.
The front page currently displays club cards in two columns, with each "row" of cards beginning at the same point. This creates gaps when one column contains cards with longer lengths than the other. This PR moves to a masonry layout.
Here's a before vs after comparison. Before:
After: