Media action links are cramped on small screens

[pento]

In the Media Library list view, the action links are quite cramped on small screens.

[bradt]

Working on a patch to hide the comments and thumb columns and show the thumb in the file column.

[bradt]

When the screen size is < 450px:

1. Hide the thumb and comment columns.
2. Show the hidden thumb in the File column.

[DrewAPicture]

@ryan: What's your take on 29993.diff​? What's left here?

[ryan]

The patch no longer applies cleanly, but the screenshot looks good.

[helen]

Throwing this out there knowing that there could be side effects - what if the thumbnail were just in the title column all the time, narrow screen or not? We could probably catch if the column is removed and hide the thumbnail (it's not in screen options), not sure what other things people are doing with the media list table that would break/stop applying.

[bradt]

I'm certainly not an authority on the media list table, but I'd be surprised if removing the icon column didn't break some plugins/themes that assume it will be there.

Our company is doing a WP Contrib Day this Friday, so I can certainly update the patch then.

[helen]

I'm not too concerned if something is non-destructively broken (e.g. images start showing when somebody had previously removed the column), but I don't like breaking things without knowing what they are first :)

[bradt]

Update patch, merged in trunk only, tested, all good.

[ryan]

29993.1.diff on an iPhone 6+

[ryan]

Seeing double images on iPhone 6+ and 5 with 29993.1.diff. Looks fine on desktop with Macnchrome.

[bradt]

Just tested again on Safari/iPhone 5 and Chrome/Android and don't see double images. Cached stylesheet on iOS maybe?

[helen]

I'd still like to know what exactly would or could break by removing that column. I can't see it being anything destructive. It's not sortable, it can't be toggled in screen options - I'd really rather just bring the thumbnail into the main title/actions column if we're going this route.

[ryan]

Replying to helen:

I'd still like to know what exactly would or could break by removing that column. I can't see it being anything destructive.

I can't see it being destructive either. Go for it and find out during beta?

[bradt]

Planning to work on this next Friday if no one else gets to it by then.

[bradt]

Icon column removed, icon moved to title column.

[bradt]

Tested in latest Chrome in OS X and Chrome on Android.

[DrewAPicture]

At this point in the cycle, we're two days shy of beta 4 and the changes being discussed here are under-tested and lacking consensus. "Go for it and find out during beta" is a perfectly valid approach, however I think it's too late to do that in 4.2. Punting.

[bradt]

Refreshed patch.

[afercia]

Related: #32254

[helen]

Lots of changes in list tables happening, so I refreshed/riffed on @bradt's patch to get us moving again. I didn't add a breakpoint in 29993.4.diff​, which we can do. Before we go there though, here's where the patch puts us at 320px wide in English. Note that there are more changes needed for accessibility (see related tickets) and more will come for better responsive list tables, which conveniently this better enables.

[afercia]

Tested a bit and noticed cropped images (created with the Image editor or setting them as Theme headers) can be displayed with a different thumbnail size. Looks like cropped images don't get the right image size and they are big, scaled images? For example, the background1.jpg in the screenshot below is 1024x643 and then scaled in-browser with CSS.

Anyway, if I'm not wrong, the max width set with CSS should be 80px + 2px border, see in common.css the rules with td.media-icon ... as selector that should be updated. Can provide a refreshed patch if needed.

[helen]

In 32687:

Media: move the thumbnail into the title column in list view.

This gives us more space for the title and row actions, and will make a responsive list table enhancement significantly easier.

props bradt for the initial patch.
fixes #29993 and #32255. see #32509 and #32395.

[helen]

Replying to afercia:

Ah, that's my fault, all of mine are cropped square so I didn't notice. I'm going to restrict it down to 60px wide instead of the old 80px (which, yes, will make some images smaller when not square thumbnails) and additionally apply some CSS to make sure nothing goes wrong with images of other sizes.

[helen]

In 32688:

Media list view: ensure thumbnails are appropriately sized and constrained.

see #29993.