Improvements to the modal media uploader on mobile in landscape orientation.
* Merge the 782 and 500 width queries into a single 640px query * At this breakpoint, remove the drop shadow and margin from the uploader modal * For only landscape views, tabs are shown in a single line. * Add padding to tab links to account for untappable 20px area at top of landscape viewport in iOS * Add overflow: visible to .embed-link-settings at responsive sizes to prevent unnecessary framed scrolling See #25977, props joen. Built from https://develop.svn.wordpress.org/trunk@26250 git-svn-id: http://core.svn.wordpress.org/trunk@26156 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Matt Thomas
parent
881c608592
commit
10f37f1180
|
|
@ -1625,7 +1625,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 782px) {
|
/* Responsive on portrait and landscape */
|
||||||
|
@media only screen and (max-width: 640px), screen and (max-height: 400px) {
|
||||||
|
|
||||||
|
/* Media tabs on the top */
|
||||||
.media-frame-content .media-toolbar .instructions {
|
.media-frame-content .media-toolbar .instructions {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -1652,7 +1655,36 @@
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.media-frame-title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-frame-toolbar {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
background: #FFF;
|
||||||
|
border-top: 1px solid #DEDEDE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-toolbar {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-frame {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachments-browser .attachments {
|
||||||
|
top: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachment-details h3 {
|
||||||
|
margin-top: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
/* Shorten right-side links so they don't overlap the close button */
|
/* Shorten right-side links so they don't overlap the close button */
|
||||||
.media-menu a:nth-child(2),
|
.media-menu a:nth-child(2),
|
||||||
.media-menu a:last-child {
|
.media-menu a:last-child {
|
||||||
|
|
@ -1716,17 +1748,8 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-left: 180px;
|
margin-left: 180px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
/* Full-bleed modal */
|
||||||
.media-frame-content .media-toolbar .search,
|
|
||||||
.media-frame-content .media-toolbar .attachment-filters {
|
|
||||||
max-width: 85px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tiny screens [ = smaller than 500 wide] */
|
|
||||||
@media screen and (max-width: 500px) {
|
|
||||||
.media-modal {
|
.media-modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -1757,36 +1780,6 @@
|
||||||
width: 25px;
|
width: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Don't bother with title for phone-size */
|
|
||||||
.media-frame-title {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame-toolbar {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
background: #FFF;
|
|
||||||
border-top: 1px solid #DEDEDE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-toolbar {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attachments-browser .attachments {
|
|
||||||
top: 42px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attachment-details h3 {
|
|
||||||
margin-top: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Image From Link */
|
/* Image From Link */
|
||||||
.embed-link-settings,
|
.embed-link-settings,
|
||||||
.embed-image-settings {
|
.embed-image-settings {
|
||||||
|
|
@ -1802,6 +1795,56 @@
|
||||||
.gallery-settings h3 {
|
.gallery-settings h3 {
|
||||||
margin-top: 45px;
|
margin-top: 45px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Landscape specific header override */
|
||||||
|
@media screen and (max-height: 400px) {
|
||||||
|
.media-menu {
|
||||||
|
padding: 0 10px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-menu a {
|
||||||
|
float: right;
|
||||||
|
width: 21%;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 10px inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-menu a:nth-child(2),
|
||||||
|
.media-menu a:last-child {
|
||||||
|
width: 21%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-modal-close {
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-frame-router {
|
||||||
|
top: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-frame-content {
|
||||||
|
top: 78px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachments-browser .attachments {
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Prevent unnecessary scrolling on title input */
|
||||||
|
.embed-link-settings {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 680px) {
|
||||||
|
.media-frame-content .media-toolbar .search,
|
||||||
|
.media-frame-content .media-toolbar .attachment-filters {
|
||||||
|
max-width: 85px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1625,7 +1625,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 782px) {
|
/* Responsive on portrait and landscape */
|
||||||
|
@media only screen and (max-width: 640px), screen and (max-height: 400px) {
|
||||||
|
|
||||||
|
/* Media tabs on the top */
|
||||||
.media-frame-content .media-toolbar .instructions {
|
.media-frame-content .media-toolbar .instructions {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -1652,7 +1655,36 @@
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.media-frame-title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-frame-toolbar {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: #FFF;
|
||||||
|
border-top: 1px solid #DEDEDE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-toolbar {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-frame {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachments-browser .attachments {
|
||||||
|
top: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachment-details h3 {
|
||||||
|
margin-top: 45px;
|
||||||
|
}
|
||||||
|
|
||||||
/* Shorten right-side links so they don't overlap the close button */
|
/* Shorten right-side links so they don't overlap the close button */
|
||||||
.media-menu a:nth-child(2),
|
.media-menu a:nth-child(2),
|
||||||
.media-menu a:last-child {
|
.media-menu a:last-child {
|
||||||
|
|
@ -1716,17 +1748,8 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-right: 180px;
|
margin-right: 180px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
/* Full-bleed modal */
|
||||||
.media-frame-content .media-toolbar .search,
|
|
||||||
.media-frame-content .media-toolbar .attachment-filters {
|
|
||||||
max-width: 85px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tiny screens [ = smaller than 500 wide] */
|
|
||||||
@media screen and (max-width: 500px) {
|
|
||||||
.media-modal {
|
.media-modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -1757,36 +1780,6 @@
|
||||||
width: 25px;
|
width: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Don't bother with title for phone-size */
|
|
||||||
.media-frame-title {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame-toolbar {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background: #FFF;
|
|
||||||
border-top: 1px solid #DEDEDE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-toolbar {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attachments-browser .attachments {
|
|
||||||
top: 42px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attachment-details h3 {
|
|
||||||
margin-top: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Image From Link */
|
/* Image From Link */
|
||||||
.embed-link-settings,
|
.embed-link-settings,
|
||||||
.embed-image-settings {
|
.embed-image-settings {
|
||||||
|
|
@ -1802,6 +1795,56 @@
|
||||||
.gallery-settings h3 {
|
.gallery-settings h3 {
|
||||||
margin-top: 45px;
|
margin-top: 45px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Landscape specific header override */
|
||||||
|
@media screen and (max-height: 400px) {
|
||||||
|
.media-menu {
|
||||||
|
padding: 0 0 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-menu a {
|
||||||
|
float: left;
|
||||||
|
width: 21%;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 10px inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-menu a:nth-child(2),
|
||||||
|
.media-menu a:last-child {
|
||||||
|
width: 21%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-modal-close {
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-frame-router {
|
||||||
|
top: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-frame-content {
|
||||||
|
top: 78px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attachments-browser .attachments {
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Prevent unnecessary scrolling on title input */
|
||||||
|
.embed-link-settings {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 680px) {
|
||||||
|
.media-frame-content .media-toolbar .search,
|
||||||
|
.media-frame-content .media-toolbar .attachment-filters {
|
||||||
|
max-width: 85px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue