Changeset 26285

Timestamp:

11/20/2013 04:44:21 AM (13 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>