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. Built from https://develop.svn.wordpress.org/trunk@26219 git-svn-id: http://core.svn.wordpress.org/trunk@26127 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Matt Thomas
parent
330948ced3
commit
a9bab73408
|
|
@ -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;
|
||||
left: 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 10px 10px 0;
|
||||
}
|
||||
|
||||
.media-menu a {
|
||||
float: right;
|
||||
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: right;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.media-frame-router, .media-frame-content, .media-frame-toolbar {
|
||||
right: auto;
|
||||
left: auto;
|
||||
top: auto;
|
||||
bottom: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.media-frame-title {
|
||||
top: auto;
|
||||
top: 72px;
|
||||
right: auto;
|
||||
left: 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;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.media-frame-content {
|
||||
min-height: 300px;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
right: 0;
|
||||
top: 118px;
|
||||
}
|
||||
|
||||
.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;
|
||||
right: 0;
|
||||
left: 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;
|
||||
right: 0;
|
||||
left: 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-left: 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;
|
||||
right: 0;
|
||||
left: 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;
|
||||
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 */
|
||||
.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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 {
|
||||
min-height: 300px;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
left: 0;
|
||||
top: 118px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1534,7 +1534,7 @@
|
|||
}
|
||||
|
||||
.media-menu > a {
|
||||
padding: 4px 10px;
|
||||
padding: 4px 5px;
|
||||
}
|
||||
|
||||
.media-frame-title,
|
||||
|
|
@ -1609,7 +1609,19 @@
|
|||
}
|
||||
|
||||
.media-modal-close {
|
||||
left: 20px;
|
||||
left: 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue