Media at small screens:

- Show the image details/settings as an overlay.
- Better styling for the frame drop-down.
- Remove the multi-select by default on the Insert frame.
See #27423

git-svn-id: https://develop.svn.wordpress.org/trunk@29452 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz 2014-08-09 05:08:16 +00:00
parent af851b9bda
commit c4424ea546
2 changed files with 39 additions and 34 deletions

View File

@ -2151,27 +2151,35 @@
}
.media-menu {
display: none;
width: auto;
max-width: 80%;
overflow: auto;
z-index: 2000;
top: 50px;
left: -300px;
right: auto;
bottom: auto;
padding: 5px 0;
border: 1px solid #ccc;
}
.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;
left: 0;
}
.media-menu > a {
padding: 10px 20px;
padding: 12px 16px;
font-size: 16px;
}
.media-menu > a.active {
display: none;
}
.media-menu .separator {
margin: 5px 10px;
}
.media-frame-title {
left: 0;
color: #21759b;
@ -2296,10 +2304,6 @@
display: none;
}
.media-menu .separator {
margin: 12px 10px;
}
.media-modal .attachments-browser .media-toolbar-primary,
.media-modal .attachments-browser .media-toolbar-secondary {
width: 50%;
@ -2339,8 +2343,7 @@
@media only screen and (max-width: 640px), screen and (max-height: 400px) {
/* Full-bleed modal */
.media-modal,
.image-details .media-modal,
.media-menu.visible {
.image-details .media-modal {
position: fixed;
top: 0;
left: 0;
@ -2353,7 +2356,15 @@
}
.media-sidebar {
display: none;
z-index: 1900;
max-width: 70%;
bottom: 120%;
box-sizing: border-box;
padding-bottom: 0;
}
.media-sidebar.visible {
bottom: 0;
}
.attachments-browser .attachments,
@ -2362,8 +2373,6 @@
right: 0;
}
.image-details .media-frame-title {
display: block;
top: 0;

View File

@ -4648,7 +4648,6 @@
tagName: 'li',
className: 'attachment',
template: media.template('attachment'),
_isTouch: false,
attributes: {
tabIndex: 0,
@ -4657,7 +4656,6 @@
events: {
'click .js--select-attachment': 'toggleSelectionHandler',
'touchend .attachment-preview': 'setTouch',
'change [data-setting]': 'updateSetting',
'change [data-setting] input': 'updateSetting',
'change [data-setting] select': 'updateSetting',
@ -4783,10 +4781,6 @@
}
},
setTouch: function() {
this._isTouch = true;
},
/**
* @param {Object} event
*/
@ -4825,11 +4819,6 @@
method = 'toggle';
}
if ( this._isTouch ) {
this._isTouch = false;
method = 'add';
}
this.toggleSelection({
method: method
});
@ -4948,9 +4937,10 @@
}
// Fixes bug that loses focus when selecting a featured image
if ( !method ) {
if ( ! method ) {
method = 'add';
}
if ( method !== 'add' ) {
method = 'reset';
}
@ -5980,6 +5970,11 @@
userSettings: this.model.get('displayUserSettings')
}) );
}
// Show the sidebar on mobile
if ( this.model.id === 'insert' ) {
sidebar.$el.addClass( 'visible' );
}
},
disposeSingle: function() {
@ -5987,6 +5982,8 @@
sidebar.unset('details');
sidebar.unset('compat');
sidebar.unset('display');
// Hide the sidebar on mobile
sidebar.$el.removeClass( 'visible' );
}
});
@ -6914,7 +6911,6 @@
value = Math.round( this.model.get( 'aspectRatio' ) * num );
this.model.set( 'customWidth', value, { silent: true } );
this.$( '[data-setting="customWidth"]' ).val( value );
}
},