Bottom align buttons

[mmmavis]

On desktop / large devices, use masonry layout instead of equal height rows.

[xmatthewx]

Cool. Nice to have, but less critical than other pieces.

[xmatthewx]

cc @kristinashu - consider design if we can't do masonry

[mmmavis]

there are 2 options to implement masonry

• Option 1) CSS only solution: projects will be arranged from top to bottom and left to right. (vs what we have currently: left to right and top to bottom)

CSS only         current

1 4 7             1 2 3
2 5 8     <---    4 5 6
3 6 9             7 8 9

Note that number of items per column can vary - depends on the height of items.

• Option 2) Option 1 + JavaScript hacks to fix project ordering. We will need to rely on external library for this: http://masonry.desandro.com/

[kristinashu]

Thanks Mavis! I don't think Option 1 is really an option. Most Recent tab would be very misleading if the order is all messed up.

What are the concerns/negatives to going with Option 2's external library?

[mmmavis]

I'm fine with using external library. Thoughts? @xmatthewx @cadecairos @acabunoc

[xmatthewx]

If that library is widely used and is okay performance wise, fine by me. I wonder if it would ignore rendering on mobile since it isn't required in a single column.

[kristinashu]

Since this is a bigger deal than we originally thought, lets hold off on it and reassess after we've implemented the detail view. Since copy lengths will very less, it might not be as big of a deal.

But if we don't do this, then we should at least bottom align the bottom buttons and links.

[mmmavis]

Talked to other devs on ways of enabling masonry layout and the conclusion is it's not something we can do without using JS to arrange the layout. We could use 3rd party library for this jQuery-based prototype but once Pulse has been reactified mixing jQuery and React isn't a good idea.

I'll bottom align buttons instead.