Changeset 32243

Timestamp:

04/21/2015 02:14:27 PM (11 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:

• wp-admin/css/customize-widgets.css (modified) (3 diffs)
• wp-admin/js/customize-widgets.js (modified) (1 diff)
• wp-includes/class-wp-customize-widgets.php (modified) (2 diffs)

trunk/src/wp-admin/css/customize-widgets.css

@@ -343 +343 @@
         position: absolute;
         overflow: auto;
-        top: 46px;
+        top: 0;
         bottom: 0;
         left: -301px;
@@ -353 +353 @@
         transition: all 0.2s;
         border-right: 1px solid #dddddd;
+}
+
+#available-widgets-list {
+        top: 46px;
+        position: absolute;
+        overflow: auto;
+        bottom: 0;
+        width: 100%;
 }
 
@@ -615 +623 @@
 @media screen and ( max-width: 640px ) {
         body.adding-widget div#available-widgets {
+                top: 46px;
                 left: 0;
                 z-index: 10;

trunk/src/wp-admin/js/customize-widgets.js

@@ -295 +295 @@
                         this.collection.doSearch( '' );
 
-                        this.$search.focus();
+                        if ( ! api.settings.browser.mobile ) {
+                                this.$search.focus();
+                        }
                 },
 

trunk/src/wp-includes/class-wp-customize-widgets.php

@@ -669 +669 @@
                                 <input type="search" id="widgets-search" placeholder="<?php esc_attr_e( 'Search widgets&hellip;' ) ?>" />
                         </div>
+                        <div id="available-widgets-list">
                         <?php foreach ( $this->get_available_widgets() as $available_widget ): ?>
                                 <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">
@@ -674 +675 @@
                                 </div>
                         <?php endforeach; ?>
+                        </div><!-- #available-widgets-list -->
                 </div><!-- #available-widgets -->
                 </div><!-- #widgets-left -->