Ticket #19816: 19816.3.diff

Index: wp-admin/includes/class-wp-theme-install-list-table.php
===================================================================
--- wp-admin/includes/class-wp-theme-install-list-table.php     (revision 19998)
+++ wp-admin/includes/class-wp-theme-install-list-table.php     (working copy)
@@ -162,12 +162,8 @@
                $theme_names = array_keys( $themes );
 
                foreach ( $theme_names as $theme_name ) {
-                               $class = array( 'available-theme' );
-                               ?>
-                               <div class="<?php echo join( ' ', $class ); ?>"><?php
-                                       if ( isset( $themes[$theme_name] ) )
-                                               display_theme( $themes[$theme_name] );
-                               ?></div>
-               <?php } // end foreach $theme_names
+                       if ( isset( $themes[$theme_name] ) )
+                               display_theme( $themes[$theme_name] );
+               } // end foreach $theme_names
        }
 }
Index: wp-admin/includes/theme-install.php
===================================================================
--- wp-admin/includes/theme-install.php (revision 19998)
+++ wp-admin/includes/theme-install.php (working copy)
@@ -133,9 +133,17 @@
        if ( empty($theme) )
                return;
 
+       $class = array( 'available-theme' );
+
        $name = wp_kses($theme->name, $themes_allowedtags);
        $author = wp_kses($theme->author, $themes_allowedtags);
        $desc = wp_kses($theme->description, $themes_allowedtags);
+       $screenshots = (array) $theme->screenshot_url;
+       $num_screenshots = count( $screenshots );
+
+       if ( $num_screenshots > 1 )
+               $class[] = 'has-screenshots';
+
        //if ( strlen($desc) > 30 )
        //      $desc = substr($desc, 0, 15) . '<span class="dots">...</span><span>' . substr($desc, -15) . '</span>';
 
@@ -151,10 +159,13 @@
 
        $actions = implode ( ' | ', $actions );
        ?>
+<div class="<?php echo join( ' ', $class ); ?>">
 <a class='thickbox thickbox-preview screenshot'
        href='<?php echo esc_url($preview_link); ?>'
        title='<?php echo esc_attr(sprintf(__('Preview &#8220;%s&#8221;'), $name)); ?>'>
-<img src='<?php echo esc_url($theme->screenshot_url); ?>' width='150' />
+<?php if ( ! empty ( $screenshots ) && false !== $screenshots[0] ) : ?>
+<img src='<?php echo esc_url($screenshots[0]); ?>' alt='' data-num-images='<?php echo $num_screenshots; ?>' />
+<?php endif; ?>
 </a>
 <h3><?php
        /* translators: 1: theme name, 2: author name */
@@ -183,6 +194,7 @@
        <div class="star star1"><img src="<?php echo admin_url('images/star.png?v=20110615'); ?>" alt="<?php esc_attr_e('1 star') ?>" /></div>
 </div>
 </div>
+</div>
 <?php }
        /*
         object(stdClass)[59]
Index: wp-admin/includes/class-wp-themes-list-table.php
===================================================================
--- wp-admin/includes/class-wp-themes-list-table.php    (revision 19998)
+++ wp-admin/includes/class-wp-themes-list-table.php    (working copy)
@@ -130,16 +130,15 @@
 
        foreach ( $theme_names as $theme_name ) {
                $class = array( 'available-theme' );
-       ?>
-       <div class="<?php echo join( ' ', $class ); ?>">
-       <?php if ( !empty( $theme_name ) ) :
+
+       if ( !empty( $theme_name ) ) :
        $template = $themes[$theme_name]['Template'];
        $stylesheet = $themes[$theme_name]['Stylesheet'];
        $title = $themes[$theme_name]['Title'];
        $version = $themes[$theme_name]['Version'];
        $description = $themes[$theme_name]['Description'];
        $author = $themes[$theme_name]['Author'];
-       $screenshot = $themes[$theme_name]['Screenshot'];
+       $screenshots = (array) $themes[$theme_name]['Screenshot'];
        $stylesheet_dir = $themes[$theme_name]['Stylesheet Dir'];
        $template_dir = $themes[$theme_name]['Template Dir'];
        $parent_theme = $themes[$theme_name]['Parent Theme'];
@@ -159,10 +158,16 @@
        $actions = apply_filters( 'theme_action_links', $actions, $themes[$theme_name] );
 
        $actions = implode ( ' | ', $actions );
+
+       $num_screenshots = count( $screenshots );
+
+       if ( $num_screenshots > 1 )
+               $class[] = 'has-screenshots';
 ?>
+       <div class="<?php echo join( ' ', $class ); ?>">
                <a href="<?php echo $preview_link; ?>" class="<?php echo $thickbox_class; ?> screenshot">
-<?php if ( $screenshot ) : ?>
-                       <img src="<?php echo $theme_root_uri . '/' . $stylesheet . '/' . $screenshot; ?>" alt="" />
+<?php if ( ! empty ( $screenshots ) && false !== $screenshots[0] ) : ?>
+                       <img src="<?php echo $theme_root_uri . '/' . $stylesheet . '/' . $screenshots[0]; ?>" alt="" data-num-images="<?php echo $num_screenshots; ?>" />
 <?php endif; ?>
                </a>
 <h3><?php
@@ -182,8 +187,8 @@
 <?php if ( $tags ) : ?>
 <p><?php _e( 'Tags:' ); ?> <?php echo join( ', ', $tags ); ?></p>
 <?php endif; ?>
+</div>
 <?php endif; // end if not empty theme_name ?>
-</div>
        <?php theme_update_available( $themes[$theme_name] ); ?>
        </div>
 <?php } // end foreach $theme_names
Index: wp-admin/js/theme-preview.dev.js
===================================================================
--- wp-admin/js/theme-preview.dev.js    (revision 19998)
+++ 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 = $('<div class="extended-details"><div class="themedetaildiv"><h4>Theme Details</h4></div><div class="screenshots"></div></div>');
+                       
+               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.attr( 'data-num-images' ),
+                               screenshots = $('.extended-details .screenshots');
+
+                       screenshots.append( '<div class="screenshot"><img src="' + src + '" /></div>' );
+
+                       if ( numScreenshots !== undefined && numScreenshots > 1 ) {
+                               var base = src.replace( /screenshot\.(jpg|png)$/, '' );
+
+                               for ( var i = 2; i <= numScreenshots; i++ ) {
+                                       screenshots.append( '<div class="screenshot"><img src="' + base + 'screenshot-' + String(i) + '.png" /></div>' );
+                               }
+                       }
+               }
+
                return false;
        });
 
+       // if we resize, 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 19998)
+++ 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;
 }