WordPress.org

Make WordPress Core

Ticket #31289: 31289.4.diff

File 31289.4.diff, 8.0 KB (added by designsimply, 6 years ago)

Fixes the "Customize" button heigh problem from Ryan's iPhone 6+ screenshot.

  • src/wp-admin/css/customize-controls.css

     
    88
    99#customize-controls h3 {
    1010        font-size: 14px;
     11        position: relative;
     12        overflow: hidden;
     13        text-overflow: ellipsis;
     14        white-space: nowrap;
    1115}
    1216
    1317#customize-controls img {
    … …  
    233237.control-panel-back:focus,
    234238.control-panel-back:hover,
    235239.customize-controls-preview-toggle:focus,
    236 .customize-controls-preview-toggle:hover {
     240.customize-controls-preview-toggle:hover,
     241.customize-section-title:focus {
    237242        background: #ddd;
    238243        border-color: #ccc;
    239244        color: #000;
    … …  
    874879        display: block;
    875880}
    876881
     882.customize-themes-panel .customize-info {
     883        padding: 12px 7px 15px;
     884}
     885
     886.customize-themes-panel .customize-info .preview-action {
     887        font-size: 13px;
     888        line-height: 24px;
     889        display: block;
     890}
     891
     892.customize-themes-panel .customize-info .panel-title {
     893        font-size: 20px;
     894        font-weight: 200;
     895        line-height: 24px;
     896}
     897
     898.customize-themes-panel .customize-info .title-count {
     899        top: -1px;
     900        padding: 2px 8px;
     901}
     902
     903.customize-themes-panel .customize-info .button {
     904        float: right;
     905        margin-top: -2px;
     906        position: relative;
     907}
     908
     909.customize-themes-panel .customize-section-title {
     910        background: #fff;
     911        color: #222;
     912        padding: 10px 10px 11px 14px;
     913        line-height: 21px;
     914        cursor: pointer;
     915        margin: 0 -8px 12px -8px;
     916}
     917
     918.customize-section-title .action,
     919.accordion-section-title .action {
     920        position: absolute;
     921        top: 0;
     922        right: 0;
     923        background: #f5f5f5;
     924        color: #222;
     925        border-left: 1px solid #eee;
     926        font-weight: bold;
     927        font-size: 12px;
     928        line-height: 48px;
     929        height: 100%;
     930        padding: 0 12px;
     931        transition: color .1s ease-in-out,
     932                    background .1s ease-in-out;
     933}
     934
     935.customize-section-title .action {
     936        background: #fff;
     937        color: #0073aa;
     938}
     939
     940.customize-section-title .action:before,
     941.accordion-section-title .action:before {
     942        background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
     943        content: '';
     944        display: block;
     945        height: 100%;
     946        left: -30px;
     947        width: 30px;
     948        position: absolute;
     949}
     950
     951.customize-section-title:hover .action,
     952.customize-section-title:focus .action,
     953.accordion-section-title:hover .action,
     954.accordion-section-title:focus .action {
     955        background: #ddd;
     956        color: #000;
     957        border-left-color: #d9d9d9
     958}
     959
     960.customize-section-title:hover .action,
     961.customize-section-title:focus .action {
     962        background: #0073aa;
     963        color: #fff;
     964}
     965
    877966#customize-theme-controls .customize-themes-panel .accordion-section-content {
    878967        background: transparent;
    879968        display: block;
    … …  
    9111000
    9121001/* Panel-like behavior */
    9131002#accordion-section-themes .accordion-section-title:after {
    914         content: "\f148";
     1003        display: none;
    9151004}
    9161005
    917 .rtl #accordion-section-themes .accordion-section-title:after {
    918         -webkit-transform: rotate(180deg);
    919         -ms-transform: rotate(180deg);
    920         transform: rotate(180deg);
    921 }
    922 
    9231006#customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
    9241007        left: 0;
    9251008}

  • wp-admin/js/customize-controls.js

     
    585585                        var section = this;
    586586
    587587                        // Expand/Collapse section/panel.
    588                         section.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
     588                        section.container.find( '.accordion-section-title, .customize-section-title' ).on( 'click keydown', function( event ) {
    589589                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    590590                                        return;
    591591                                }
    … …  
    598598                                }
    599599                        });
    600600
    601                         section.container.find( '.themes-panel-back' ).on( 'click keydown', function( event ) {
    602                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    603                                         return;
    604                                 }
    605 
    606                                 event.preventDefault(); // Keep this AFTER the key filter above
    607 
    608                                 section.collapse();
    609                         });
    610 
    611601                        // Theme navigation in details view.
    612602                        section.container.on( 'click keydown', '.left', function( event ) {
    613603                                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    … …  
    691681                                container = section.closest( '.accordion-container' ),
    692682                                siblings = container.find( '.open' ),
    693683                                topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ).add( '#customize-info > .accordion-section-title' ),
    694                                 backBtn = overlay.find( '.themes-panel-back' ),
     684                                backBtn = section.find( '.customize-section-title' ),
    695685                                panelTitle = section.find( '.accordion-section-title' ).first(),
    696686                                content = section.find( '.control-panel-content' );
    697687
    … …  
    721711                                        }
    722712                                } );
    723713                                topPanel.attr( 'tabindex', '-1' );
    724                                 backBtn.attr( 'tabindex', '0' );
    725714                                backBtn.focus();
    726715                        } else {
    727716                                siblings.removeClass( 'open' );
    … …  
    734723                                        }
    735724                                } );
    736725                                topPanel.attr( 'tabindex', '0' );
    737                                 backBtn.attr( 'tabindex', '-1' );
    738726                                panelTitle.focus();
    739727                                container.scrollTop( 0 );
    740728                        }

  • wp-includes/class-wp-customize-manager.php

     
    11631163                // Theme Controls.
    11641164                $themes = wp_prepare_themes_for_js();
    11651165                foreach ( $themes as $theme ) {
     1166                        if ( $theme['active'] ) {
     1167                                continue;
     1168                        }
    11661169                        $theme_id = 'theme_' . $theme['id'];
    11671170                        $this->add_control( new WP_Customize_Theme_Control( $this, $theme_id, array(
    11681171                                'theme' => $theme,

  • wp-includes/class-wp-customize-section.php

     
    343343                <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
    344344                        <h3 class="accordion-section-title" tabindex="0">
    345345                                <?php echo esc_html( $this->title ); ?>
    346                                 <span class="screen-reader-text"><?php _e( 'Press return or enter to expand' ); ?></span>
     346                                <span class="action"><?php _e( 'Change' ); ?></span>
     347                                <span class="screen-reader-text"><?php _e( 'Press return or enter to change themes' ); ?></span>
    347348                        </h3>
    348                         <span class="control-panel-back themes-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></span>
    349349                        <div class="customize-themes-panel control-panel-content themes-php">
    350                                 <h2><?php esc_html_e( 'Themes' ); ?>
    351                                         <span class="title-count theme-count"><?php echo count( $this->controls ) - 1; ?></span>
    352                                 <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
    353                                         <a href="<?php echo admin_url( 'theme-install.php' ); ?>" target="_top" class="add-new-h2"><?php echo esc_html_x( 'Add New', 'Add new theme' ); ?></a>
    354                                 <?php endif; ?>
    355                                 </h2>
     350                                <div class="customize-info">
     351                                        <span class="preview-notice"><span class="preview-action"><?php
     352                                                echo sprintf( __( 'You are browsing %s' ), '</span><strong class="panel-title">' . __( 'Themes' ) . '</strong>' );
     353                                        ?><span class="title-count theme-count"><?php echo count( $this->controls ) - 1; ?></span>
     354                                        </span>
     355                                        <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
     356                                                <a href="<?php echo admin_url( 'theme-install.php' ); ?>" target="_top" class="button"><?php echo esc_html_x( 'Add New', 'Add new theme' ); ?></a>
     357                                        <?php endif; ?>
     358                                </div>
     359                                <h3 class="customize-section-title" tabindex="0">
     360                                        <?php echo sprintf( __( 'Previewing: %s' ), $this->manager->theme()->display('Name') ); ?>
     361                                        <span class="action"><?php _e( 'Customize' ); ?></span>
     362                                        <span class="screen-reader-text"><?php _e( 'Press return or enter to return to customize' ); ?></span>
     363                                </h3>
    356364                                <div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme details' ); ?>"></div>
    357365                                <div id="customize-container"></div>
    358366                                <?php if ( 6 < count( $this->controls ) ) : ?>