diff --git a/src/wp-admin/css/customize-nav-menus.css b/src/wp-admin/css/customize-nav-menus.css index 4673a8e448..f8f810490d 100644 --- a/src/wp-admin/css/customize-nav-menus.css +++ b/src/wp-admin/css/customize-nav-menus.css @@ -443,11 +443,6 @@ .reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; } .reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; } -/* Forces top margin to be zero for new menu */ -.control-section-nav_menu.open .menu { - margin-top: 0 !important; -} - .control-section-nav_menu .menu .menu-item-edit-active { margin-left: 0; } diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js index 6d48967e1a..1e5103a914 100644 --- a/src/wp-admin/js/customize-controls.js +++ b/src/wp-admin/js/customize-controls.js @@ -68,8 +68,8 @@ params = params || {}; focus = function () { var focusContainer; - if ( construct.extended( api.Panel ) && construct.expanded() ) { - focusContainer = construct.container.find( '.control-panel-content:first' ); + if ( construct.expanded && construct.expanded() ) { + focusContainer = construct.container.find( 'ul:first' ); } else { focusContainer = construct.container; } @@ -581,13 +581,14 @@ * @param {Object} args */ onChangeExpanded: function ( expanded, args ) { - var position, scroll, section = this, + var section = this, container = section.container.closest( '.wp-full-overlay-sidebar-content' ), content = section.container.find( '.accordion-section-content' ), overlay = section.container.closest( '.wp-full-overlay' ), backBtn = section.container.find( '.customize-section-back' ), sectionTitle = section.container.find( '.accordion-section-title' ).first(), - expand; + headerActionsHeight = $( '#customize-header-actions' ).height(), + resizeContentHeight, expand, position, scroll; if ( expanded && ! section.container.hasClass( 'open' ) ) { @@ -595,7 +596,7 @@ expand = args.completeCallback; } else { container.scrollTop( 0 ); - expand = function () { + resizeContentHeight = function() { var matchMedia, offset; matchMedia = window.matchMedia || window.msMatchMedia; offset = 90; // 45px for customize header actions + 45px for footer actions. @@ -604,19 +605,32 @@ if ( matchMedia && matchMedia( '(max-width: 640px)' ).matches ) { offset = 45; } - + content.css( 'height', ( window.innerHeight - offset ) ); + }; + expand = function() { section.container.addClass( 'open' ); overlay.addClass( 'section-open' ); position = content.offset().top; scroll = container.scrollTop(); - content.css( 'margin-top', ( 45 - position - scroll ) ); - content.css( 'height', ( window.innerHeight - offset ) ); + content.css( 'margin-top', ( headerActionsHeight - position - scroll ) ); + resizeContentHeight(); sectionTitle.attr( 'tabindex', '-1' ); backBtn.attr( 'tabindex', '0' ); backBtn.focus(); if ( args.completeCallback ) { args.completeCallback(); } + + // Fix the height after browser resize. + $( window ).on( 'resize.customizer-section', _.debounce( resizeContentHeight, 100 ) ); + + // Fix the top margin after reflow. + api.bind( 'pane-contents-reflowed', _.debounce( function() { + var offset = ( content.offset().top - headerActionsHeight ); + if ( 0 < offset ) { + content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - offset ) ); + } + }, 100 ) ); }; } @@ -640,7 +654,7 @@ } else if ( ! expanded && section.container.hasClass( 'open' ) ) { section.container.removeClass( 'open' ); overlay.removeClass( 'section-open' ); - content.css( 'margin-top', 'inherit' ); + content.css( 'margin-top', '' ); container.scrollTop( 0 ); backBtn.attr( 'tabindex', '-1' ); sectionTitle.attr( 'tabindex', '0' ); @@ -648,6 +662,7 @@ if ( args.completeCallback ) { args.completeCallback(); } + $( window ).off( 'resize.customizer-section' ); } else { if ( args.completeCallback ) { args.completeCallback(); @@ -1235,7 +1250,8 @@ topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ), backBtn = section.find( '.customize-panel-back' ), panelTitle = section.find( '.accordion-section-title' ).first(), - content = section.find( '.control-panel-content' ); + content = section.find( '.control-panel-content' ), + headerActionsHeight = $( '#customize-header-actions' ).height(); if ( expanded ) { @@ -1255,7 +1271,7 @@ content.parent().show(); position = content.offset().top; scroll = container.scrollTop(); - content.css( 'margin-top', ( $( '#customize-header-actions' ).height() - position - scroll ) ); + content.css( 'margin-top', ( headerActionsHeight - position - scroll ) ); section.addClass( 'current-panel' ); overlay.addClass( 'in-sub-panel' ); container.scrollTop( 0 ); @@ -1266,6 +1282,11 @@ topPanel.attr( 'tabindex', '-1' ); backBtn.attr( 'tabindex', '0' ); backBtn.focus(); + + // Fix the top margin after reflow. + api.bind( 'pane-contents-reflowed', _.debounce( function() { + content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - ( content.offset().top - headerActionsHeight ) ) ); + }, 100 ) ); } else { siblings.removeClass( 'open' ); section.removeClass( 'current-panel' ); @@ -2603,7 +2624,11 @@ _( constructs ).each( function ( activeConstructs, type ) { api[ type ].each( function ( construct, id ) { var active = !! ( activeConstructs && activeConstructs[ id ] ); - construct.active( active ); + if ( active ) { + construct.activate(); + } else { + construct.deactivate(); + } } ); } ); } );