Improve Media Modal UI at small-screen sizes: Redux

[mor10]

Whereas various issues were resolved in #27423, the Image Flow group proposes a realignment of the approach regarding the Media Modal UI, and in particular the Edit Image modal on small screen sizes.

The following relates to current behaviour in 4.1-alpha-30080 as it appears in the flow on small screens (tested on vertical Nexus 4 and iPhone 5):

The Edit Image modal is by and large not functional on small screens. The crop function does not work and the remaining buttons (rotate, flip, etc) as well as the preview image are largely covered by the right-hand tool panel.

Considering the current work being done on Image Flow and the fact that the cropping will not work in mobile our proposal is to make the Edit Image function unavailable on smaller screens by hiding the link / button that takes the user to the modal. The guiding philosophy here is that we provide only tools that can actually be used to the user. Since editing for all practical purposes is non-functional it is disabled when appropriate.

Alternatively the design pattern from the Image Details modal can be carried over: Leave the button row and image preview at the top (image scaled to fit available screen space, crop button removed) and move the right-hand panel down below.

In relation to other issues referenced in #27423 on single-image selection from the library:

• On selecting an image to add the metadata panel slides in from the right. Once the panel is visible it cannot be collapsed making the images on right hand column unavailable.
• When closing and re-opening the modal the pane remains extended.
• To regain access to the full grid the post must be closed and reopened.

Once image meta panel is displayed it covers the gallery. Meta panel can not be closed.

Image editor panel covers most buttons and preview image. Crop is non-functional.

Edit Media modal drops meta panel down below image to allow for small screen use.

#32216 was marked as a duplicate.

Diff for wp-admin/includes/image-edit.php

Diff for wp-includes/css/media-views.css

Preview of the changes.

Preview of the changes.

I've submitted patches that hide the crop button and crop options and moved the right-hand panel below.

With no Activity in the past 8 weeks and Beta1 starting very soon, punting this back to future release.

I've ran through the supplied patch and adjusted conflicts with current core code. I believe a fix for @mor10's media details image, Screenshot_2014-10-28-17-04-35.png, should go into another ticket.

FYI, cleaned up this ticket at WordCamp US 2016.

Responsive Modal Views