@@ -210,7 +214,7 @@
if ( false !== stripos( $theme->get_template(), $word ) )
continue;
-
+
return false;
}
}
Index: wp-admin/js/theme-preview.dev.js
===================================================================
--- wp-admin/js/theme-preview.dev.js (revision 20047)
+++ wp-admin/js/theme-preview.dev.js (working copy)
@@ -54,10 +54,97 @@
return false;
} );
- // Theme details
- $('#availablethemes').on('click', 'a.theme-detail', function (event) {
- $(this).siblings('.themedetaildiv').toggle();
+
+ // Toggle Theme Details
+ var currentTheme;
+ $('#availablethemes').on( 'click', 'a.theme-detail', function() {
+
+ var $this = $(this);
+
+ if ( currentTheme !== undefined ) {
+ // remove active class/extended details div
+ $('.extended-details').remove();
+ currentTheme.removeClass( 'active' );
+ currentTheme.height( 'auto' );
+
+ // bail if the link clicked was the same as previously
+ if ( currentTheme[0] === $this.closest( 'div.available-theme' )[0] ) {
+ currentTheme = undefined;
+ return false;
+ }
+ }
+
+ // reset nextLower - has scope for now to possibly use for window resize reflow
+ var nextLower = undefined,
+ maxMargin = 50, // Max Margin allowed between theme and details div
+ detailsDiv = $('
');
+
+ currentTheme = $this.closest( 'div.available-theme' );
+ var currentPosition = currentTheme.position().top;
+ var currentBottom = currentPosition + currentTheme.height();
+
+ currentTheme.addClass( 'active' );
+
+ // find the next div.available-theme that has a lower position().top
+ currentTheme.nextAll('div.available-theme').each( function() {
+ var $this = $(this);
+ if( currentPosition < $this.position().top ) {
+ nextLower = $this;
+ return false;
+ }
+ });
+
+ // insert the details div
+ if ( nextLower !== undefined ) {
+ nextLower.before( detailsDiv );
+ } else {
+ $('#availablethemes').append( detailsDiv );
+ }
+
+ // now that it's generated, grab top of details div
+ var detailsTop = detailsDiv.position().top;
+ var margin = detailsTop - currentBottom;
+
+ /**
+ * If the margin between the bottom of the current theme and details div
+ * is greater than maxMargin, extend current theme to avoid whitespace.
+ */
+ if ( margin > maxMargin)
+ currentTheme.height( currentTheme.height() + ( margin - maxMargin ) );
+
+ var themeDetails = $this.siblings( '.themedetaildiv' ).html();
+ $('.extended-details .themedetaildiv').append( themeDetails );
+
+ // do more screenshots
+ var screenshot = $('.screenshot img', currentTheme);
+ var src = screenshot.attr( 'src' );
+
+ if ( src !== undefined ) {
+ var numScreenshots = screenshot.data( 'numImages' ),
+ screenshots = $('.extended-details .screenshots');
+
+ screenshots.append( '
' );
+
+ if ( numScreenshots !== undefined && numScreenshots > 1 ) {
+ var base = src.replace( /screenshot\.(jpg|png)$/, '' );
+
+ for ( var i = 2; i <= numScreenshots; i++ ) {
+ screenshots.append( '
 + '.png)
' );
+ }
+ }
+ }
+
return false;
});
+ // If the window is resized, and there's a details div open, close it.
+ $(window).resize( function() {
+ if ( currentTheme !== undefined ) {
+ $('.extended-details').remove();
+ currentTheme.removeClass( 'active' );
+ currentTheme.height( 'auto' );
+ currentTheme = undefined;
+ }
+ });
+
});
Index: wp-admin/css/wp-admin.dev.css
===================================================================
--- wp-admin/css/wp-admin.dev.css (revision 20047)
+++ wp-admin/css/wp-admin.dev.css (working copy)
@@ -4478,16 +4478,25 @@
.available-theme {
display: inline-block;
margin-bottom: 10px;
- margin-right: 25px;
+ margin-right: 10px;
overflow: hidden;
padding: 20px;
vertical-align: top;
- width: 240px;
+ width: 300px;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ -webkit-border-top-left-radius: 3px;
+ -webkit-border-top-right-radius: 3px;
}
+.js .available-theme.has-screenshots {
+ background: transparent url(../images/stack.png) no-repeat 26px 5px;
+}
+
.available-theme a.screenshot {
- width: 240px;
- height: 180px;
+ width: 300px;
+ height: 225px;
+ margin: 0 auto;
display: block;
border-width: 1px;
border-style: solid;
@@ -4496,13 +4505,66 @@
}
.available-theme img {
- width: 240px;
+ width: 300px;
}
.available-theme h3 {
margin: 15px 0 5px;
}
+.available-theme.active,
+.available-theme.has-screenshots.active {
+ background: #efefef;
+}
+
+.extended-details {
+ overflow: hidden;
+ position: relative;
+ margin-top: -13px;
+ margin-bottom: 20px;
+ padding: 5px 20px;
+ padding-left: 330px;
+ background-color: #efefef;
+ border-radius: 3px;
+ -webkit-border-radius: 3px;
+}
+
+#availablethemes .extended-details h4 {
+ margin: 1em 0;
+}
+
+.extended-details .themedetaildiv {
+ position: relative;
+ float: left;
+ width: 280px;
+ right: 310px;
+ margin-right: -100%;
+ margin-bottom: 20px;
+}
+
+.extended-details .screenshots {
+ position: relative;
+ float: left;
+ margin-top: 15px;
+ width: 100%;
+}
+
+.extended-details div.screenshot {
+ overflow: hidden;
+ float: left;
+ margin-right: 20px;
+ margin-bottom: 20px;
+ width: 300px;
+ height: 225px;
+ border: 1px solid #ddd;
+}
+
+.extended-details div.screenshot img {
+ display: block;
+ margin: 0 auto;
+ width: 100%;
+}
+
#current-theme {
margin: 1em 0 1.5em;
}
@@ -7423,8 +7485,7 @@
}
-#theme-information .available-theme,
-.available-theme {
+#theme-information .available-theme {
padding: 20px 15px;
}
; ?>)