Changeset 26738

Timestamp:

12/06/2013 07:41:19 PM (11 years ago)

Author:

nacin

Message:

Themes: If a theme only has a very-old-school 300px-wide screenshot (or narrower), don't stretch it.

props matveb.
fixes #26459.

Location:

trunk/src

Files:

• wp-admin/css/wp-admin.css (modified) (2 diffs)
• wp-admin/js/theme.js (modified) (2 diffs)
• wp-content/themes/twentyten/screenshot.png (modified) (previous)

trunk/src/wp-admin/css/wp-admin.css

@@ -6895 +6895 @@
     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 */
@@ -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;
     }
 }

trunk/src/wp-admin/js/theme.js

@@ -251 +251 @@
         // Set up navigation events
         this.navigation();
+        // Checks screenshot size
+        this.screenshotCheck( this.$el );
     },
 
@@ -353 +355 @@
         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 screenshot, image, width;
+
+        screenshot = el.find( '.screenshot img' );
+        image = new Image();
+        image.src = screenshot.attr( 'src' );
+
+        // Width check
+        if ( image.width <= 300 ) {
+            el.addClass( 'small-screenshot' );
+        }
     }
 });