WordPress.org

Make WordPress Core

Changeset 33610


Ignore:
Timestamp:
08/11/2015 11:55:40 PM (5 years ago)
Author:
westonruter
Message:

Customize: Fix layout issues in panels and sections when resizing and autofocusing.

Also reverts [33157] which is no longer needed.

Props valendesigns, mattwiebe, westonruter, ocean90.
Fixes #33220.

Location:
trunk/src/wp-admin
Files:
2 edited

Legend:

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

    r33604 r33610  
    444444.reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; }
    445445
    446 /* Forces top margin to be zero for new menu */
    447 .control-section-nav_menu.open .menu {
    448     margin-top: 0 !important;
    449 }
    450 
    451446.control-section-nav_menu .menu .menu-item-edit-active {
    452447    margin-left: 0;
  • trunk/src/wp-admin/js/customize-controls.js

    r33599 r33610  
    6969        focus = function () {
    7070            var focusContainer;
    71             if ( construct.extended( api.Panel ) && construct.expanded() ) {
    72                 focusContainer = construct.container.find( '.control-panel-content:first' );
     71            if ( construct.expanded && construct.expanded() ) {
     72                focusContainer = construct.container.find( 'ul:first' );
    7373            } else {
    7474                focusContainer = construct.container;
     
    582582         */
    583583        onChangeExpanded: function ( expanded, args ) {
    584             var position, scroll, section = this,
     584            var section = this,
    585585                container = section.container.closest( '.wp-full-overlay-sidebar-content' ),
    586586                content = section.container.find( '.accordion-section-content' ),
     
    588588                backBtn = section.container.find( '.customize-section-back' ),
    589589                sectionTitle = section.container.find( '.accordion-section-title' ).first(),
    590                 expand;
     590                headerActionsHeight = $( '#customize-header-actions' ).height(),
     591                resizeContentHeight, expand, position, scroll;
    591592
    592593            if ( expanded && ! section.container.hasClass( 'open' ) ) {
     
    596597                } else {
    597598                    container.scrollTop( 0 );
    598                     expand = function () {
     599                    resizeContentHeight = function() {
    599600                        var matchMedia, offset;
    600601                        matchMedia = window.matchMedia || window.msMatchMedia;
     
    605606                            offset = 45;
    606607                        }
    607 
     608                        content.css( 'height', ( window.innerHeight - offset ) );
     609                    };
     610                    expand = function() {
    608611                        section.container.addClass( 'open' );
    609612                        overlay.addClass( 'section-open' );
    610613                        position = content.offset().top;
    611614                        scroll = container.scrollTop();
    612                         content.css( 'margin-top', ( 45 - position - scroll ) );
    613                         content.css( 'height', ( window.innerHeight - offset ) );
     615                        content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
     616                        resizeContentHeight();
    614617                        sectionTitle.attr( 'tabindex', '-1' );
    615618                        backBtn.attr( 'tabindex', '0' );
     
    618621                            args.completeCallback();
    619622                        }
     623
     624                        // Fix the height after browser resize.
     625                        $( window ).on( 'resize.customizer-section', _.debounce( resizeContentHeight, 100 ) );
     626
     627                        // Fix the top margin after reflow.
     628                        api.bind( 'pane-contents-reflowed', _.debounce( function() {
     629                            var offset = ( content.offset().top - headerActionsHeight );
     630                            if ( 0 < offset ) {
     631                                content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - offset ) );
     632                            }
     633                        }, 100 ) );
    620634                    };
    621635                }
     
    641655                section.container.removeClass( 'open' );
    642656                overlay.removeClass( 'section-open' );
    643                 content.css( 'margin-top', 'inherit' );
     657                content.css( 'margin-top', '' );
    644658                container.scrollTop( 0 );
    645659                backBtn.attr( 'tabindex', '-1' );
     
    649663                    args.completeCallback();
    650664                }
     665                $( window ).off( 'resize.customizer-section' );
    651666            } else {
    652667                if ( args.completeCallback ) {
     
    12361251                backBtn = section.find( '.customize-panel-back' ),
    12371252                panelTitle = section.find( '.accordion-section-title' ).first(),
    1238                 content = section.find( '.control-panel-content' );
     1253                content = section.find( '.control-panel-content' ),
     1254                headerActionsHeight = $( '#customize-header-actions' ).height();
    12391255
    12401256            if ( expanded ) {
     
    12561272                    position = content.offset().top;
    12571273                    scroll = container.scrollTop();
    1258                     content.css( 'margin-top', ( $( '#customize-header-actions' ).height() - position - scroll ) );
     1274                    content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
    12591275                    section.addClass( 'current-panel' );
    12601276                    overlay.addClass( 'in-sub-panel' );
     
    12671283                backBtn.attr( 'tabindex', '0' );
    12681284                backBtn.focus();
     1285
     1286                // Fix the top margin after reflow.
     1287                api.bind( 'pane-contents-reflowed', _.debounce( function() {
     1288                    content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - ( content.offset().top - headerActionsHeight ) ) );
     1289                }, 100 ) );
    12691290            } else {
    12701291                siblings.removeClass( 'open' );
     
    26042625                    api[ type ].each( function ( construct, id ) {
    26052626                        var active = !! ( activeConstructs && activeConstructs[ id ] );
    2606                         construct.active( active );
     2627                        if ( active ) {
     2628                            construct.activate();
     2629                        } else {
     2630                            construct.deactivate();
     2631                        }
    26072632                    } );
    26082633                } );
Note: See TracChangeset for help on using the changeset viewer.