Make WordPress Core

Changeset 32243


Ignore:
Timestamp:
04/21/2015 02:14:27 PM (10 years ago)
Author:
helen
Message:

Customizer: Better experience for widget filtering in desktop and iOS Safari.

Previously, the search field did not appear at all in desktop Safari, and the auto-focus keyboard fly-up in iOS rendered widget adding frustrating at best.

props dsmart, ocean90.
fixes #31987.

Location:
trunk/src
Files:
3 edited

Legend:

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

    r32051 r32243  
    343343    position: absolute;
    344344    overflow: auto;
    345     top: 46px;
     345    top: 0;
    346346    bottom: 0;
    347347    left: -301px;
     
    353353    transition: all 0.2s;
    354354    border-right: 1px solid #dddddd;
     355}
     356
     357#available-widgets-list {
     358    top: 46px;
     359    position: absolute;
     360    overflow: auto;
     361    bottom: 0;
     362    width: 100%;
    355363}
    356364
     
    615623@media screen and ( max-width: 640px ) {
    616624    body.adding-widget div#available-widgets {
     625        top: 46px;
    617626        left: 0;
    618627        z-index: 10;
  • trunk/src/wp-admin/js/customize-widgets.js

    r32054 r32243  
    295295            this.collection.doSearch( '' );
    296296
    297             this.$search.focus();
     297            if ( ! api.settings.browser.mobile ) {
     298                this.$search.focus();
     299            }
    298300        },
    299301
  • trunk/src/wp-includes/class-wp-customize-widgets.php

    r32054 r32243  
    669669                <input type="search" id="widgets-search" placeholder="<?php esc_attr_e( 'Search widgets&hellip;' ) ?>" />
    670670            </div>
     671            <div id="available-widgets-list">
    671672            <?php foreach ( $this->get_available_widgets() as $available_widget ): ?>
    672673                <div id="widget-tpl-<?php echo esc_attr( $available_widget['id'] ) ?>" data-widget-id="<?php echo esc_attr( $available_widget['id'] ) ?>" class="widget-tpl <?php echo esc_attr( $available_widget['id'] ) ?>" tabindex="0">
     
    674675                </div>
    675676            <?php endforeach; ?>
     677            </div><!-- #available-widgets-list -->
    676678        </div><!-- #available-widgets -->
    677679        </div><!-- #widgets-left -->
Note: See TracChangeset for help on using the changeset viewer.