[wp-trac] [WordPress Trac] #27423: Improve Media Modal UI at small-screen sizes
noreply at wordpress.org
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:
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
- 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
- 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
- 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
More information about the wp-trac