Changeset 29452

Timestamp:

08/09/2014 05:08:16 AM (12 years ago)

Author:

azaozz

Message:

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

Location:

trunk/src/wp-includes

Files:

• css/media-views.css (modified) (5 diffs)
• js/media-views.js (modified) (8 diffs)

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

@@ -2152 +2152 @@
 
         .media-menu {
+                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 {
+                left: 0;
+        }
+
+        .media-menu > a {
+                padding: 12px 16px;
+                font-size: 16px;
+        }
+
+        .media-menu > a.active {
                 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-menu .separator {
+                margin: 5px 10px;
         }
 
@@ -2297 +2305 @@
         }
 
-        .media-menu .separator {
-                margin: 12px 10px;
-        }
-
         .media-modal .attachments-browser .media-toolbar-primary,
         .media-modal .attachments-browser .media-toolbar-secondary {
@@ -2340 +2344 @@
         /* Full-bleed modal */
         .media-modal,
-        .image-details .media-modal,
-        .media-menu.visible {
+        .image-details .media-modal {
                 position: fixed;
                 top: 0;
@@ -2354 +2357 @@
 
         .media-sidebar {
-                display: none;
+                z-index: 1900;
+                max-width: 70%;
+                bottom: 120%;
+                box-sizing: border-box;
+                padding-bottom: 0;
+        }
+
+        .media-sidebar.visible {
+                bottom: 0;
         }
 
@@ -2362 +2373 @@
                 right: 0;
         }
-
-
 
         .image-details .media-frame-title {

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

@@ -4649 +4649 @@
                 className: 'attachment',
                 template:  media.template('attachment'),
-                _isTouch: false,
 
                 attributes: {
@@ -4658 +4657 @@
                 events: {
                         'click .js--select-attachment':   'toggleSelectionHandler',
-                        'touchend .attachment-preview':   'setTouch',
                         'change [data-setting]':          'updateSetting',
                         'change [data-setting] input':    'updateSetting',
@@ -4784 +4782 @@
                 },
 
-                setTouch: function() {
-                        this._isTouch = true;
-                },
-
                 /**
                  * @param {Object} event
@@ -4824 +4818 @@
                         } else if ( event.ctrlKey || event.metaKey ) {
                                 method = 'toggle';
-                        }
-
-                        if ( this._isTouch ) {
-                                this._isTouch = false;
-                                method = 'add';
                         }
 
@@ -4949 +4938 @@
 
                         // Fixes bug that loses focus when selecting a featured image
-                        if ( !method ) {
+                        if ( ! method ) {
                                 method = 'add';
                         }
+
                         if ( method !== 'add' ) {
                                 method = 'reset';
@@ -5981 +5971 @@
                                 }) );
                         }
+
+                        // Show the sidebar on mobile
+                        if ( this.model.id === 'insert' ) {
+                                sidebar.$el.addClass( 'visible' );
+                        }
                 },
 
@@ -5988 +5983 @@
                         sidebar.unset('compat');
                         sidebar.unset('display');
+                        // Hide the sidebar on mobile
+                        sidebar.$el.removeClass( 'visible' );
                 }
         });
@@ -6915 +6912 @@
                                 this.model.set( 'customWidth', value, { silent: true  } );
                                 this.$( '[data-setting="customWidth"]' ).val( value );
-
                         }
                 },