Ticket #22696: grid.diff

Index: wp-includes/css/media-views.css
===================================================================
--- wp-includes/css/media-views.css     (revision 23060)
+++ wp-includes/css/media-views.css     (working copy)
@@ -633,8 +633,8 @@
 
 .attachment-preview {
        position: relative;
-       width: 199px;
-       height: 199px;
+       width: 150px;
+       height: 150px;
        box-shadow:
                inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
                inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
@@ -642,21 +642,11 @@
        cursor: pointer;
 }
 
-.attachment .icon {
-       margin: 0 auto;
-       overflow: hidden;
-       padding-top: 20%;
-}
-
 .attachment .thumbnail {
        display: block;
-       position: absolute;
-       top: 0;
-       left: 0;
+       position: relative;
        margin: 0 auto;
        overflow: hidden;
-       max-width: 100%;
-       max-height: 100%;
 }
 
 .attachment-preview .thumbnail:after {
@@ -672,31 +662,11 @@
 }
 
 .attachment .thumbnail img {
-       top: 0;
-       left: 0;
+       position: relative;
+       display: inline-block;
+       vertical-align: middle;
 }
 
-.attachment .thumbnail .centered {
-       position: absolute;
-       top: 0;
-       left: 0;
-       width: 100%;
-       height: 100%;
-       -webkit-transform: translate( 50%, 50% );
-       -moz-transform:    translate( 50%, 50% );
-       -ms-transform:     translate( 50%, 50% );
-       -o-transform:      translate( 50%, 50% );
-       transform:         translate( 50%, 50% );
-}
-
-.attachment .thumbnail .centered img {
-       -webkit-transform: translate( -50%, -50% );
-       -moz-transform:    translate( -50%, -50% );
-       -ms-transform:     translate( -50%, -50% );
-       -o-transform:      translate( -50%, -50% );
-       transform:         translate( -50%, -50% );
-}
-
 .attachment .filename {
        position: absolute;
        left: 0;
@@ -717,14 +687,10 @@
 }
 
 .attachment-preview .thumbnail {
-       width: 199px;
-       height: 199px;
+       width: 150px;
+       height: 150px;
 }
 
-.attachment .thumbnail img {
-       position: absolute;
-}
-
 .attachment .close {
        display: none;
        position: absolute;
@@ -1188,10 +1154,6 @@
        vertical-align: top;
 }
 
-.media-selection .attachment .icon {
-       width: 50%;
-}
-
 .attachment.selection.selected {
        box-shadow: none;
 }
Index: wp-includes/js/media-views.js
===================================================================
--- wp-includes/js/media-views.js       (revision 23060)
+++ wp-includes/js/media-views.js       (working copy)
@@ -590,7 +590,7 @@
                        id:         'gallery-edit',
                        multiple:   false,
                        describe:   true,
-                       edge:       199,
+                       edge:       150,
                        editing:    false,
                        sortable:   true,
                        searchable: false,
@@ -2743,6 +2743,7 @@
                tagName:   'li',
                className: 'attachment',
                template:  media.template('attachment'),
+               size:      'thumbnail',
 
                events: {
                        'click .attachment-preview':      'toggleSelectionHandler',
@@ -2959,7 +2960,7 @@
                imageSize: function( size ) {
                        var sizes = this.model.get('sizes');
 
-                       size = size || 'medium';
+                       size = size || this.size;
 
                        // Use the provided image size if possible.
                        if ( sizes && sizes[ size ] ) {
@@ -3140,7 +3141,7 @@
 
                        _.bindAll( this, 'css' );
                        this.model.on( 'change:edge change:gutter', this.css, this );
-                       this._resizeCss = _.debounce( _.bind( this.css, this ), this.refreshSensitivity );
+                       this._resizeCss = _.debounce( this.css, this.refreshSensitivity );
                        if ( this.options.resize )
                                $(window).on( 'resize.attachments', this._resizeCss );
                        this.css();
@@ -3153,14 +3154,17 @@
                },
 
                css: function() {
-                       var $css = $( '#' + this.el.id + '-css' );
+                       var $css = $( '#' + this.el.id + '-css' ),
+                               edge;
 
                        if ( $css.length )
                                $css.remove();
 
+                       edge = this.edge();
                        media.view.Attachments.$head().append( this.cssTemplate({
                                id:     this.el.id,
-                               edge:   this.edge(),
+                               edge:   edge,
+                               line:   Math.max( edge - 1, 0 ),
                                gutter: this.model.get('gutter')
                        }) );
                },
@@ -3939,6 +3943,7 @@
                tagName:   'div',
                className: 'attachment-details',
                template:  media.template('attachment-details'),
+               size:      'medium',
 
                events: {
                        'change [data-setting]':          'updateSetting',
Index: wp-includes/media.php
===================================================================
--- wp-includes/media.php       (revision 23060)
+++ wp-includes/media.php       (working copy)
@@ -1635,12 +1635,12 @@
                                <div class="media-progress-bar"><div></div></div>
                        <# } else if ( 'image' === data.type ) { #>
                                <div class="thumbnail">
-                                       <div class="centered">
-                                               <img src="{{ data.size.url }}" draggable="false" />
-                                       </div>
+                                       <img src="{{ data.size.url }}" draggable="false" />
                                </div>
                        <# } else { #>
-                               <img src="{{ data.icon }}" class="icon" draggable="false" />
+                               <div class="thumbnail">
+                                       <img src="{{ data.icon }}" class="icon" draggable="false" />
+                               </div>
                                <div class="filename">
                                        <div>{{ data.filename }}</div>
                                </div>
@@ -1951,13 +1951,12 @@
                                height: {{ data.edge }}px;
                        }
 
-                       #{{ data.id }} .portrait .thumbnail img {
-                               max-width: {{ data.edge }}px;
-                               height: auto;
+                       #{{ data.id }} .attachment-preview .thumbnail {
+                               line-height: {{ data.line }}px;
                        }
 
-                       #{{ data.id }} .landscape .thumbnail img {
-                               width: auto;
+                       #{{ data.id }} .thumbnail img {
+                               max-width: {{ data.edge }}px;
                                max-height: {{ data.edge }}px;
                        }
                </style>