WordPress.org

Make WordPress Core

Ticket #22696: grid.diff

File grid.diff, 5.1 KB (added by koopersmith, 2 years ago)
  • wp-includes/css/media-views.css

     
    633633 
    634634.attachment-preview { 
    635635        position: relative; 
    636         width: 199px; 
    637         height: 199px; 
     636        width: 150px; 
     637        height: 150px; 
    638638        box-shadow: 
    639639                inset 0 0 15px rgba( 0, 0, 0, 0.1 ), 
    640640                inset 0 0 0 1px rgba( 0, 0, 0, 0.05 ); 
     
    642642        cursor: pointer; 
    643643} 
    644644 
    645 .attachment .icon { 
    646         margin: 0 auto; 
    647         overflow: hidden; 
    648         padding-top: 20%; 
    649 } 
    650  
    651645.attachment .thumbnail { 
    652646        display: block; 
    653         position: absolute; 
    654         top: 0; 
    655         left: 0; 
     647        position: relative; 
    656648        margin: 0 auto; 
    657649        overflow: hidden; 
    658         max-width: 100%; 
    659         max-height: 100%; 
    660650} 
    661651 
    662652.attachment-preview .thumbnail:after { 
     
    672662} 
    673663 
    674664.attachment .thumbnail img { 
    675         top: 0; 
    676         left: 0; 
     665        position: relative; 
     666        display: inline-block; 
     667        vertical-align: middle; 
    677668} 
    678669 
    679 .attachment .thumbnail .centered { 
    680         position: absolute; 
    681         top: 0; 
    682         left: 0; 
    683         width: 100%; 
    684         height: 100%; 
    685         -webkit-transform: translate( 50%, 50% ); 
    686         -moz-transform:    translate( 50%, 50% ); 
    687         -ms-transform:     translate( 50%, 50% ); 
    688         -o-transform:      translate( 50%, 50% ); 
    689         transform:         translate( 50%, 50% ); 
    690 } 
    691  
    692 .attachment .thumbnail .centered img { 
    693         -webkit-transform: translate( -50%, -50% ); 
    694         -moz-transform:    translate( -50%, -50% ); 
    695         -ms-transform:     translate( -50%, -50% ); 
    696         -o-transform:      translate( -50%, -50% ); 
    697         transform:         translate( -50%, -50% ); 
    698 } 
    699  
    700670.attachment .filename { 
    701671        position: absolute; 
    702672        left: 0; 
     
    717687} 
    718688 
    719689.attachment-preview .thumbnail { 
    720         width: 199px; 
    721         height: 199px; 
     690        width: 150px; 
     691        height: 150px; 
    722692} 
    723693 
    724 .attachment .thumbnail img { 
    725         position: absolute; 
    726 } 
    727  
    728694.attachment .close { 
    729695        display: none; 
    730696        position: absolute; 
     
    11881154        vertical-align: top; 
    11891155} 
    11901156 
    1191 .media-selection .attachment .icon { 
    1192         width: 50%; 
    1193 } 
    1194  
    11951157.attachment.selection.selected { 
    11961158        box-shadow: none; 
    11971159} 
  • wp-includes/js/media-views.js

     
    590590                        id:         'gallery-edit', 
    591591                        multiple:   false, 
    592592                        describe:   true, 
    593                         edge:       199, 
     593                        edge:       150, 
    594594                        editing:    false, 
    595595                        sortable:   true, 
    596596                        searchable: false, 
     
    27432743                tagName:   'li', 
    27442744                className: 'attachment', 
    27452745                template:  media.template('attachment'), 
     2746                size:      'thumbnail', 
    27462747 
    27472748                events: { 
    27482749                        'click .attachment-preview':      'toggleSelectionHandler', 
     
    29592960                imageSize: function( size ) { 
    29602961                        var sizes = this.model.get('sizes'); 
    29612962 
    2962                         size = size || 'medium'; 
     2963                        size = size || this.size; 
    29632964 
    29642965                        // Use the provided image size if possible. 
    29652966                        if ( sizes && sizes[ size ] ) { 
     
    31403141 
    31413142                        _.bindAll( this, 'css' ); 
    31423143                        this.model.on( 'change:edge change:gutter', this.css, this ); 
    3143                         this._resizeCss = _.debounce( _.bind( this.css, this ), this.refreshSensitivity ); 
     3144                        this._resizeCss = _.debounce( this.css, this.refreshSensitivity ); 
    31443145                        if ( this.options.resize ) 
    31453146                                $(window).on( 'resize.attachments', this._resizeCss ); 
    31463147                        this.css(); 
     
    31533154                }, 
    31543155 
    31553156                css: function() { 
    3156                         var $css = $( '#' + this.el.id + '-css' ); 
     3157                        var $css = $( '#' + this.el.id + '-css' ), 
     3158                                edge; 
    31573159 
    31583160                        if ( $css.length ) 
    31593161                                $css.remove(); 
    31603162 
     3163                        edge = this.edge(); 
    31613164                        media.view.Attachments.$head().append( this.cssTemplate({ 
    31623165                                id:     this.el.id, 
    3163                                 edge:   this.edge(), 
     3166                                edge:   edge, 
     3167                                line:   Math.max( edge - 1, 0 ), 
    31643168                                gutter: this.model.get('gutter') 
    31653169                        }) ); 
    31663170                }, 
     
    39393943                tagName:   'div', 
    39403944                className: 'attachment-details', 
    39413945                template:  media.template('attachment-details'), 
     3946                size:      'medium', 
    39423947 
    39433948                events: { 
    39443949                        'change [data-setting]':          'updateSetting', 
  • wp-includes/media.php

     
    16351635                                <div class="media-progress-bar"><div></div></div> 
    16361636                        <# } else if ( 'image' === data.type ) { #> 
    16371637                                <div class="thumbnail"> 
    1638                                         <div class="centered"> 
    1639                                                 <img src="{{ data.size.url }}" draggable="false" /> 
    1640                                         </div> 
     1638                                        <img src="{{ data.size.url }}" draggable="false" /> 
    16411639                                </div> 
    16421640                        <# } else { #> 
    1643                                 <img src="{{ data.icon }}" class="icon" draggable="false" /> 
     1641                                <div class="thumbnail"> 
     1642                                        <img src="{{ data.icon }}" class="icon" draggable="false" /> 
     1643                                </div> 
    16441644                                <div class="filename"> 
    16451645                                        <div>{{ data.filename }}</div> 
    16461646                                </div> 
     
    19511951                                height: {{ data.edge }}px; 
    19521952                        } 
    19531953 
    1954                         #{{ data.id }} .portrait .thumbnail img { 
    1955                                 max-width: {{ data.edge }}px; 
    1956                                 height: auto; 
     1954                        #{{ data.id }} .attachment-preview .thumbnail { 
     1955                                line-height: {{ data.line }}px; 
    19571956                        } 
    19581957 
    1959                         #{{ data.id }} .landscape .thumbnail img { 
    1960                                 width: auto; 
     1958                        #{{ data.id }} .thumbnail img { 
     1959                                max-width: {{ data.edge }}px; 
    19611960                                max-height: {{ data.edge }}px; 
    19621961                        } 
    19631962                </style>