sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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.


git-svn-id: https://develop.svn.wordpress.org/trunk@29632 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi 2014-08-26 21:49:39 +00:00
parent 9c6f4dd67c
commit 07ba5160c3
2 changed files with 79 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/wp-admin/css/media.css
View File

@ -1145,15 +1145,42 @@ audio, video {
} }
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
.edit-attachment-frame .attachment-media-view { .edit-attachment-frame .media-frame-title {
float: none; right: 110px;
max-height: 70%;
height: auto;
width: 100%;
} }
.edit-attachment-frame .attachment-media-view.portrait { .upload-php .media-modal-close,
height: 70%; .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 { .edit-attachment-frame .attachment-info {

58
src/wp-includes/css/media-views.css
View File

@ -2147,19 +2147,19 @@
@media only screen and (max-width: 900px) { @media only screen and (max-width: 900px) {
/* Drop-down menu */ /* Drop-down menu */
.media-frame .media-frame-title, .media-frame:not(.hide-menu) .media-frame-title,
.media-frame .media-frame-router, .media-frame:not(.hide-menu) .media-frame-router,
.media-frame .media-frame-content, .media-frame:not(.hide-menu) .media-frame-content,
.media-frame .media-frame-toolbar { .media-frame:not(.hide-menu) .media-frame-toolbar {
left: 0; left: 0;
} }
.media-frame .media-frame-menu { .media-frame:not(.hide-menu) .media-frame-menu {
position: static; position: static;
width: 0; width: 0;
} }
.media-frame .media-menu { .media-frame:not(.hide-menu) .media-menu {
width: auto; width: auto;
max-width: 80%; max-width: 80%;
overflow: auto; overflow: auto;
@ -2172,34 +2172,34 @@
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.media-frame .media-menu.visible { .media-frame:not(.hide-menu) .media-menu.visible {
left: 0; left: 0;
} }
.media-frame .media-menu > a { .media-frame:not(.hide-menu) .media-menu > a {
padding: 12px 16px; padding: 12px 16px;
font-size: 16px; font-size: 16px;
} }
.media-frame .media-menu > a.active { .media-frame:not(.hide-menu) .media-menu > a.active {
display: none; display: none;
} }
.media-frame .media-menu .separator { .media-frame:not(.hide-menu) .media-menu .separator {
margin: 5px 10px; margin: 5px 10px;
} }
.media-frame .media-frame-title { .media-frame:not(.hide-menu) .media-frame-title {
left: 0; left: 0;
color: #21759b; color: #21759b;
} }
.media-frame .media-frame-title .dashicons { .media-frame:not(.hide-menu) .media-frame-title .dashicons {
display: inline-block; display: inline-block;
line-height: 50px; line-height: 50px;
} }
.media-frame .media-frame-title h1 { .media-frame:not(.hide-menu) .media-frame-title h1 {
line-height: 3; line-height: 3;
font-size: 18px; font-size: 18px;
float: left; float: left;
@ -2458,6 +2458,38 @@
.media-frame-content .media-toolbar .attachment-filters { .media-frame-content .media-toolbar .attachment-filters {
max-width: 90px; max-width: 90px;
} }
.media-modal-close {
top: 5px;
right: 5px;
}
.media-modal .media-frame-title {
height: 40px;
}
.media-modal .media-frame-title h1,
.media-frame:not(.hide-menu) .media-frame-title h1 {
font-size: 18px;
line-height: 40px;
}
.media-frame:not(.hide-menu) .media-frame-title .dashicons {
line-height: 40px;
}
.media-frame-router,
.media-frame:not(.hide-menu) .media-menu {
top: 40px;
}
.media-frame-content {
top: 74px;
}
.media-frame.hide-router .media-frame-content {
top: 40px;
}
} }
/** /**