Media modals: Better responsive views, especially the header.

* Only show the "dropdown" when there is a menu. Note that this uses a `:not()` selector, but it is supported in browsers that support media queries so it is safe to use here.
* Make the header shorter when on particularly narrow screens, which also tend to be shorter.
* Don't restrict the height of images in the attachment details modal, to take advantage of all available space.

fixes #29339.

Built from https://develop.svn.wordpress.org/trunk@29632


git-svn-id: http://core.svn.wordpress.org/trunk@29406 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí
2014-08-26 21:50:16 +00:00
parent d84507c3ad
commit a3579ccba1
8 changed files with 162 additions and 44 deletions
+34 -7
View File
@@ -1145,15 +1145,42 @@ audio, video {
}
@media only screen and (max-width: 480px) {
.edit-attachment-frame .attachment-media-view {
float: none;
max-height: 70%;
height: auto;
width: 100%;
.edit-attachment-frame .media-frame-title {
right: 110px;
}
.edit-attachment-frame .attachment-media-view.portrait {
height: 70%;
.upload-php .media-modal-close,
.edit-attachment-frame .edit-media-header .left,
.edit-attachment-frame .edit-media-header .right {
width: 40px;
height: 40px;
}
.upload-php .media-modal-close .media-modal-icon {
margin: 9px 10px;
}
.edit-attachment-frame .edit-media-header .right:before,
.edit-attachment-frame .edit-media-header .left:before {
line-height: 40px !important;
}
.edit-attachment-frame .edit-media-header .left {
right: 82px;
}
.edit-attachment-frame .edit-media-header .right {
right: 41px;
}
.edit-attachment-frame .media-frame-content {
top: 40px;
}
.edit-attachment-frame .attachment-media-view {
float: none;
height: auto;
width: 100%;
}
.edit-attachment-frame .attachment-info {