From 8b8be72403fae46778d217fdd6fe74988eb42b08 Mon Sep 17 00:00:00 2001 From: Matt Thomas Date: Fri, 15 Nov 2013 19:53:50 +0000 Subject: [PATCH] Improvements to the media uploader at responsive sizes: * Change load order so larger breakpoint loads before smaller breakpoint. * Use absolute positioning rather than floats, to fix some overflow issues. * Remove the max-height media query so desktop browsers benefit from the responsive styles. * Reset text inputs to 16px so iOS doesn't force zoom. * Adjust the position of the close button so it doesn't overlap the Create Gallery link. See #25977. Props joen. git-svn-id: https://develop.svn.wordpress.org/trunk@26219 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/wp-admin.css | 249 ++++++++++++++-------------- src/wp-includes/css/media-views.css | 16 +- 2 files changed, 136 insertions(+), 129 deletions(-) diff --git a/src/wp-admin/css/wp-admin.css b/src/wp-admin/css/wp-admin.css index 5954aba704..9270fee4e6 100644 --- a/src/wp-admin/css/wp-admin.css +++ b/src/wp-admin/css/wp-admin.css @@ -11895,21 +11895,11 @@ li#wp-admin-bar-toggle-button { line-height: 1.5em; } - #media-items { - width: 100%; - } - - .media-modal { - width: auto; - } - - .media-frame { - overflow: auto; - } - .media-frame-menu { - position: relative; width: auto; + bottom: auto; + right: 0; + height: 60px; } .media-menu { @@ -11917,49 +11907,58 @@ li#wp-admin-bar-toggle-button { position: relative; border-bottom: 1px solid #dddddd; overflow: hidden; + padding: 10px 0 10px 10px; + } + + .media-menu a { + float: left; + width: 42%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + /* Shorten right-side links so they don't overlap the close button */ + .media-menu a:nth-child(2), + .media-menu a:last-child { + width: 40%; } .media-menu .separator { display: none; } - .media-menu a { - float: left; - width: 40%; - } - - .media-frame-router, .media-frame-content, .media-frame-toolbar { - left: auto; - right: auto; - top: auto; - bottom: auto; - position: relative; - } - .media-frame-title { - top: auto; + top: 72px; left: auto; - right: 0; height: auto; } - .media-frame-router { - margin-top: 10px; - } - .media-frame-title h1 { line-height: 3; font-size: 18px; } - .media-router { - bottom: -2px; + .media-frame-router { + top: 84px; + left: 0; + } + + .media-frame-content { + left: 0; + top: 118px; } - .media-frame-content { - min-height: 300px; - max-height: 500px; - overflow: auto; + .media-frame .attachments-browser { + padding-bottom: 300px; + } + + .media-sidebar { + border-bottom: 1px solid #dddddd; + } + + .media-modal { + width: auto; } .media-toolbar-primary, .media-toolbar-secondary { @@ -12338,95 +12337,6 @@ li#wp-admin-bar-toggle-button { } } -/* Tiny screens [ = smaller than 400 wide, 600 tall] */ -@media screen and (max-width: 400px), screen and (max-height: 600px) { - /* Align Add Media + Visual + Text tabs */ - #wp-content-media-buttons a { - font-size: 14px; - padding: 0 10px 0 10px; - } - - .media-modal { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - } - - .media-modal-backdrop { - position: fixed; - } - - .attachments-browser .attachment, - .attachments-browser .attachment-preview { - max-width: 100%; - } - - .attachments-browser .media-toolbar-primary input.search { - max-width: 150px; - } - - .uploader-inline-content { - position: relative; - } - - .media-sidebar .setting input[type="checkbox"], - .media-sidebar .field input[type="checkbox"] { - 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; - } - - .media-frame .attachments-browser { - padding-bottom: 300px; - } - - .attachments-browser .attachments { - top: 0; - } - - .attachment-details h3 { - margin-top: 45px; - } - - /* Image From Link */ - .embed-link-settings, - .embed-image-settings { - padding-bottom: 52px; - } - - /* Gallery */ - .media-frame.hide-router .media-frame-content { - top: 0; - border-top: none; - } - - .gallery-settings h3 { - margin-top: 45px; - } -} - @media only screen and (max-width: 500px) { .about-wrap { margin-right: 20px; @@ -12512,6 +12422,91 @@ li#wp-admin-bar-toggle-button { } } +/* Tiny screens [ = smaller than 500 wide] */ +@media screen and (max-width: 500px) { + /* Align Add Media + Visual + Text tabs */ + #wp-content-media-buttons a { + font-size: 14px; + padding: 0 10px 0 10px; + } + + .media-modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + + .media-modal-backdrop { + position: fixed; + } + + .attachments-browser .attachment, + .attachments-browser .attachment-preview { + max-width: 100%; + } + + .attachments-browser .media-toolbar-primary input.search { + max-width: 150px; + } + + .uploader-inline-content { + position: relative; + } + + .media-sidebar .setting input[type="checkbox"], + .media-sidebar .field input[type="checkbox"] { + 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 { + padding-bottom: 52px; + } + + /* Gallery */ + .media-frame.hide-router .media-frame-content { + top: 73px; + border-top: none; + } + + .gallery-settings h3 { + margin-top: 45px; + } +} + /* Smartphone */ @media screen and (max-width: 480px) { #moby6-overlay { diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 6f5cd88e88..1205deac49 100644 --- a/src/wp-includes/css/media-views.css +++ b/src/wp-includes/css/media-views.css @@ -1534,7 +1534,7 @@ } .media-menu > a { - padding: 4px 10px; + padding: 4px 5px; } .media-frame-title, @@ -1609,7 +1609,19 @@ } .media-modal-close { - right: 20px; + right: 10px; + } + + /* Text inputs need to be 16px, or they force zooming on iOS */ + .media-frame input[type="text"], + .media-frame input[type="password"], + .media-frame input[type="number"], + .media-frame input[type="search"], + .media-frame input[type="email"], + .media-frame input[type="url"], + .media-frame textarea, + .media-frame select { + font-size: 16px; } }