WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 21 months ago

#31685 closed defect (bug) (fixed)

Better responsive styling for my-sites.php

Reported by: boonebgorges Owned by: boonebgorges
Milestone: 4.3 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch
Focuses: ui, multisite Cc:

Description

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.

Attachments (17)

my-sites-before.png (23.1 KB) - added by boonebgorges 3 years ago.
31685.diff (1.0 KB) - added by boonebgorges 3 years ago.
my-sites-after.png (18.9 KB) - added by boonebgorges 3 years ago.
31685.2.diff (3.6 KB) - added by boonebgorges 3 years ago.
31685.3.diff (6.0 KB) - added by tryon 3 years ago.
31685.4.diff (5.9 KB) - added by boonebgorges 3 years ago.
31685.png (391.9 KB) - added by ocean90 3 years ago.
iOS Simulator Screen Shot 08.07.2015 18.03.43.png (103.3 KB) - added by ocean90 3 years ago.
31685.5.diff (2.1 KB) - added by boonebgorges 3 years ago.
31685-fullwidth.png (143.0 KB) - added by boonebgorges 3 years ago.
31685-iphone6.png (39.8 KB) - added by boonebgorges 3 years ago.
31685-ipad.png (101.9 KB) - added by boonebgorges 3 years ago.
Screen Shot 2015-07-08 at 1.17.20 PM.png (479.5 KB) - added by ryan 3 years ago.
my-sites.php, Macnchrome, 4.3-beta1-33121
Screen Shot 2015-07-08 at 1.17.27 PM.png (471.2 KB) - added by ryan 3 years ago.
Scrolled down.
31685.5.png (228.0 KB) - added by ocean90 3 years ago.
Capture.PNG (86.8 KB) - added by tryon 3 years ago.
Flexbox Based Layout & Site icons
31685.6.diff (5.1 KB) - added by tryon 3 years ago.
Flexbox Based Layout & Site icons Concept Patch

Change History (43)

@boonebgorges
3 years ago

#1 @boonebgorges
3 years ago

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().

#2 follow-up: @helen
3 years ago

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.

#3 in reply to: ↑ 2 @boonebgorges
3 years ago

  • Keywords needs-patch added; has-patch removed

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
3 years ago

#4 @boonebgorges
3 years ago

  • Keywords has-patch added; needs-patch removed

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.

This ticket was mentioned in Slack in #core by drew. View the logs.


3 years ago

This ticket was mentioned in Slack in #core by jeremyfelt. View the logs.


3 years ago

#7 @obenland
3 years ago

  • Owner set to boonebgorges
  • Status changed from new to assigned

#8 @obenland
3 years ago

  • Keywords 4.3-early removed
  • Milestone changed from Future Release to 4.3

This ticket was mentioned in Slack in #core-multisite by jeremyfelt. View the logs.


3 years ago

This ticket was mentioned in Slack in #core-multisite by jeremyfelt. View the logs.


3 years ago

@tryon
3 years ago

#11 @tryon
3 years ago

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.

#12 @obenland
3 years ago

@boonebgorges could you review and commit/punt?

@boonebgorges
3 years ago

#13 @boonebgorges
3 years ago

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.

#14 @boonebgorges
3 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 33072:

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

Props tryon.
Fixes #31685.

#15 @ryan
3 years ago

  • Keywords needs-screenshots added; has-patch removed

@ocean90
3 years ago

#16 @ocean90
3 years ago

  • Keywords needs-patch added; needs-screenshots removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

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

Last edited 3 years ago by ocean90 (previous) (diff)

This ticket was mentioned in Slack in #core by ocean90. View the logs.


3 years ago

This ticket was mentioned in Slack in #core-multisite by boren. View the logs.


3 years ago

@boonebgorges
3 years ago

#19 @boonebgorges
3 years ago

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.

This ticket was mentioned in Slack in #core by boone. View the logs.


3 years ago

@ryan
3 years ago

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

@ryan
3 years ago

Scrolled down.

@ocean90
3 years ago

#21 follow-up: @ocean90
3 years ago

  • Focuses ui added; administration removed
  • Keywords has-patch added; needs-patch removed

@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?

#22 in reply to: ↑ 21 @boonebgorges
3 years ago

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.

#23 @boonebgorges
3 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

#24 follow-up: @helen
3 years ago

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

@tryon
3 years ago

Flexbox Based Layout & Site icons

#25 in reply to: ↑ 24 @tryon
3 years ago

Replying to helen:

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

Something like capture.png?

@tryon
3 years ago

Flexbox Based Layout & Site icons Concept Patch

This ticket was mentioned in Slack in #core-multisite by jeremyfelt. View the logs.


21 months ago

Note: See TracTickets for help on using tickets.