[wp-trac] [WordPress Trac] #27423: Improve Media Modal UI at small-screen sizes

Thu Jul 17 01:07:22 UTC 2014

#27423: Improve Media Modal UI at small-screen sizes
--------------------------+-----------------------------
 Reporter:  gcorne        |       Owner:
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  4.0
Component:  Media         |     Version:
 Severity:  normal        |  Resolution:
 Keywords:  has-patch     |     Focuses:  ui, javascript
--------------------------+-----------------------------

Comment (by celloexpressions):

 Cool, we can hop over to IRC if/when we run into any UI sticking points.
 And try to modularize patches.

 Here's my list of outstanding issues here, after applying all of the
 existing patches here (.2.patch, .3.path, and .4.patch cover everything
 combined):
 - Menu-toggle: should go with @avryl's design with the menu taking over
 the whole screen and closing when an option is selected. Toggle label
 still needs to update when it changes. No need for a cancel button, and
 users may confuse it with the modal-closing button also.
 - Menu-toggle could use better visual hierarchy against the tabs. But, for
 now I think having the tabs is good, so I'll look at some options here.
 - Search should collapse to an icon and slide-out at some point, like in
 the admin bar (and Twenty Thriteen), similar to melchoyce's wireframes.
 Alternative is to stack search above/below the select filter, which gets
 cluttery.
 - Disable scrolling on the page when the modal takes over the entire
 screen (width < 640px, height < 400px). We need to add a class like `in-
 modal` to `<html>`, then just set `overflow: hidden;`.
 - Improved selection/deselection. I think that if we keep the multi-
 select-by-default-with-touch behavior, tapping any selected image anywhere
 should deselect it. Just note that having different behavior with mouse
 vs. touch can be super awkward, especially on devices with both (ie touch
 screen laptops, lots of win8 devices, etc).
 - Details sidebar really needs to be hidden by default here. I'm going to
 try doing a toggle that's only available when only one image is selected
 for now (im place of the "1 selected" stuff).
 - When pressing edit under "X Selected", the only option should be to be
 able to clear some items from the collection - which is currently done
 through an X icon displayed on hover. Always show that icon, and center it
 here.
 - For .4.patch, once the sidebar's hidden (which we'll probably also do at
 the 640/400 breakpoint), we'll definitely want to display more, smaller
 columns. I'd definitely start with 4 and cut down from there.
 - Only a few of the items in the library can be scrolled to currently, the
 rest are hidden. I've found the culprit (`.media-frame .attachments-
 browser` cannot be `overflow: hidden` with an arbitrary extra padding-
 bottom, or something inside of it can't be overflow: hidden), solution
 would be related to what we do with the details sidebar.

 All in all, the existing patches are a good start, but we definitely have
 a good chunk of work to do here!

--
Ticket URL: <https://core.trac.wordpress.org/ticket/27423#comment:30>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform