vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-11 12:20:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improvements to the modal media uploader on mobile in landscape orientation.

Browse Source 
* 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.



git-svn-id: https://develop.svn.wordpress.org/trunk@26250 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Matt Thomas
2013-11-18 20:06:47 +00:00
parent ed5df3ab38
commit 3a323a26b1
1 changed files with 84 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-includes/css/media-views.css
+84 -41
View File
@@ -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 {
display: none;
}
@@ -1652,7 +1655,36 @@
text-overflow: ellipsis;
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 */
.media-menu a:nth-child(2),
.media-menu a:last-child {
@@ -1716,17 +1748,8 @@
position: relative;
margin-right: 180px;
}
}
@media only screen and (max-width: 680px) {
.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) {
/* Full-bleed modal */
.media-modal {
position: fixed;
top: 0;
@@ -1757,36 +1780,6 @@
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 */
.embed-link-settings,
.embed-image-settings {
@@ -1802,6 +1795,56 @@
.gallery-settings h3 {
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;
}
}
/**