Skip to content

Commit

Permalink
Media modals: Better responsive views, especially the header.
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@helen
helen committed Aug 26, 2014
1 parent d84507c commit a3579cc
Show file tree
Hide file tree
Showing 8 changed files with 158 additions and 40 deletions.
37 changes: 32 additions & 5 deletions wp-admin/css/media-rtl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1145,17 +1145,44 @@ audio, video {
}

@media only screen and (max-width: 480px) {
.edit-attachment-frame .media-frame-title {
left: 110px;
}

.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;
max-height: 70%;
height: auto;
width: 100%;
}

.edit-attachment-frame .attachment-media-view.portrait {
height: 70%;
}

.edit-attachment-frame .attachment-info {
height: auto;
width: 100%;
Expand Down
37 changes: 32 additions & 5 deletions wp-admin/css/media.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1145,17 +1145,44 @@ audio, video {
}

@media only screen and (max-width: 480px) {
.edit-attachment-frame .media-frame-title {
right: 110px;
}

.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;
max-height: 70%;
height: auto;
width: 100%;
}

.edit-attachment-frame .attachment-media-view.portrait {
height: 70%;
}

.edit-attachment-frame .attachment-info {
height: auto;
width: 100%;
Expand Down
2 changes: 1 addition & 1 deletion wp-admin/css/wp-admin-rtl.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion wp-admin/css/wp-admin.min.css
View file

Large diffs are not rendered by default.

58 changes: 45 additions & 13 deletions wp-includes/css/media-views-rtl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
}

/**
Expand Down
2 changes: 1 addition & 1 deletion wp-includes/css/media-views-rtl.min.css
View file

Large diffs are not rendered by default.

58 changes: 45 additions & 13 deletions wp-includes/css/media-views.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
}

/**
Expand Down
2 changes: 1 addition & 1 deletion wp-includes/css/media-views.min.css
View file

Large diffs are not rendered by default.

0 comments on commit a3579cc

Please sign in to comment.