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.

Built from https://develop.svn.wordpress.org/trunk@26285


git-svn-id: http://core.svn.wordpress.org/trunk@26190 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2013-11-20 04:45:10 +00:00
parent 2b0a5aedc9
commit 30b1c76a01
7 changed files with 70 additions and 53 deletions

View File

@ -10810,33 +10810,33 @@ li#wp-admin-bar-toggle-button {
#menu-locations-wrap .widefat { #menu-locations-wrap .widefat {
width: 100%; width: 100%;
} }
} }
@media only screen and (min-width: 1250px) { @media only screen and (min-width: 1250px) {
#widgets-left #available-widgets .widget { #widgets-left #available-widgets .widget {
width: 49%; width: 49%;
float: right; float: right;
} }
#widgets-right #available-widgets .widget:nth-child(even) { #widgets-right #available-widgets .widget:nth-child(even) {
float: left; float: left;
} }
#widgets-right .widgets-holder-wrap { #widgets-right .sidebars-column-1,
width: 48.5%; #widgets-right .sidebars-column-2 {
float: right; float: right;
} width: 49%;
#widgets-left .widgets-holder-wrap:nth-child(odd) {
clear: both;
}
#widgets-left .widgets-holder-wrap:nth-child(even) {
float: left;
} }
#widgets-right.single-sidebar .widgets-holder-wrap { #widgets-right .sidebars-column-1 {
margin-left: 2%;
}
#widgets-right.single-sidebar .sidebars-column-1,
#widgets-right.single-sidebar .sidebars-column-2 {
float: none;
width: 100%; width: 100%;
margin: 0;
} }
} }

File diff suppressed because one or more lines are too long

View File

@ -10810,33 +10810,33 @@ li#wp-admin-bar-toggle-button {
#menu-locations-wrap .widefat { #menu-locations-wrap .widefat {
width: 100%; width: 100%;
} }
} }
@media only screen and (min-width: 1250px) { @media only screen and (min-width: 1250px) {
#widgets-left #available-widgets .widget { #widgets-left #available-widgets .widget {
width: 49%; width: 49%;
float: left; float: left;
} }
#widgets-left #available-widgets .widget:nth-child(even) { #widgets-left #available-widgets .widget:nth-child(even) {
float: right; float: right;
} }
#widgets-right .widgets-holder-wrap { #widgets-right .sidebars-column-1,
width: 48.5%; #widgets-right .sidebars-column-2 {
float: left; float: left;
} width: 49%;
#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 { #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%; width: 100%;
margin: 0;
} }
} }

File diff suppressed because one or more lines are too long

View File

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

File diff suppressed because one or more lines are too long

View File

@ -345,27 +345,28 @@ do_action( 'widgets_admin_page' ); ?>
</div> </div>
<?php <?php
$theme_sidebars = array();
foreach ( $wp_registered_sidebars as $sidebar => $registered_sidebar ) { foreach ( $wp_registered_sidebars as $sidebar => $registered_sidebar ) {
if ( false !== strpos( $registered_sidebar['class'], 'inactive-sidebar' ) || 'orphaned_widgets' == substr( $sidebar, 0, 16 ) ) { if ( false !== strpos( $registered_sidebar['class'], 'inactive-sidebar' ) || 'orphaned_widgets' == substr( $sidebar, 0, 16 ) ) {
$wrap_class = 'widgets-holder-wrap'; $wrap_class = 'widgets-holder-wrap';
if ( !empty( $registered_sidebar['class'] ) ) if ( !empty( $registered_sidebar['class'] ) )
$wrap_class .= ' ' . $registered_sidebar['class']; $wrap_class .= ' ' . $registered_sidebar['class'];
?> ?>
<div class="<?php echo esc_attr( $wrap_class ); ?>"> <div class="<?php echo esc_attr( $wrap_class ); ?>">
<div class="sidebar-name"> <div class="sidebar-name">
<div class="sidebar-name-arrow"><br /></div> <div class="sidebar-name-arrow"><br /></div>
<h3><?php echo esc_html( $registered_sidebar['name'] ); ?> <h3><?php echo esc_html( $registered_sidebar['name'] ); ?> <span class="spinner"></span></h3>
<span class="spinner"></span>
</h3>
</div> </div>
<div class="widget-holder inactive"> <div class="widget-holder inactive">
<?php wp_list_widget_controls( $registered_sidebar['id'] ); ?> <?php wp_list_widget_controls( $registered_sidebar['id'] ); ?>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
</div> </div>
<?php <?php
} else {
$theme_sidebars[$sidebar] = $registered_sidebar;
} }
} }
?> ?>
@ -375,29 +376,44 @@ foreach ( $wp_registered_sidebars as $sidebar => $registered_sidebar ) {
<div class="widget-liquid-right"> <div class="widget-liquid-right">
<div id="widgets-right"> <div id="widgets-right">
<div class="sidebars-column-1">
<?php <?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;
$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'; $wrap_class = 'widgets-holder-wrap';
if ( !empty( $registered_sidebar['class'] ) ) if ( !empty( $registered_sidebar['class'] ) )
$wrap_class .= ' sidebar-' . $registered_sidebar['class']; $wrap_class .= ' sidebar-' . $registered_sidebar['class'];
if ( $i ) if ( $i > 0 )
$wrap_class .= ' closed'; ?> $wrap_class .= ' closed';
if ( $split && $i == $split ) {
?>
</div><div class="sidebars-column-2">
<?php
}
?>
<div class="<?php echo esc_attr( $wrap_class ); ?>"> <div class="<?php echo esc_attr( $wrap_class ); ?>">
<div class="sidebar-name"> <div class="sidebar-name">
<div class="sidebar-name-arrow"><br /></div> <div class="sidebar-name-arrow"><br /></div>
<h3><?php echo esc_html( $registered_sidebar['name'] ); ?> <h3><?php echo esc_html( $registered_sidebar['name'] ); ?> <span class="spinner"></span></h3>
<span class="spinner"></span></h3></div> </div>
<?php wp_list_widget_controls( $sidebar ); // Show the control forms for each of the widgets in this sidebar ?> <?php wp_list_widget_controls( $sidebar ); // Show the control forms for each of the widgets in this sidebar ?>
</div> </div>
<?php <?php
$i++; $i++;
} ?> }
?>
</div>
</div> </div>
</div> </div>
<form action="" method="post"> <form action="" method="post">