Media: improve the media modal at small screen sizes and make it usable on phones, first run. Part-props gcorne, see #27423.
Built from https://develop.svn.wordpress.org/trunk@29446 git-svn-id: http://core.svn.wordpress.org/trunk@29224 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz
parent
c2926b7011
commit
b8198ecf64
|
|
@ -176,12 +176,12 @@ div.mce-path {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mce-path,
|
.mce-path,
|
||||||
.mce-path-item,
|
.mce-path-item,
|
||||||
.mce-path .mce-divider {
|
.mce-path .mce-divider {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mce-toolbar .mce-btn,
|
.mce-toolbar .mce-btn,
|
||||||
.qt-fullscreen {
|
.qt-fullscreen {
|
||||||
|
|
@ -934,32 +934,41 @@ i.mce-i-hr:before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
margin-top: 5px;
|
margin: 5px 0 0 5px;
|
||||||
margin-left: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and ( max-width: 782px ) {
|
@media screen and ( max-width: 782px ) {
|
||||||
.mce-toolbar .mce-btn button,
|
.mce-toolbar .mce-btn button,
|
||||||
.qt-fullscreen {
|
.qt-fullscreen {
|
||||||
padding: 7px 8px;
|
padding: 6px 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wp-fullscreen-buttons .mce-btn,
|
||||||
|
.mce-toolbar .mce-btn-group .mce-btn {
|
||||||
|
margin: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.qt-fullscreen {
|
.qt-fullscreen {
|
||||||
width: 38px;
|
width: 36px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mce-toolbar .mce-btn-group .mce-btn.mce-wp-fullscreen {
|
||||||
|
margin: 4px 0 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.mce-toolbar .mce-colorbutton .mce-preview {
|
.mce-toolbar .mce-colorbutton .mce-preview {
|
||||||
margin-right: -21px;
|
right: 8px;
|
||||||
|
bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mce-window .mce-btn {
|
.mce-window .mce-btn {
|
||||||
padding: 2px 0;
|
padding: 2px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.mce-toolbar-grp,
|
.has-dfw div.mce-toolbar-grp .mce-toolbar.mce-first,
|
||||||
.quicktags-toolbar {
|
.has-dfw .quicktags-toolbar {
|
||||||
padding-left: 46px;
|
padding-left: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -176,12 +176,12 @@ div.mce-path {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mce-path,
|
.mce-path,
|
||||||
.mce-path-item,
|
.mce-path-item,
|
||||||
.mce-path .mce-divider {
|
.mce-path .mce-divider {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mce-toolbar .mce-btn,
|
.mce-toolbar .mce-btn,
|
||||||
.qt-fullscreen {
|
.qt-fullscreen {
|
||||||
|
|
@ -934,32 +934,41 @@ i.mce-i-hr:before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin-top: 5px;
|
margin: 5px 5px 0 0;
|
||||||
margin-right: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and ( max-width: 782px ) {
|
@media screen and ( max-width: 782px ) {
|
||||||
.mce-toolbar .mce-btn button,
|
.mce-toolbar .mce-btn button,
|
||||||
.qt-fullscreen {
|
.qt-fullscreen {
|
||||||
padding: 7px 8px;
|
padding: 6px 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wp-fullscreen-buttons .mce-btn,
|
||||||
|
.mce-toolbar .mce-btn-group .mce-btn {
|
||||||
|
margin: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.qt-fullscreen {
|
.qt-fullscreen {
|
||||||
width: 38px;
|
width: 36px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mce-toolbar .mce-btn-group .mce-btn.mce-wp-fullscreen {
|
||||||
|
margin: 4px 4px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
.mce-toolbar .mce-colorbutton .mce-preview {
|
.mce-toolbar .mce-colorbutton .mce-preview {
|
||||||
margin-left: -21px;
|
left: 8px;
|
||||||
|
bottom: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mce-window .mce-btn {
|
.mce-window .mce-btn {
|
||||||
padding: 2px 0;
|
padding: 2px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.mce-toolbar-grp,
|
.has-dfw div.mce-toolbar-grp .mce-toolbar.mce-first,
|
||||||
.quicktags-toolbar {
|
.has-dfw .quicktags-toolbar {
|
||||||
padding-right: 46px;
|
padding-right: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -16,7 +16,6 @@
|
||||||
.media-frame input,
|
.media-frame input,
|
||||||
.media-frame textarea {
|
.media-frame textarea {
|
||||||
padding: 6px 8px;
|
padding: 6px 8px;
|
||||||
line-height: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-frame select,
|
.media-frame select,
|
||||||
|
|
@ -144,7 +143,7 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 48px;
|
height: 50px;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
color: #777;
|
color: #777;
|
||||||
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
|
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
|
||||||
|
|
@ -631,6 +630,10 @@
|
||||||
box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
|
box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.media-frame-title .dashicons {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.media-frame-title h1 {
|
.media-frame-title h1 {
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
|
|
@ -694,7 +697,6 @@
|
||||||
.media-frame .search {
|
.media-frame .search {
|
||||||
margin-top: 11px;
|
margin-top: 11px;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
line-height: 18px;
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #464646;
|
color: #464646;
|
||||||
font-family: "Open Sans", sans-serif;
|
font-family: "Open Sans", sans-serif;
|
||||||
|
|
@ -730,7 +732,7 @@
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
width: 20%;
|
width: 25%;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -1790,11 +1792,16 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.image-details .embed-media-settings,
|
||||||
|
.image-details .embed-media-settings div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
.image-details .column-settings {
|
.image-details .column-settings {
|
||||||
background: #f3f3f3;
|
background: #f3f3f3;
|
||||||
border-left: 1px solid #ddd;
|
border-left: 1px solid #ddd;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
width: 52%;
|
width: 55%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
@ -1807,9 +1814,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-details .column-image {
|
.image-details .column-image {
|
||||||
width: 48%;
|
width: 45%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 52%;
|
right: 55%;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2125,10 +2132,10 @@
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 960px) {
|
@media only screen and (max-width: 940px) {
|
||||||
.media-frame-content .media-toolbar-primary .search,
|
.media-frame-content .media-toolbar-primary .search,
|
||||||
.media-frame-content .media-toolbar-secondary .attachment-filters {
|
.media-frame-content .media-toolbar-secondary .attachment-filters {
|
||||||
max-width: 120px;
|
max-width: 134px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2136,30 +2143,72 @@
|
||||||
* Responsive layout
|
* Responsive layout
|
||||||
*/
|
*/
|
||||||
@media only screen and (max-width: 900px) {
|
@media only screen and (max-width: 900px) {
|
||||||
.media-frame-menu {
|
|
||||||
width: 139px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-menu > a {
|
|
||||||
padding: 4px 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
/* Drop-down menu */
|
||||||
.media-frame-title,
|
.media-frame-title,
|
||||||
.media-frame-router,
|
.media-frame-router,
|
||||||
.media-frame-content,
|
.media-frame-content,
|
||||||
.media-frame-toolbar {
|
.media-frame-toolbar {
|
||||||
right: 140px;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.media-frame-menu {
|
||||||
|
position: static;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-menu {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-menu.visible {
|
||||||
|
z-index: 2000;
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
top: 30px;
|
||||||
|
right: 30px;
|
||||||
|
left: 30px;
|
||||||
|
bottom: 30px;
|
||||||
|
width: 250px;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-menu > a {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-frame-title {
|
||||||
|
right: 0;
|
||||||
|
color: #21759b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-frame-title .dashicons {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-frame-title h1 {
|
||||||
|
line-height: 3;
|
||||||
|
font-size: 18px;
|
||||||
|
float: right;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
/* End drop-down menu */
|
||||||
|
|
||||||
.media-sidebar {
|
.media-sidebar {
|
||||||
width: 159px;
|
width: 230px;
|
||||||
padding: 0 10px 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.attachments-browser .attachments,
|
.attachments-browser .attachments,
|
||||||
.attachments-browser .uploader-inline,
|
.attachments-browser .uploader-inline,
|
||||||
.attachments-browser .media-toolbar {
|
.attachments-browser .media-toolbar {
|
||||||
left: 180px;
|
left: 262px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-sidebar .setting {
|
||||||
|
margin: 6px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-sidebar .setting input,
|
.media-sidebar .setting input,
|
||||||
|
|
@ -2172,12 +2221,16 @@
|
||||||
.media-sidebar .setting span,
|
.media-sidebar .setting span,
|
||||||
.compat-item label span {
|
.compat-item label span {
|
||||||
text-align: inherit;
|
text-align: inherit;
|
||||||
display: block;
|
|
||||||
min-height: 16px;
|
min-height: 16px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 8px 2px 0;
|
padding: 8px 2px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.media-sidebar .setting .value {
|
||||||
|
float: none;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.media-sidebar .setting input[type="text"],
|
.media-sidebar .setting input[type="text"],
|
||||||
.media-sidebar .setting input[type="password"],
|
.media-sidebar .setting input[type="password"],
|
||||||
.media-sidebar .setting input[type="email"],
|
.media-sidebar .setting input[type="email"],
|
||||||
|
|
@ -2189,6 +2242,7 @@
|
||||||
.media-sidebar .setting select {
|
.media-sidebar .setting select {
|
||||||
width: 98%;
|
width: 98%;
|
||||||
max-width: none;
|
max-width: none;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-sidebar .setting select.columns {
|
.media-sidebar .setting select.columns {
|
||||||
|
|
@ -2201,6 +2255,15 @@
|
||||||
padding: 3px 6px;
|
padding: 3px 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.image-details .column-image {
|
||||||
|
width: 30%;
|
||||||
|
right: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-details .column-settings {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
.image-details .media-modal {
|
.image-details .media-modal {
|
||||||
right: 30px;
|
right: 30px;
|
||||||
left: 30px;
|
left: 30px;
|
||||||
|
|
@ -2244,8 +2307,26 @@
|
||||||
margin: 12px 10px;
|
margin: 12px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-modal-close {
|
.media-modal .attachments-browser .media-toolbar-primary,
|
||||||
left: 10px;
|
.media-modal .attachments-browser .media-toolbar-secondary {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-modal .attachments-browser .media-toolbar .search {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-modal .attachments-browser .media-toolbar .attachment-filters {
|
||||||
|
margin: 11px 0 0;
|
||||||
|
height: auto;
|
||||||
|
max-width: 65%;
|
||||||
|
max-width: calc(100% - 38px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-modal .attachments-browser .media-toolbar .spinner {
|
||||||
|
margin: 14px 8px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Text inputs need to be 16px, or they force zooming on iOS */
|
/* Text inputs need to be 16px, or they force zooming on iOS */
|
||||||
|
|
@ -2263,142 +2344,10 @@
|
||||||
|
|
||||||
/* Responsive on portrait and landscape */
|
/* Responsive on portrait and landscape */
|
||||||
@media only screen and (max-width: 640px), screen and (max-height: 400px) {
|
@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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame-menu {
|
|
||||||
width: auto;
|
|
||||||
bottom: auto;
|
|
||||||
left: 0;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-menu {
|
|
||||||
border-left: none;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame-title {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-details .media-frame-title {
|
|
||||||
display: block;
|
|
||||||
top: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 */
|
|
||||||
.media-menu a:nth-child(2),
|
|
||||||
.media-menu a:last-child {
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-menu .separator {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame-title {
|
|
||||||
top: 72px;
|
|
||||||
right: auto;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame-title h1 {
|
|
||||||
line-height: 3;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame-router {
|
|
||||||
top: 84px;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame-content {
|
|
||||||
right: 0;
|
|
||||||
top: 118px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-details .media-frame.hide-router .media-frame-content {
|
|
||||||
top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame .attachments-browser {
|
|
||||||
padding-bottom: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-sidebar {
|
|
||||||
border-bottom: 1px solid #dddddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-modal {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-toolbar-primary, .media-toolbar-secondary {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uploader-inline-content {
|
|
||||||
top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uploader-inline-content .upload-ui {
|
|
||||||
margin: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uploader-inline-content .post-upload-ui {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attachments-browser .attachments,
|
|
||||||
.attachments-browser .uploader-inline {
|
|
||||||
position: relative;
|
|
||||||
margin-left: 180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Full-bleed modal */
|
/* Full-bleed modal */
|
||||||
.media-modal,
|
.media-modal,
|
||||||
.image-details .media-modal {
|
.image-details .media-modal,
|
||||||
|
.media-menu.visible {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
@ -2410,69 +2359,34 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.attachments-browser .attachment,
|
.media-sidebar {
|
||||||
.attachments-browser .attachment-preview {
|
display: none;
|
||||||
max-width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.attachments-browser .media-toolbar-primary input.search {
|
.attachments-browser .attachments,
|
||||||
max-width: 150px;
|
.attachments-browser .uploader-inline,
|
||||||
}
|
.attachments-browser .media-toolbar {
|
||||||
|
left: 0;
|
||||||
.uploader-inline-content {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Image From Link */
|
|
||||||
.embed-link-settings,
|
|
||||||
.embed-media-settings {
|
|
||||||
padding-bottom: 52px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-details .column-settings,
|
|
||||||
.image-details .column-image {
|
|
||||||
position: relative;
|
|
||||||
padding: 10px 0 20px 0;
|
|
||||||
right: 0;
|
|
||||||
width: 100%;
|
|
||||||
min-height: inherit;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Gallery */
|
|
||||||
.media-frame.hide-router .media-frame-content {
|
.image-details .media-frame-title {
|
||||||
top: 73px;
|
display: block;
|
||||||
border-top: none;
|
top: 0;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collection-settings h3 {
|
/* Media tabs on the top */
|
||||||
margin-top: 45px;
|
.media-frame-content .media-toolbar .instructions {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Landscape specific header override */
|
/* Landscape specific header override */
|
||||||
@media screen and (max-height: 400px) {
|
@media screen and (max-height: 400px) {
|
||||||
.media-menu {
|
.media-menu {
|
||||||
padding: 0 10px 0 0;
|
padding: 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 {
|
.media-frame-router {
|
||||||
|
|
@ -2484,7 +2398,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.attachments-browser .attachments {
|
.attachments-browser .attachments {
|
||||||
top: 2px;
|
top: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Prevent unnecessary scrolling on title input */
|
/* Prevent unnecessary scrolling on title input */
|
||||||
|
|
@ -2493,10 +2407,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
@media only screen and (max-width: 480px) {
|
||||||
.media-frame-content .media-toolbar .search,
|
.media-frame-content .media-toolbar .search,
|
||||||
.media-frame-content .media-toolbar .attachment-filters {
|
.media-frame-content .media-toolbar .attachment-filters {
|
||||||
max-width: 85px;
|
max-width: 90px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2884,7 +2798,7 @@
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
position: static;
|
position: static;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: none !important;
|
max-width: 280px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -16,7 +16,6 @@
|
||||||
.media-frame input,
|
.media-frame input,
|
||||||
.media-frame textarea {
|
.media-frame textarea {
|
||||||
padding: 6px 8px;
|
padding: 6px 8px;
|
||||||
line-height: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-frame select,
|
.media-frame select,
|
||||||
|
|
@ -144,7 +143,7 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 48px;
|
height: 50px;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
color: #777;
|
color: #777;
|
||||||
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
|
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
|
||||||
|
|
@ -631,6 +630,10 @@
|
||||||
box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
|
box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.media-frame-title .dashicons {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.media-frame-title h1 {
|
.media-frame-title h1 {
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
|
|
@ -694,7 +697,6 @@
|
||||||
.media-frame .search {
|
.media-frame .search {
|
||||||
margin-top: 11px;
|
margin-top: 11px;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
line-height: 18px;
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #464646;
|
color: #464646;
|
||||||
font-family: "Open Sans", sans-serif;
|
font-family: "Open Sans", sans-serif;
|
||||||
|
|
@ -730,7 +732,7 @@
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
width: 20%;
|
width: 25%;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -1790,11 +1792,16 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.image-details .embed-media-settings,
|
||||||
|
.image-details .embed-media-settings div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
.image-details .column-settings {
|
.image-details .column-settings {
|
||||||
background: #f3f3f3;
|
background: #f3f3f3;
|
||||||
border-right: 1px solid #ddd;
|
border-right: 1px solid #ddd;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
width: 52%;
|
width: 55%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -1807,9 +1814,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-details .column-image {
|
.image-details .column-image {
|
||||||
width: 48%;
|
width: 45%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 52%;
|
left: 55%;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2125,10 +2132,10 @@
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 960px) {
|
@media only screen and (max-width: 940px) {
|
||||||
.media-frame-content .media-toolbar-primary .search,
|
.media-frame-content .media-toolbar-primary .search,
|
||||||
.media-frame-content .media-toolbar-secondary .attachment-filters {
|
.media-frame-content .media-toolbar-secondary .attachment-filters {
|
||||||
max-width: 120px;
|
max-width: 134px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2136,30 +2143,72 @@
|
||||||
* Responsive layout
|
* Responsive layout
|
||||||
*/
|
*/
|
||||||
@media only screen and (max-width: 900px) {
|
@media only screen and (max-width: 900px) {
|
||||||
.media-frame-menu {
|
|
||||||
width: 139px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-menu > a {
|
|
||||||
padding: 4px 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
/* Drop-down menu */
|
||||||
.media-frame-title,
|
.media-frame-title,
|
||||||
.media-frame-router,
|
.media-frame-router,
|
||||||
.media-frame-content,
|
.media-frame-content,
|
||||||
.media-frame-toolbar {
|
.media-frame-toolbar {
|
||||||
left: 140px;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.media-frame-menu {
|
||||||
|
position: static;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-menu {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-menu.visible {
|
||||||
|
z-index: 2000;
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
top: 30px;
|
||||||
|
left: 30px;
|
||||||
|
right: 30px;
|
||||||
|
bottom: 30px;
|
||||||
|
width: 250px;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-menu > a {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-frame-title {
|
||||||
|
left: 0;
|
||||||
|
color: #21759b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-frame-title .dashicons {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-frame-title h1 {
|
||||||
|
line-height: 3;
|
||||||
|
font-size: 18px;
|
||||||
|
float: left;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
/* End drop-down menu */
|
||||||
|
|
||||||
.media-sidebar {
|
.media-sidebar {
|
||||||
width: 159px;
|
width: 230px;
|
||||||
padding: 0 10px 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.attachments-browser .attachments,
|
.attachments-browser .attachments,
|
||||||
.attachments-browser .uploader-inline,
|
.attachments-browser .uploader-inline,
|
||||||
.attachments-browser .media-toolbar {
|
.attachments-browser .media-toolbar {
|
||||||
right: 180px;
|
right: 262px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-sidebar .setting {
|
||||||
|
margin: 6px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-sidebar .setting input,
|
.media-sidebar .setting input,
|
||||||
|
|
@ -2172,12 +2221,16 @@
|
||||||
.media-sidebar .setting span,
|
.media-sidebar .setting span,
|
||||||
.compat-item label span {
|
.compat-item label span {
|
||||||
text-align: inherit;
|
text-align: inherit;
|
||||||
display: block;
|
|
||||||
min-height: 16px;
|
min-height: 16px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 8px 2px 0;
|
padding: 8px 2px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.media-sidebar .setting .value {
|
||||||
|
float: none;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.media-sidebar .setting input[type="text"],
|
.media-sidebar .setting input[type="text"],
|
||||||
.media-sidebar .setting input[type="password"],
|
.media-sidebar .setting input[type="password"],
|
||||||
.media-sidebar .setting input[type="email"],
|
.media-sidebar .setting input[type="email"],
|
||||||
|
|
@ -2189,6 +2242,7 @@
|
||||||
.media-sidebar .setting select {
|
.media-sidebar .setting select {
|
||||||
width: 98%;
|
width: 98%;
|
||||||
max-width: none;
|
max-width: none;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-sidebar .setting select.columns {
|
.media-sidebar .setting select.columns {
|
||||||
|
|
@ -2201,6 +2255,15 @@
|
||||||
padding: 3px 6px;
|
padding: 3px 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.image-details .column-image {
|
||||||
|
width: 30%;
|
||||||
|
left: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-details .column-settings {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
.image-details .media-modal {
|
.image-details .media-modal {
|
||||||
left: 30px;
|
left: 30px;
|
||||||
right: 30px;
|
right: 30px;
|
||||||
|
|
@ -2244,8 +2307,26 @@
|
||||||
margin: 12px 10px;
|
margin: 12px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-modal-close {
|
.media-modal .attachments-browser .media-toolbar-primary,
|
||||||
right: 10px;
|
.media-modal .attachments-browser .media-toolbar-secondary {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-modal .attachments-browser .media-toolbar .search {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-modal .attachments-browser .media-toolbar .attachment-filters {
|
||||||
|
margin: 11px 0 0;
|
||||||
|
height: auto;
|
||||||
|
max-width: 65%;
|
||||||
|
max-width: calc(100% - 38px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.media-modal .attachments-browser .media-toolbar .spinner {
|
||||||
|
margin: 14px 8px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Text inputs need to be 16px, or they force zooming on iOS */
|
/* Text inputs need to be 16px, or they force zooming on iOS */
|
||||||
|
|
@ -2263,142 +2344,10 @@
|
||||||
|
|
||||||
/* Responsive on portrait and landscape */
|
/* Responsive on portrait and landscape */
|
||||||
@media only screen and (max-width: 640px), screen and (max-height: 400px) {
|
@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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame-menu {
|
|
||||||
width: auto;
|
|
||||||
bottom: auto;
|
|
||||||
right: 0;
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-menu {
|
|
||||||
border-right: none;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame-title {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-details .media-frame-title {
|
|
||||||
display: block;
|
|
||||||
top: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-menu .separator {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame-title {
|
|
||||||
top: 72px;
|
|
||||||
left: auto;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame-title h1 {
|
|
||||||
line-height: 3;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame-router {
|
|
||||||
top: 84px;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame-content {
|
|
||||||
left: 0;
|
|
||||||
top: 118px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-details .media-frame.hide-router .media-frame-content {
|
|
||||||
top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-frame .attachments-browser {
|
|
||||||
padding-bottom: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-sidebar {
|
|
||||||
border-bottom: 1px solid #dddddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-modal {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-toolbar-primary, .media-toolbar-secondary {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uploader-inline-content {
|
|
||||||
top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uploader-inline-content .upload-ui {
|
|
||||||
margin: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uploader-inline-content .post-upload-ui {
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.attachments-browser .attachments,
|
|
||||||
.attachments-browser .uploader-inline {
|
|
||||||
position: relative;
|
|
||||||
margin-right: 180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Full-bleed modal */
|
/* Full-bleed modal */
|
||||||
.media-modal,
|
.media-modal,
|
||||||
.image-details .media-modal {
|
.image-details .media-modal,
|
||||||
|
.media-menu.visible {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -2410,69 +2359,34 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.attachments-browser .attachment,
|
.media-sidebar {
|
||||||
.attachments-browser .attachment-preview {
|
display: none;
|
||||||
max-width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.attachments-browser .media-toolbar-primary input.search {
|
.attachments-browser .attachments,
|
||||||
max-width: 150px;
|
.attachments-browser .uploader-inline,
|
||||||
}
|
.attachments-browser .media-toolbar {
|
||||||
|
right: 0;
|
||||||
.uploader-inline-content {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Image From Link */
|
|
||||||
.embed-link-settings,
|
|
||||||
.embed-media-settings {
|
|
||||||
padding-bottom: 52px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-details .column-settings,
|
|
||||||
.image-details .column-image {
|
|
||||||
position: relative;
|
|
||||||
padding: 10px 0 20px 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
min-height: inherit;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Gallery */
|
|
||||||
.media-frame.hide-router .media-frame-content {
|
.image-details .media-frame-title {
|
||||||
top: 73px;
|
display: block;
|
||||||
border-top: none;
|
top: 0;
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collection-settings h3 {
|
/* Media tabs on the top */
|
||||||
margin-top: 45px;
|
.media-frame-content .media-toolbar .instructions {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Landscape specific header override */
|
/* Landscape specific header override */
|
||||||
@media screen and (max-height: 400px) {
|
@media screen and (max-height: 400px) {
|
||||||
.media-menu {
|
.media-menu {
|
||||||
padding: 0 0 0 10px;
|
padding: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.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 {
|
.media-frame-router {
|
||||||
|
|
@ -2484,7 +2398,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.attachments-browser .attachments {
|
.attachments-browser .attachments {
|
||||||
top: 2px;
|
top: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Prevent unnecessary scrolling on title input */
|
/* Prevent unnecessary scrolling on title input */
|
||||||
|
|
@ -2493,10 +2407,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 680px) {
|
@media only screen and (max-width: 480px) {
|
||||||
.media-frame-content .media-toolbar .search,
|
.media-frame-content .media-toolbar .search,
|
||||||
.media-frame-content .media-toolbar .attachment-filters {
|
.media-frame-content .media-toolbar .attachment-filters {
|
||||||
max-width: 85px;
|
max-width: 90px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2884,7 +2798,7 @@
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
position: static;
|
position: static;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: none !important;
|
max-width: 280px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1048,16 +1048,20 @@
|
||||||
* @returns {wp.media.view.MediaFrame}
|
* @returns {wp.media.view.MediaFrame}
|
||||||
*/
|
*/
|
||||||
open: function( id, options ) {
|
open: function( id, options ) {
|
||||||
var workflow, focusTrap;
|
var workflow, focusTrap, scrollTop;
|
||||||
|
|
||||||
if ( 'ontouchend' in document ) {
|
if ( 'ontouchend' in document ) {
|
||||||
// Close the onscreen keyboard
|
// Close the onscreen keyboard
|
||||||
if ( ! focusTrap ) {
|
if ( ! focusTrap ) {
|
||||||
focusTrap = $( '<input type="text" />' );
|
focusTrap = $( '<input type="text" style="width: 1px; height: 1px;" />' );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Keep the scroll position
|
||||||
|
scrollTop = $( window ).scrollTop();
|
||||||
|
|
||||||
$( document.body ).append( focusTrap );
|
$( document.body ).append( focusTrap );
|
||||||
focusTrap.focus().blur().remove();
|
focusTrap.focus().blur().remove();
|
||||||
|
$( window ).scrollTop( scrollTop );
|
||||||
}
|
}
|
||||||
|
|
||||||
options = options || {};
|
options = options || {};
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,8 @@
|
||||||
/* global _wpMediaViewsL10n, confirm, getUserSetting, setUserSetting */
|
/* global _wpMediaViewsL10n, confirm, getUserSetting, setUserSetting */
|
||||||
(function($, _){
|
( function( $, _ ) {
|
||||||
var media = wp.media, l10n;
|
var l10n,
|
||||||
|
media = wp.media,
|
||||||
|
isTouchDevice = ( 'ontouchend' in document );
|
||||||
|
|
||||||
// Link any localized strings.
|
// Link any localized strings.
|
||||||
l10n = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n;
|
l10n = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n;
|
||||||
|
|
@ -1834,6 +1836,10 @@
|
||||||
template: media.template('media-frame'),
|
template: media.template('media-frame'),
|
||||||
regions: ['menu','title','content','toolbar','router'],
|
regions: ['menu','title','content','toolbar','router'],
|
||||||
|
|
||||||
|
events: {
|
||||||
|
'click div.media-frame-title h1': 'toggleMenu'
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @global wp.Uploader
|
* @global wp.Uploader
|
||||||
*/
|
*/
|
||||||
|
|
@ -1883,6 +1889,10 @@
|
||||||
this.on( 'title:create:default', this.createTitle, this );
|
this.on( 'title:create:default', this.createTitle, this );
|
||||||
this.title.mode('default');
|
this.title.mode('default');
|
||||||
|
|
||||||
|
this.on( 'title:render', function( view ) {
|
||||||
|
view.$el.append( '<span class="dashicons dashicons-arrow-down"></span>' );
|
||||||
|
});
|
||||||
|
|
||||||
// Bind default menu.
|
// Bind default menu.
|
||||||
this.on( 'menu:create:default', this.createMenu, this );
|
this.on( 'menu:create:default', this.createMenu, this );
|
||||||
},
|
},
|
||||||
|
|
@ -1918,6 +1928,11 @@
|
||||||
controller: this
|
controller: this
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
toggleMenu: function() {
|
||||||
|
this.$el.find( '.media-menu' ).toggleClass( 'visible' );
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {Object} toolbar
|
* @param {Object} toolbar
|
||||||
* @this wp.media.controller.Region
|
* @this wp.media.controller.Region
|
||||||
|
|
@ -2555,7 +2570,10 @@
|
||||||
}).render();
|
}).render();
|
||||||
|
|
||||||
this.content.set( view );
|
this.content.set( view );
|
||||||
view.url.focus();
|
|
||||||
|
if ( ! isTouchDevice ) {
|
||||||
|
view.url.focus();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
editSelectionContent: function() {
|
editSelectionContent: function() {
|
||||||
|
|
@ -4412,13 +4430,17 @@
|
||||||
|
|
||||||
// When selecting a tab along the left side,
|
// When selecting a tab along the left side,
|
||||||
// focus should be transferred into the main panel
|
// focus should be transferred into the main panel
|
||||||
$('.media-frame-content input').first().focus();
|
if ( ! isTouchDevice ) {
|
||||||
|
$('.media-frame-content input').first().focus();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
click: function() {
|
click: function() {
|
||||||
var state = this.options.state;
|
var state = this.options.state;
|
||||||
|
|
||||||
if ( state ) {
|
if ( state ) {
|
||||||
this.controller.setState( state );
|
this.controller.setState( state );
|
||||||
|
this.views.parent.$el.removeClass( 'visible' ); // TODO: or hide on any click, see below
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
|
|
@ -4452,6 +4474,17 @@
|
||||||
property: 'state',
|
property: 'state',
|
||||||
ItemView: media.view.MenuItem,
|
ItemView: media.view.MenuItem,
|
||||||
region: 'menu',
|
region: 'menu',
|
||||||
|
|
||||||
|
/* TODO: alternatively hide on any click anywhere
|
||||||
|
events: {
|
||||||
|
'click': 'click'
|
||||||
|
},
|
||||||
|
|
||||||
|
click: function() {
|
||||||
|
this.$el.removeClass( 'visible' );
|
||||||
|
},
|
||||||
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {Object} options
|
* @param {Object} options
|
||||||
* @param {string} id
|
* @param {string} id
|
||||||
|
|
@ -4615,6 +4648,7 @@
|
||||||
tagName: 'li',
|
tagName: 'li',
|
||||||
className: 'attachment',
|
className: 'attachment',
|
||||||
template: media.template('attachment'),
|
template: media.template('attachment'),
|
||||||
|
_isTouch: false,
|
||||||
|
|
||||||
attributes: {
|
attributes: {
|
||||||
tabIndex: 0,
|
tabIndex: 0,
|
||||||
|
|
@ -4623,6 +4657,7 @@
|
||||||
|
|
||||||
events: {
|
events: {
|
||||||
'click .js--select-attachment': 'toggleSelectionHandler',
|
'click .js--select-attachment': 'toggleSelectionHandler',
|
||||||
|
'touchend .attachment-preview': 'setTouch',
|
||||||
'change [data-setting]': 'updateSetting',
|
'change [data-setting]': 'updateSetting',
|
||||||
'change [data-setting] input': 'updateSetting',
|
'change [data-setting] input': 'updateSetting',
|
||||||
'change [data-setting] select': 'updateSetting',
|
'change [data-setting] select': 'updateSetting',
|
||||||
|
|
@ -4747,6 +4782,11 @@
|
||||||
this.$bar.width( this.model.get('percent') + '%' );
|
this.$bar.width( this.model.get('percent') + '%' );
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
setTouch: function() {
|
||||||
|
this._isTouch = true;
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {Object} event
|
* @param {Object} event
|
||||||
*/
|
*/
|
||||||
|
|
@ -4785,6 +4825,11 @@
|
||||||
method = 'toggle';
|
method = 'toggle';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if ( this._isTouch ) {
|
||||||
|
this._isTouch = false;
|
||||||
|
method = 'add';
|
||||||
|
}
|
||||||
|
|
||||||
this.toggleSelection({
|
this.toggleSelection({
|
||||||
method: method
|
method: method
|
||||||
});
|
});
|
||||||
|
|
@ -4878,7 +4923,9 @@
|
||||||
selection.single( model );
|
selection.single( model );
|
||||||
|
|
||||||
// When selecting attachments, focus should be transferred to the right details panel
|
// When selecting attachments, focus should be transferred to the right details panel
|
||||||
$('.attachment-details input').first().focus();
|
if ( ! isTouchDevice ) {
|
||||||
|
$('.attachment-details input').first().focus();
|
||||||
|
}
|
||||||
|
|
||||||
return;
|
return;
|
||||||
|
|
||||||
|
|
@ -4888,11 +4935,15 @@
|
||||||
selection[ this.selected() ? 'remove' : 'add' ]( model );
|
selection[ this.selected() ? 'remove' : 'add' ]( model );
|
||||||
selection.single( model );
|
selection.single( model );
|
||||||
|
|
||||||
if ( this.selected() ) {
|
if ( ! isTouchDevice && this.selected() ) {
|
||||||
// When selecting an attachment, focus should be transferred to the right details panel
|
// When selecting an attachment, focus should be transferred to the right details panel
|
||||||
$('.attachment-details input').first().focus();
|
$('.attachment-details input').first().focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return;
|
||||||
|
} else if ( 'add' === method ) {
|
||||||
|
selection.add( model );
|
||||||
|
selection.single( model );
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -4948,7 +4999,9 @@
|
||||||
.find( '.check' ).attr( 'tabindex', '0' );
|
.find( '.check' ).attr( 'tabindex', '0' );
|
||||||
|
|
||||||
// When selecting an attachment, focus should be transferred to the right details panel
|
// When selecting an attachment, focus should be transferred to the right details panel
|
||||||
$('.attachment-details input').first().focus();
|
if ( ! isTouchDevice ) {
|
||||||
|
$('.attachment-details input').first().focus();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @param {Backbone.Model} model
|
* @param {Backbone.Model} model
|
||||||
|
|
@ -5215,12 +5268,12 @@
|
||||||
this.el.id = _.uniqueId('__attachments-view-');
|
this.el.id = _.uniqueId('__attachments-view-');
|
||||||
|
|
||||||
_.defaults( this.options, {
|
_.defaults( this.options, {
|
||||||
refreshSensitivity: 200,
|
refreshSensitivity: isTouchDevice ? 300 : 200,
|
||||||
refreshThreshold: 3,
|
refreshThreshold: 3,
|
||||||
AttachmentView: media.view.Attachment,
|
AttachmentView: media.view.Attachment,
|
||||||
sortable: false,
|
sortable: false,
|
||||||
resize: true,
|
resize: true,
|
||||||
idealColumnWidth: 150
|
idealColumnWidth: $( window ).width() < 640 ? 135 : 150
|
||||||
});
|
});
|
||||||
|
|
||||||
this._viewsByCid = {};
|
this._viewsByCid = {};
|
||||||
|
|
@ -5253,7 +5306,8 @@
|
||||||
_.bindAll( this, 'setColumns' );
|
_.bindAll( this, 'setColumns' );
|
||||||
|
|
||||||
if ( this.options.resize ) {
|
if ( this.options.resize ) {
|
||||||
$( window ).on( 'resize.attachments', this.setColumns );
|
$( window ).on( 'resize.media-modal-columns', this.setColumns );
|
||||||
|
this.controller.on( 'open', this.setColumns );
|
||||||
}
|
}
|
||||||
|
|
||||||
// Call this.setColumns() after this view has been rendered in the DOM so
|
// Call this.setColumns() after this view has been rendered in the DOM so
|
||||||
|
|
@ -5263,7 +5317,7 @@
|
||||||
|
|
||||||
dispose: function() {
|
dispose: function() {
|
||||||
this.collection.props.off( null, null, this );
|
this.collection.props.off( null, null, this );
|
||||||
$( window ).off( 'resize.attachments', this.setColumns );
|
$( window ).off( 'resize.media-modal-columns' );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* call 'dispose' directly on the parent class
|
* call 'dispose' directly on the parent class
|
||||||
|
|
@ -5272,19 +5326,22 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
setColumns: function() {
|
setColumns: function() {
|
||||||
var prev = this.columns;
|
var prev = this.columns,
|
||||||
|
width = this.$el.width();
|
||||||
|
|
||||||
this.columns = Math.round( this.$el.width() / this.options.idealColumnWidth );
|
if ( width ) {
|
||||||
|
this.columns = Math.round( width / this.options.idealColumnWidth ) || 1;
|
||||||
|
|
||||||
if ( prev !== this.columns ) {
|
if ( ! prev || prev !== this.columns ) {
|
||||||
this.$el.attr( 'data-columns', this.columns );
|
this.$el.attr( 'data-columns', this.columns );
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
initSortable: function() {
|
initSortable: function() {
|
||||||
var collection = this.collection;
|
var collection = this.collection;
|
||||||
|
|
||||||
if ( ! this.options.sortable || ! $.fn.sortable ) {
|
if ( isTouchDevice || ! this.options.sortable || ! $.fn.sortable ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -5347,7 +5404,7 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
refreshSortable: function() {
|
refreshSortable: function() {
|
||||||
if ( ! this.options.sortable || ! $.fn.sortable ) {
|
if ( isTouchDevice || ! this.options.sortable || ! $.fn.sortable ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -6273,7 +6330,7 @@
|
||||||
$input.removeClass( 'hidden' );
|
$input.removeClass( 'hidden' );
|
||||||
|
|
||||||
// If the input is visible, focus and select its contents.
|
// If the input is visible, focus and select its contents.
|
||||||
if ( $input.is(':visible') ) {
|
if ( ! isTouchDevice && $input.is(':visible') ) {
|
||||||
$input.focus()[0].select();
|
$input.focus()[0].select();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -6633,7 +6690,9 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
ready: function() {
|
ready: function() {
|
||||||
this.focus();
|
if ( ! isTouchDevice ) {
|
||||||
|
this.focus();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
url: function( event ) {
|
url: function( event ) {
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue