Ticket #26459: 26459.diff

wp-admin/js/theme.js

@@ -250 +250 @@
                 this.activeTheme();
                 // Set up navigation events
                 this.navigation();
+                // Checks screenshot size
+                this.screenshotCheck( this.$el );
         },
 
         // Adds a class to the currently active theme
@@ -352 +354 @@
         previousTheme: function() {
                 var self = this;
                 self.trigger( 'theme:previous', self.model.cid );
+        },
+
+        // Checks if the theme screenshot is the old 300px width version
+        // and adds a corresponding class if it's true
+        screenshotCheck: function( el ) {
+                var width;
+                // Wait until it's loaded...
+                el.find( '.screenshot img' ).on( 'load', function() {
+                        width = el.find( '.screenshot img' ).css( 'width', 'auto' ).width();
+
+                        if ( width == 300 ) {
+                                el.addClass( 'small-screenshot' );
+                        }
+
+                        // Restore CSS value for width
+                        el.find( '.screenshot img' ).css( 'width', '100%' );
+                });
         }
 });
 

wp-admin/css/wp-admin.css

@@ -6894 +6894 @@
         top: 0;
         width: 100%;
 }
+/* Handles old 300px screenshots */
+.theme-overlay.small-screenshot .theme-screenshots {
+        position: absolute;
+        width: 302px;
+}
+.theme-overlay.small-screenshot .theme-info {
+        margin-left: 350px;
+        width: auto;
+}
 
 /* Other screenshots, shown small and square */
 .theme-overlay .screenshot.thumb {
@@ -7162 +7171 @@
         .theme-browser .theme .theme-actions {
                 padding: 5px 10px 4px 10px;
         }
+        .theme-overlay.small-screenshot .theme-screenshots {
+                position: static;
+                float: none;
+                max-width: 302px;
+        }
+        .theme-overlay.small-screenshot .theme-info {
+                margin-left: 0;
+                width: auto;
+        }
 }
 
 @media only screen and (max-width: 480px) {