Stats: Move to 3 column layout on period pages.

[timmyc]

This branch closes #11094

This branch adds logic to support 3 columns on stats period pages ( Day, Week, Month, Year )

I explored a few different pure flexbox solutions, but due to the varying heights of the stats modules ( because of data / lack of data ) this proved to be a difficult path to take. I do welcome any others who are more flex-box gifted than I to experiment further though!

The site.jsx diff looks confusing, but essentially I have moved the modules into 3 different .stats__module-columns. I wanted to make sure the Countries and Post & Page modules were still shown at the top in both 2 and 3 column views.

I also experimented with bumping the <Main /> max-width to 1280px and the 3 column layout looked great at this resolution too. Insights page though really needs to be updated before we bump all of stats up to 1280.

The other minor change was I added the hover state to all rows in stat modules. Rows without a primary action ( like in Countries ) did not have a hover state.

/cc @folletto

I have tested this only in Chrome and the chrome device emulator - I need to spend some time with this branch on some devices and other browsers too.

[matticbot]

Test live: https://calypso.live/stats?branch=try/stats/masonry-layout

[timmyc]

And /cc @m if you want to take the branch for a spin.

[folletto]

Checked on Chrome with the calypso.live link above.
Design wise is good. Three columns work well on wide screens. 👍

Echoing your analysis, I'm wondering too if it makes more sense to bump this to the next breakpoint from >1040px to >1280px. It would still allow the three columns as .is-wide-layout is 1040px which means that it triggers at a window width of 1390px, which means that everyone between 1040px and 1390px width would get 3 columns, and below the two columns seem fitting without getting too cramped.

---

For reference, this is the smallest size with breakpoint at >1040px:

And this is the smallest size with breakpoint at >1280px:

It's not too bad either way, I think the bottom one is more effective.

[youknowriad]

This looks good 👍 but for the two columns layout, the second column seems too small comparing to the first one.

Maybe we could consider using a library here https://github.com/callmecavs/bricks.js I also found this after a quick search https://tsuyoshiwada.github.io/react-stack-grid/#/

[timmyc]

Maybe we could consider using a library here

I'd be up for exploring those in another branch. Looking at the demos, I fear that stat modules might be randomly placed on the page depending on the amount of data. So for one period, Clicks might show up in one location, but on another with more traffic it would change. But these are just hunches based upon a quick glance at the code and the demos - so if we have time it would be neat to look into them both.

the second column seems too small comparing to the first one.

Indeed - we need to consider this a bit more with this "static" 3 column layout. Ultimately, if we could give back the ability to set a custom sort order I think that would be the best solution.

[timmyc]

Applied updates per feedback in 97da65c - also moved around some modules to try to make a good mix in height between 2 and 3 columns, and most "used" modules. Again - if we could provide the ability to customize order of modules, that would be the best solution there.

Other minor change is reducing the padding between modules to better match the new gutter sizes:

3 columns

2 Columns

The map really does make the 2nd column more vertically heavy.

[youknowriad]

Comparing to what we currently have, this is a good addition for users with large screens. For the two columns layout, it's not that bad.

Let's ship this 👍 and if we have some time before our meetup, we could try using one of the masonry layout libs.

Also, there's another option is the usage of something like https://github.com/AlecAivazis/redux-responsive and switch the layout programmatically depending on the window width.

[folletto]

Tested on Chrome and Firefox, design wise 👍 too!

[matticbot]

@timmyc This PR needs a rebase