Ticket #19816: 19816.diff

wp-admin/js/theme-preview.dev.js

@@ -54 +54 @@
                 return false;
         } );
 
+
         // Theme details
+
+        var currentTheme, nextLower;
+
         $('#availablethemes').on('click', 'a.theme-detail', function (event) {
-                $(this).siblings('.themedetaildiv').toggle();
+
+                if ( currentTheme !== undefined ) {
+                        // remove active class/extended details div
+                        $('.extended-details').remove();
+                        currentTheme.removeClass( 'active' );
+
+                        // 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 to use for window resize reflow
+                nextLower = undefined;
+
+                var detailsDiv = $('<div class="extended-details"><div class="themedetaildiv"><h4>Theme Details</h4></div><div class="screenshots"></div></div>');
+
+                // get parent div.available-theme
+                currentTheme = $(this).closest( 'div.available-theme' );
+
+                // set active class for parent
+                currentTheme.addClass( 'active' );
+
+                // get top position of parent
+                var currentPosition = currentTheme.position().top;
+
+                // find the next div.available-theme that has a lower position().top
+                currentTheme.nextAll('div.available-theme').each( function(index) {
+                        if(currentPosition != $(this).position().top) {
+                                nextLower = $(this);
+                                return false;
+                        }
+                });
+
+                // insert/move the theme details div before that parent if found
+                if ( nextLower !== undefined ) {
+                        nextLower.before(detailsDiv);
+                }
+                // if not found, insert before the end of the overall div
+                else {
+                        $('#availablethemes').append(detailsDiv);
+                }
+
+                // set inner HTML of theme details div to the contents of $(this).siblings('.themedetaildiv')
+                var themeDetails = $(this).siblings('.themedetaildiv').html();
+                $('.extended-details .themedetaildiv').append(themeDetails);
+
+                // plus the HTML for the extra screenshots, to be pulled from... ?
+
                 return false;
         });
 
+        // deal with window resizing and reflow, but only if there is something active
+        // $(window).resize( function() { } );
+
 });

wp-admin/css/wp-admin.dev.css

@@ -4441 +4441 @@
 .available-theme {
         display: inline-block;
         margin-bottom: 10px;
-        margin-right: 25px;
-        overflow: hidden;
+        margin-right: 10px;
+        overflow: visible;
         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;
@@ -4459 +4468 @@
 }
 
 .available-theme img {
-        width: 240px;
+        width: 300px;
 }
 
 .available-theme h3 {
         margin: 15px 0 5px;
 }
 
+.available-theme.active {
+        background: #f5f5f5;
+}
+
+.extended-details {
+        overflow: hidden;
+        position: relative;
+        margin-top: -10px;
+        margin-bottom: 20px;
+        padding: 5px 20px;
+        padding-left: 330px;
+        background-color: #f5f5f5;
+        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 .screenshots img {
+        float: left;
+        margin-right: 20px;
+        margin-bottom: 20px;
+        width: 300px;
+        height: 225px;
+        border: 1px solid #ddd;
+}
+
 #current-theme {
         margin: 1em 0 1.5em;
 }
@@ -7386 +7440 @@
 }
 
 
-#theme-information .available-theme,
-.available-theme {
+#theme-information .available-theme {
         padding: 20px 15px;
 }