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í
parent
d84507c3ad
commit
a3579ccba1
|
|
@ -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 {
|
||||
left: 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 {
|
||||
left: 82px;
|
||||
}
|
||||
|
||||
.edit-attachment-frame .edit-media-header .right {
|
||||
left: 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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -2147,19 +2147,19 @@
|
|||
@media only screen and (max-width: 900px) {
|
||||
|
||||
/* Drop-down menu */
|
||||
.media-frame .media-frame-title,
|
||||
.media-frame .media-frame-router,
|
||||
.media-frame .media-frame-content,
|
||||
.media-frame .media-frame-toolbar {
|
||||
.media-frame:not(.hide-menu) .media-frame-title,
|
||||
.media-frame:not(.hide-menu) .media-frame-router,
|
||||
.media-frame:not(.hide-menu) .media-frame-content,
|
||||
.media-frame:not(.hide-menu) .media-frame-toolbar {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.media-frame .media-frame-menu {
|
||||
.media-frame:not(.hide-menu) .media-frame-menu {
|
||||
position: static;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.media-frame .media-menu {
|
||||
.media-frame:not(.hide-menu) .media-menu {
|
||||
width: auto;
|
||||
max-width: 80%;
|
||||
overflow: auto;
|
||||
|
|
@ -2172,34 +2172,34 @@
|
|||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.media-frame .media-menu.visible {
|
||||
.media-frame:not(.hide-menu) .media-menu.visible {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.media-frame .media-menu > a {
|
||||
.media-frame:not(.hide-menu) .media-menu > a {
|
||||
padding: 12px 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.media-frame .media-menu > a.active {
|
||||
.media-frame:not(.hide-menu) .media-menu > a.active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.media-frame .media-menu .separator {
|
||||
.media-frame:not(.hide-menu) .media-menu .separator {
|
||||
margin: 5px 10px;
|
||||
}
|
||||
|
||||
.media-frame .media-frame-title {
|
||||
.media-frame:not(.hide-menu) .media-frame-title {
|
||||
right: 0;
|
||||
color: #21759b;
|
||||
}
|
||||
|
||||
.media-frame .media-frame-title .dashicons {
|
||||
.media-frame:not(.hide-menu) .media-frame-title .dashicons {
|
||||
display: inline-block;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.media-frame .media-frame-title h1 {
|
||||
.media-frame:not(.hide-menu) .media-frame-title h1 {
|
||||
line-height: 3;
|
||||
font-size: 18px;
|
||||
float: right;
|
||||
|
|
@ -2458,6 +2458,38 @@
|
|||
.media-frame-content .media-toolbar .attachment-filters {
|
||||
max-width: 90px;
|
||||
}
|
||||
|
||||
.media-modal-close {
|
||||
top: 5px;
|
||||
left: 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;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -2147,19 +2147,19 @@
|
|||
@media only screen and (max-width: 900px) {
|
||||
|
||||
/* Drop-down menu */
|
||||
.media-frame .media-frame-title,
|
||||
.media-frame .media-frame-router,
|
||||
.media-frame .media-frame-content,
|
||||
.media-frame .media-frame-toolbar {
|
||||
.media-frame:not(.hide-menu) .media-frame-title,
|
||||
.media-frame:not(.hide-menu) .media-frame-router,
|
||||
.media-frame:not(.hide-menu) .media-frame-content,
|
||||
.media-frame:not(.hide-menu) .media-frame-toolbar {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.media-frame .media-frame-menu {
|
||||
.media-frame:not(.hide-menu) .media-frame-menu {
|
||||
position: static;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.media-frame .media-menu {
|
||||
.media-frame:not(.hide-menu) .media-menu {
|
||||
width: auto;
|
||||
max-width: 80%;
|
||||
overflow: auto;
|
||||
|
|
@ -2172,34 +2172,34 @@
|
|||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.media-frame .media-menu.visible {
|
||||
.media-frame:not(.hide-menu) .media-menu.visible {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.media-frame .media-menu > a {
|
||||
.media-frame:not(.hide-menu) .media-menu > a {
|
||||
padding: 12px 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.media-frame .media-menu > a.active {
|
||||
.media-frame:not(.hide-menu) .media-menu > a.active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.media-frame .media-menu .separator {
|
||||
.media-frame:not(.hide-menu) .media-menu .separator {
|
||||
margin: 5px 10px;
|
||||
}
|
||||
|
||||
.media-frame .media-frame-title {
|
||||
.media-frame:not(.hide-menu) .media-frame-title {
|
||||
left: 0;
|
||||
color: #21759b;
|
||||
}
|
||||
|
||||
.media-frame .media-frame-title .dashicons {
|
||||
.media-frame:not(.hide-menu) .media-frame-title .dashicons {
|
||||
display: inline-block;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.media-frame .media-frame-title h1 {
|
||||
.media-frame:not(.hide-menu) .media-frame-title h1 {
|
||||
line-height: 3;
|
||||
font-size: 18px;
|
||||
float: left;
|
||||
|
|
@ -2458,6 +2458,38 @@
|
|||
.media-frame-content .media-toolbar .attachment-filters {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue