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

src/wp-includes/css/media-views.css

@@ -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;

src/wp-includes/js/media-views.js

@@ -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 );
-
 			}
 		},