Media Grid: Better Attachment Details modal UI

[ericlewis]

As we spoke about in ​dev chat today, the edit media modal is currently split in half, giving up a lot of real estate for images.

Let's fine tune the view styles here.

[ericlewis]

See attachment:28844.diff.jpg​ for a sample of attachment:28844.diff​.

• Remove the modal padding, taking over the entire screen
• Shrink attachment info column down, let the image breathe
• Move all details to the right column
• Make the "Saved." and spinner work

[ocean90]

Question related to this: Why is the modal by default so huge? I think the size of the Edit Image modal should be enough here too. For more space we still have the Post UI for attachments.

Looking at the screenshot: There should be a line between details and meta.

[ericlewis]

Ignore attachment:28844.2.diff​.

In attachment 28844.3.diff,

• Bring back the modal padding so it's a real modal.
• Remove router (i.e. tabs)
• Add a title to the modal for parity with the Post edit image modal
• Move pagination to upper right, to be styled by someone else :)
• Add an "actually edit" link, exact wording TBD.

[helen]

#28918 was marked as a duplicate.

[DrewAPicture]

Related-ish: #28915

[helen]

In 29204:

Media Grid Attachment Details modal UI improvements:

• Align better visually with the existing media modal and the post image edit modal.
• Add back a link to the full attachment edit screen (post.php).
• Add a title to the modal and move prev/next buttons next to the more-consistent close button.
• Remove mode tabs (metadata vs. image editing) in favor of the Edit Image button.

Still to come: responsive, IE8 testing and targeted CSS (calc() usage), general CSS cleanup.

props ericlewis, helen, melchoyce. see #28844. fixes #28915.

[melchoyce]

attachment-details-modal-2.png​ is the most recent mockup we're working off of. Note: there may have been some design changes since then, such as deciding to not make each section collapsible.

[michalzuber]

Deleting last image with link in modal (detail) the dialog should close. I thought in didn't remove the image, because it still showed it to me.
Screencast: ​https://youtu.be/KLg_41otGJk

[ryelle]

28844.7.diff​ implements Mel's mockup. In addition to the CSS, there's some markup changes made to the template, and I also duplicated the onToggleAdvanced/ToggleAdvanced functions from the ImageDetails modal to collapse the attachment meta.

[wonderboymusic]

In 29289:

Media Grid: UI improvements to Attachment modal.

Props ryelle.
See #28844.

[helen]

I am reverting the last set of styling + expand/collapse changes - I understand the desire to align with the single image details modal when editing post content, but that modal was made slightly different because it is a totally different context, and in this case I think we are better off staying more aligned with the media modal. I also find it to be visually heavy, and far too tall. ocean90 experimented with tightening it up a bit, but as I kept pushing on it, we ended up essentially where we started before the re-styling.

[helen]

In 29436:

Revert styling changes to the Attachment Details modal from [29289]. fixes #28844.

[helen]

In 29496:

Small screen responsive for attachment details modal. see #28844.

[ocean90]

In 29499:

Autoprefixer for [29496].

see #28844.

[SergeyBiryukov]

In 29537:

Don't display an empty "Uploaded To" link in the media modal after [29436].

see #28844.