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

props matveb.
fixes #26459.

Built from https://develop.svn.wordpress.org/trunk@26738


git-svn-id: http://core.svn.wordpress.org/trunk@26627 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/wp-admin-rtl.css

@@ -6894,6 +6894,15 @@ body.folded .theme-overlay .theme-wrap {
 	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-right: 350px;
+	width: auto;
+}
 
 /* Other screenshots, shown small and square */
 .theme-overlay .screenshot.thumb {
@@ -7162,6 +7171,15 @@ body.folded .theme-overlay .theme-wrap {
 	.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-right: 0;
+		width: auto;
+	}
 }
 
 @media only screen and (max-width: 480px) {

wp-admin/css/wp-admin.css

@@ -6894,6 +6894,15 @@ body.folded .theme-overlay .theme-wrap {
 	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,6 +7171,15 @@ body.folded .theme-overlay .theme-wrap {
 	.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) {

wp-admin/js/theme.js

@@ -250,6 +250,8 @@ themes.view.Details = wp.Backbone.View.extend({
 		this.activeTheme();
 		// Set up navigation events
 		this.navigation();
+		// Checks screenshot size
+		this.screenshotCheck( this.$el );
 	},
 
 	// Adds a class to the currently active theme
@@ -352,6 +354,21 @@ themes.view.Details = wp.Backbone.View.extend({
 	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 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' );
+		}
 	}
 });