WordPress.org

Make WordPress Core

Changeset 26285


Ignore:
Timestamp:
11/20/2013 04:44:21 AM (6 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:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/wp-admin.css

    r26281 r26285  
    1081110811        width: 100%;
    1081210812    }
    10813 
    10814 }
     10813}
     10814
    1081510815@media only screen and (min-width: 1250px) {
    1081610816    #widgets-left #available-widgets .widget {
     
    1081810818        float: left;
    1081910819    }
    10820    
     10820
    1082110821    #widgets-left #available-widgets .widget:nth-child(even) {
    1082210822        float: right;
    1082310823    }
    1082410824
    10825     #widgets-right .widgets-holder-wrap {
    10826         width: 48.5%;
     10825    #widgets-right .sidebars-column-1,
     10826    #widgets-right .sidebars-column-2 {
    1082710827        float: left;
    10828     }
    10829    
    10830     #widgets-right .widgets-holder-wrap:nth-child(odd) {
    10831         clear: both;
    10832     }
    10833    
    10834     #widgets-right .widgets-holder-wrap:nth-child(even) {
    10835         float: right;
    10836     }
    10837 
    10838     #widgets-right.single-sidebar .widgets-holder-wrap {
     10828        width: 49%;
     10829    }
     10830
     10831    #widgets-right .sidebars-column-1 {
     10832        margin-right: 2%;
     10833    }
     10834
     10835    #widgets-right.single-sidebar .sidebars-column-1,
     10836    #widgets-right.single-sidebar .sidebars-column-2 {
     10837        float: none;
    1083910838        width: 100%;
     10839        margin: 0;
    1084010840    }
    1084110841}
  • trunk/src/wp-admin/js/widgets.js

    r26277 r26285  
    1313            isRTL = !! ( 'undefined' !== typeof isRtl && isRtl );
    1414
    15         $('#widgets-right').children('.widgets-holder-wrap').children('.sidebar-name').click( function() {
    16             var $this = $(this), parent = $this.parent();
    17             if ( parent.hasClass('closed') ) {
    18                 parent.removeClass('closed');
     15        $('#widgets-right .sidebar-name').click( function() {
     16            var $this = $(this), wrap = $this.closest('.widgets-holder-wrap');
     17
     18            if ( wrap.hasClass('closed') ) {
     19                wrap.removeClass('closed');
    1920                $this.siblings('.widgets-sortables').sortable('refresh');
    2021            } else {
    21                 parent.addClass('closed');
     22                wrap.addClass('closed');
    2223            }
    2324        });
  • trunk/src/wp-admin/widgets.php

    r26271 r26285  
    346346
    347347<?php
     348
     349$theme_sidebars = array();
    348350foreach ( $wp_registered_sidebars as $sidebar => $registered_sidebar ) {
    349351    if ( false !== strpos( $registered_sidebar['class'], 'inactive-sidebar' ) || 'orphaned_widgets' == substr( $sidebar, 0, 16 ) ) {
     
    352354            $wrap_class .= ' ' . $registered_sidebar['class'];
    353355
    354 ?>
    355 
     356        ?>
    356357        <div class="<?php echo esc_attr( $wrap_class ); ?>">
    357358            <div class="sidebar-name">
    358359                <div class="sidebar-name-arrow"><br /></div>
    359                 <h3><?php echo esc_html( $registered_sidebar['name'] ); ?>
    360                     <span class="spinner"></span>
    361                 </h3>
     360                <h3><?php echo esc_html( $registered_sidebar['name'] ); ?> <span class="spinner"></span></h3>
    362361            </div>
    363362            <div class="widget-holder inactive">
     
    366365            </div>
    367366        </div>
    368 <?php
     367        <?php
     368    } else {
     369        $theme_sidebars[$sidebar] = $registered_sidebar;
    369370    }
    370371}
     
    376377<div class="widget-liquid-right">
    377378<div id="widgets-right">
    378 <?php
    379 $i = 0;
    380 foreach ( $wp_registered_sidebars as $sidebar => $registered_sidebar ) {
    381     if ( false !== strpos( $registered_sidebar['class'], 'inactive-sidebar' ) || 'orphaned_widgets' == substr( $sidebar, 0, 16 ) )
    382         continue;
    383 
     379<div class="sidebars-column-1">
     380<?php
     381
     382$i = $split = 0;
     383$sidebars_count = count( $theme_sidebars );
     384
     385if ( $sidebars_count > 2 )
     386    $split = ceil( $sidebars_count / 2 );
     387
     388foreach ( $theme_sidebars as $sidebar => $registered_sidebar ) {
    384389    $wrap_class = 'widgets-holder-wrap';
    385390    if ( !empty( $registered_sidebar['class'] ) )
    386391        $wrap_class .= ' sidebar-' . $registered_sidebar['class'];
    387392
    388     if ( $i )
    389         $wrap_class .= ' closed'; ?>
    390 
     393    if ( $i > 0 )
     394        $wrap_class .= ' closed';
     395
     396    if ( $split && $i == $split ) {
     397        ?>
     398        </div><div class="sidebars-column-2">
     399        <?php
     400    }
     401
     402    ?>
    391403    <div class="<?php echo esc_attr( $wrap_class ); ?>">
    392     <div class="sidebar-name">
    393     <div class="sidebar-name-arrow"><br /></div>
    394     <h3><?php echo esc_html( $registered_sidebar['name'] ); ?>
    395     <span class="spinner"></span></h3></div>
    396     <?php wp_list_widget_controls( $sidebar ); // Show the control forms for each of the widgets in this sidebar ?>
    397     </div>
    398 <?php
     404        <div class="sidebar-name">
     405            <div class="sidebar-name-arrow"><br /></div>
     406            <h3><?php echo esc_html( $registered_sidebar['name'] ); ?>  <span class="spinner"></span></h3>
     407        </div>
     408        <?php wp_list_widget_controls( $sidebar ); // Show the control forms for each of the widgets in this sidebar ?>
     409    </div>
     410    <?php
     411
    399412    $i++;
    400 } ?>
     413}
     414
     415?>
     416</div>
    401417</div>
    402418</div>
Note: See TracChangeset for help on using the changeset viewer.