Better responsive styling for my-sites.php

[boonebgorges]

my-sites.php switches to a multi-column layout when you have lots of sites: 2 columns when you have 10+, 4 columns when you have 20+. These layouts (especially the 4-column one) are nearly unusable on small screens. See my-sites-before.png​. We should go to a single column on narrow viewports.

[boonebgorges]

31685.diff​ converts to a one-column layout, and switches the zebra-striping from the tr to the td elements as appropriate. This leaves kinda odd markup (there are still 4 tds in each tr), but IMO it's a better solution than, say, building different markup when wp_is_mobile().

[helen]

I think this would be a great time to make this not a table element anymore. It is a list of things, but it's not really tabular data.

[boonebgorges]

Replying to helen:

I think this would be a great time to make this not a table element anymore. It is a list of things, but it's not really tabular data.

Thanks for making the job harder :) (I agree though.) I will work on a patch.

[boonebgorges]

31685.diff​ converts the list to a <ul>. I added JES (Just Enough Styling) to make it look just like the single-column table treatment in my-sites-after.png​. It's not really possible to keep a dynamic grid and to do zebra striping in PHP+CSS, and it seems like a lot of wasted effort to make it work with JS, so I've dropped the grid view altogether: you always see a full-width single column. I thought about making each row take up a bit less space, but there are hooks in there - especially 'myblogs_options' - that I'm sure people are using to output lots of stuff.

The more I look at My Sites, the sadder I get - it could probably use a significant rethink to make it something much more beautiful and useful. That said, it would be really nice to fix the mobile problem in the short term.

[tryon]

Working from boonebgorges patch I added some more styling to create the zebra striping and keep the original layout of the table while making it responsive from 1 to 5 columns.

Agreed that the page could use some love in the long term.

[obenland]

@boonebgorges could you review and commit/punt?

[boonebgorges]

Thanks, tryon! This is a nice improvement. I'm going to remove the background color of the .my-sites div, so that there's no empty white space when a row is not completely filled. See 31685.4.diff​.

It's worth noting that your patch (and my patch) means that grid mode will kick in even for a small number of sites - previously it was only for 10+ (2 cols) or 20+ (4 cols). I don't think this is a big loss, but I did want to note it.

The patch is vastly better than what we currently have, so let's go with it.

[boonebgorges]

In 33072:

Improve the display of my-sites.php on small screens.

Props tryon.
Fixes #31685.

[ocean90]

31685.png​ is what I see in Chrome 43 on OS X. Seems to happen when one of the titles wrap.

[boonebgorges]

31685.5.diff​ introduces the following changes:

• Ensures that we don't get weird float issues (by applying clear where appropriate)
• Sets a min-height on the li elements when in a grid formation. This results in a bit of extra whitespace for small titles, but it's the only way to ensure that rows are even without tables (or without redesigning the whole page). Very, very long site titles can still overflow, in which case a small gap is introduced between rows. See 31685-fullwidth.png​. IMO, this is acceptable for an edge case.
• Tweaked the padding at various widths to make sure nothing looks cramped against the edges.

[ryan]

my-sites.php, Macnchrome, 4.3-beta1-33121

[ryan]

Scrolled down.

[ocean90]

@boonebgorges Looks good. I would go with 120 or 130px for min-width.

Can we get rid of the border around the list, see 31685.5.png​?

[boonebgorges]

Replying to ocean90:

@boonebgorges Looks good. I would go with 120 or 130px for min-width.

Can we get rid of the border around the list, see 31685.5.png​?

Assuming you mean min-height. Agreed.

Yup, let's lose the border. I think this is a remnant of the original table implementation.

[boonebgorges]

In 33135:

Improvements to responsive styling on my-sites.php.

• Ensure that floated elements break to a new line at the end of a row.
• Allow enough vertical space for long site titles.
• Give more breathing room to cells at narrow widths.

Fixes #31685.

[helen]

You know what might make this cool later (not just in responsive), is site icons. :)

[tryon]

Flexbox Based Layout & Site icons

[tryon]

Replying to helen:

You know what might make this cool later (not just in responsive), is site icons. :)

Something like capture.png?

[tryon]

Flexbox Based Layout & Site icons Concept Patch