search

joostdecock / website

A work in progress to build a new freesewing.org website
MIT License
5 stars 7 forks source link

Implement masonry grid for blog and showcase index pages #27

Closed joostdecock closed 6 years ago

joostdecock commented 6 years ago

Since pictures are not always the same height, we've got these gaps in the layout, and that's not pretty. Better would be a masonry layout but without going overboard and loading a ton of code to make it happen.

This is not an issue on mobile, as there's only one column, thus no gaps. But on larger screens, there's 2 or 3 columns, and that's where we have gaps.

The material-ui grid is merely a wrapper around flexbox so once way to fix this is to resort to a column layout and divide the content into groups per column. That has two downsides though:

How many columns?

We need two groups/columns for medium sized screens, yet 3 groups/columns for large screens. One possible workaround is to only have 2 columns, even on xl screens.

Post order

It is tricky to respect chronological order. If we have 2 columns, we could sort posts in columns one each, so that they are chronological. But when one column collapses under the other on mobile, this will break the order.

In addition, we can't really handle this client-side, because these index pages are rendered statically on build, and are thus server-side rendered.

Possible solution The simplest solution is probably to render different layouts for different screen sizes, include them all in the page, and then use CSS classes to hide/show the correct ones based on screen size. Question is what the impact will be on performance, although we are re-using the images so I think it wouldn't be the end of the world.

If you'd like to go this road, you'll need to add some CSS classes to hide/show things on specific breakpoints (things like not-on-xs or lg-only).

hlb89 commented 6 years ago

I would like to have a go at this please!

joostdecock commented 6 years ago

That's wonderful @hlb89 🤗 The layout of this page is determined by this file: https://github.com/freesewing/website/blob/develop/src/components/pages/ShowcaseIndex.js

Feel free to do things differently if you'd like. If you have questions, you can ask them here, or in our chat room: https://gitter.im/freesewing/freesewing