WordPress.org

Make WordPress Core

Changeset 29452


Ignore:
Timestamp:
08/09/2014 05:08:16 AM (6 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/css/media-views.css

    r29447 r29452  
    21522152
    21532153    .media-menu {
     2154        width: auto;
     2155        max-width: 80%;
     2156        overflow: auto;
     2157        z-index: 2000;
     2158        top: 50px;
     2159        left: -300px;
     2160        right: auto;
     2161        bottom: auto;
     2162        padding: 5px 0;
     2163        border: 1px solid #ccc;
     2164    }
     2165
     2166    .media-menu.visible {
     2167        left: 0;
     2168    }
     2169
     2170    .media-menu > a {
     2171        padding: 12px 16px;
     2172        font-size: 16px;
     2173    }
     2174
     2175    .media-menu > a.active {
    21542176        display: none;
    21552177    }
    21562178
    2157     .media-menu.visible {
    2158         z-index: 2000;
    2159         display: block;
    2160         position: fixed;
    2161         top: 30px;
    2162         left: 30px;
    2163         right: 30px;
    2164         bottom: 30px;
    2165         width: 250px;
    2166         max-width: 100%;
    2167         overflow: auto;
    2168     }
    2169 
    2170     .media-menu > a {
    2171         padding: 10px 20px;
    2172         font-size: 16px;
     2179    .media-menu .separator {
     2180        margin: 5px 10px;
    21732181    }
    21742182
     
    22972305    }
    22982306
    2299     .media-menu .separator {
    2300         margin: 12px 10px;
    2301     }
    2302 
    23032307    .media-modal .attachments-browser .media-toolbar-primary,
    23042308    .media-modal .attachments-browser .media-toolbar-secondary {
     
    23402344    /* Full-bleed modal */
    23412345    .media-modal,
    2342     .image-details .media-modal,
    2343     .media-menu.visible {
     2346    .image-details .media-modal {
    23442347        position: fixed;
    23452348        top: 0;
     
    23542357
    23552358    .media-sidebar {
    2356         display: none;
     2359        z-index: 1900;
     2360        max-width: 70%;
     2361        bottom: 120%;
     2362        box-sizing: border-box;
     2363        padding-bottom: 0;
     2364    }
     2365
     2366    .media-sidebar.visible {
     2367        bottom: 0;
    23572368    }
    23582369
     
    23622373        right: 0;
    23632374    }
    2364 
    2365 
    23662375
    23672376    .image-details .media-frame-title {
  • trunk/src/wp-includes/js/media-views.js

    r29446 r29452  
    46494649        className: 'attachment',
    46504650        template:  media.template('attachment'),
    4651         _isTouch: false,
    46524651
    46534652        attributes: {
     
    46584657        events: {
    46594658            'click .js--select-attachment':   'toggleSelectionHandler',
    4660             'touchend .attachment-preview':   'setTouch',
    46614659            'change [data-setting]':          'updateSetting',
    46624660            'change [data-setting] input':    'updateSetting',
     
    47844782        },
    47854783
    4786         setTouch: function() {
    4787             this._isTouch = true;
    4788         },
    4789 
    47904784        /**
    47914785         * @param {Object} event
     
    48244818            } else if ( event.ctrlKey || event.metaKey ) {
    48254819                method = 'toggle';
    4826             }
    4827 
    4828             if ( this._isTouch ) {
    4829                 this._isTouch = false;
    4830                 method = 'add';
    48314820            }
    48324821
     
    49494938
    49504939            // Fixes bug that loses focus when selecting a featured image
    4951             if ( !method ) {
     4940            if ( ! method ) {
    49524941                method = 'add';
    49534942            }
     4943
    49544944            if ( method !== 'add' ) {
    49554945                method = 'reset';
     
    59815971                }) );
    59825972            }
     5973
     5974            // Show the sidebar on mobile
     5975            if ( this.model.id === 'insert' ) {
     5976                sidebar.$el.addClass( 'visible' );
     5977            }
    59835978        },
    59845979
     
    59885983            sidebar.unset('compat');
    59895984            sidebar.unset('display');
     5985            // Hide the sidebar on mobile
     5986            sidebar.$el.removeClass( 'visible' );
    59905987        }
    59915988    });
     
    69156912                this.model.set( 'customWidth', value, { silent: true  } );
    69166913                this.$( '[data-setting="customWidth"]' ).val( value );
    6917 
    69186914            }
    69196915        },
Note: See TracChangeset for help on using the changeset viewer.