WordPress.org

Make WordPress Core

Ticket #22696: grid.diff

File grid.diff, 5.1 KB (added by koopersmith, 5 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>