Changeset 26285

Timestamp:

11/20/2013 04:44:21 AM (11 years ago)

Author:

azaozz

Message:

Widgets: split the sidebars in two containers so there are no empty spaces when they are shown in two columns and some are open, other closed. See #25952.

Location:

trunk/src/wp-admin

Files:

• css/wp-admin.css (modified) (2 diffs)
• js/widgets.js (modified) (1 diff)
• widgets.php (modified) (4 diffs)

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

@@ -10811 +10811 @@
         width: 100%;
     }
-
-}
+}
+
 @media only screen and (min-width: 1250px) {
     #widgets-left #available-widgets .widget {
@@ -10818 +10818 @@
         float: left;
     }
-    
+
     #widgets-left #available-widgets .widget:nth-child(even) {
         float: right;
     }
 
-    #widgets-right .widgets-holder-wrap {
-        width: 48.5%;
+    #widgets-right .sidebars-column-1,
+    #widgets-right .sidebars-column-2 {
         float: left;
-    }
-    
-    #widgets-right .widgets-holder-wrap:nth-child(odd) {
-        clear: both;
-    }
-    
-    #widgets-right .widgets-holder-wrap:nth-child(even) {
-        float: right;
-    }
-
-    #widgets-right.single-sidebar .widgets-holder-wrap {
+        width: 49%;
+    }
+
+    #widgets-right .sidebars-column-1 {
+        margin-right: 2%;
+    }
+
+    #widgets-right.single-sidebar .sidebars-column-1,
+    #widgets-right.single-sidebar .sidebars-column-2 {
+        float: none;
         width: 100%;
+        margin: 0;
     }
 }

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

@@ -13 +13 @@
             isRTL = !! ( 'undefined' !== typeof isRtl && isRtl );
 
-        $('#widgets-right').children('.widgets-holder-wrap').children('.sidebar-name').click( function() {
-            var $this = $(this), parent = $this.parent();
-            if ( parent.hasClass('closed') ) {
-                parent.removeClass('closed');
+        $('#widgets-right .sidebar-name').click( function() {
+            var $this = $(this), wrap = $this.closest('.widgets-holder-wrap');
+
+            if ( wrap.hasClass('closed') ) {
+                wrap.removeClass('closed');
                 $this.siblings('.widgets-sortables').sortable('refresh');
             } else {
-                parent.addClass('closed');
+                wrap.addClass('closed');
             }
         });

trunk/src/wp-admin/widgets.php

@@ -346 +346 @@
 
 <?php
+
+$theme_sidebars = array();
 foreach ( $wp_registered_sidebars as $sidebar => $registered_sidebar ) {
     if ( false !== strpos( $registered_sidebar['class'], 'inactive-sidebar' ) || 'orphaned_widgets' == substr( $sidebar, 0, 16 ) ) {
@@ -352 +354 @@
             $wrap_class .= ' ' . $registered_sidebar['class'];
 
-?>
-
+        ?>
         <div class="<?php echo esc_attr( $wrap_class ); ?>">
             <div class="sidebar-name">
                 <div class="sidebar-name-arrow"><br /></div>
-                <h3><?php echo esc_html( $registered_sidebar['name'] ); ?>
-                    <span class="spinner"></span>
-                </h3>
+                <h3><?php echo esc_html( $registered_sidebar['name'] ); ?> <span class="spinner"></span></h3>
             </div>
             <div class="widget-holder inactive">
@@ -366 +365 @@
             </div>
         </div>
-<?php
+        <?php
+    } else {
+        $theme_sidebars[$sidebar] = $registered_sidebar;
     }
 }
@@ -376 +377 @@
 <div class="widget-liquid-right">
 <div id="widgets-right">
-<?php
-$i = 0;
-foreach ( $wp_registered_sidebars as $sidebar => $registered_sidebar ) {
-    if ( false !== strpos( $registered_sidebar['class'], 'inactive-sidebar' ) || 'orphaned_widgets' == substr( $sidebar, 0, 16 ) )
-        continue;
-
+<div class="sidebars-column-1">
+<?php
+
+$i = $split = 0;
+$sidebars_count = count( $theme_sidebars );
+
+if ( $sidebars_count > 2 )
+    $split = ceil( $sidebars_count / 2 );
+
+foreach ( $theme_sidebars as $sidebar => $registered_sidebar ) {
     $wrap_class = 'widgets-holder-wrap';
     if ( !empty( $registered_sidebar['class'] ) )
         $wrap_class .= ' sidebar-' . $registered_sidebar['class'];
 
-    if ( $i )
-        $wrap_class .= ' closed'; ?>
-
+    if ( $i > 0 )
+        $wrap_class .= ' closed';
+
+    if ( $split && $i == $split ) {
+        ?>
+        </div><div class="sidebars-column-2">
+        <?php
+    }
+
+    ?>
     <div class="<?php echo esc_attr( $wrap_class ); ?>">
-    <div class="sidebar-name">
-    <div class="sidebar-name-arrow"><br /></div>
-    <h3><?php echo esc_html( $registered_sidebar['name'] ); ?>
-    <span class="spinner"></span></h3></div>
-    <?php wp_list_widget_controls( $sidebar ); // Show the control forms for each of the widgets in this sidebar ?>
-    </div>
-<?php
+        <div class="sidebar-name">
+            <div class="sidebar-name-arrow"><br /></div>
+            <h3><?php echo esc_html( $registered_sidebar['name'] ); ?>  <span class="spinner"></span></h3>
+        </div>
+        <?php wp_list_widget_controls( $sidebar ); // Show the control forms for each of the widgets in this sidebar ?>
+    </div>
+    <?php
+
     $i++;
-} ?>
+}
+
+?>
+</div>
 </div>
 </div>