Ticket #29085: 29085.diff

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

@@ -1006 +1006 @@
         outline: none;
 }
 
+.attachments-browser .attachments {
+        padding: 0;
+}
+
+.mode-select .attachments-browser .attachments {
+        padding: 0 16px;
+}
+
 .attachments-browser .uploader-inline:not(.hidden) + .attachments {
         top: 350px;
 }

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

@@ -5267 +5267 @@
                         media.view.Attachments.$head().append( this.cssTemplate({
                                 id:     this.el.id,
                                 edge:   this.edge(),
+                                columns: this.columns(),
                                 gutter: this.model.get('gutter')
                         }) );
                 },
@@ -5282 +5283 @@
                         }
 
                         gutter  = this.model.get('gutter') * 2;
-                        width   = this.$el.width() - gutter;
+                        width   = this.$el.width() - gutter/2;
                         columns = Math.ceil( width / ( edge + gutter ) );
-                        edge = Math.floor( ( width - ( columns * gutter ) ) / columns );
+                        edge = Math.floor( ( width - ( ( columns - 1 ) * gutter ) ) / columns );
                         return edge;
                 },
 
+                /**
+                 * @returns {Number}
+                 */
+                columns: function() {
+                        var edge = this.model.get('edge'),
+                                gutter, width, columns;
+
+                        if ( ! this.$el.is(':visible') ) {
+                                return columns;
+                        }
+
+                        gutter  = this.model.get('gutter') * 2;
+                        width   = this.$el.width() - gutter/2;
+                        columns = Math.ceil( width / ( edge + gutter ) );
+                        return columns;
+                },
+
                 initSortable: function() {
                         var collection = this.collection;
 

src/wp-includes/media-template.php

@@ -819 +819 @@
 
         <script type="text/html" id="tmpl-attachments-css">
                 <style type="text/css" id="{{ data.id }}-css">
-                        #{{ data.id }} {
-                                padding: 0 {{ data.gutter }}px;
-                        }
-
                         #{{ data.id }} .attachment {
                                 margin: {{ data.gutter }}px;
                                 width: {{ data.edge }}px;
                         }
 
+                        #{{ data.id }} .attachment:nth-of-type({{ data.columns }}n+1) {
+                                margin-left: 0;
+                        }
+
                         #{{ data.id }} .attachment-preview,
                         #{{ data.id }} .attachment-preview .thumbnail {
                                 width: {{ data.edge }}px;