WordPress.org

Make WordPress Core

Changeset 31384


Ignore:
Timestamp:
02/09/2015 12:35:38 PM (7 years ago)
Author:
ocean90
Message:

Improve the Customize experience on mobile.

Before: https://make.wordpress.org/flow/2015/02/02/a-peek-at-the-customizer-on-an-iphone-6/
After: https://make.wordpress.org/flow/2015/02/03/vizrec-for-28784-improve-the-customize-experience-on-mobile-iphone-6-28784-diff-4-2-alpha-31325/

props celloexpressions.
see #28784.

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

Legend:

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

    r30885 r31384  
    236236.customize-controls-close:hover,
    237237.control-panel-back:focus,
    238 .control-panel-back:hover {
     238.control-panel-back:hover,
     239.customize-controls-preview-toggle:focus,
     240.customize-controls-preview-toggle:hover {
    239241    background: #ddd;
    240242    border-color: #ccc;
     
    310312
    311313#customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
    312     left: -300px;
     314    left: -354px;
    313315    -webkit-transition: left ease-in-out .18s;
    314316    transition: left ease-in-out .18s;
     
    849851    margin: 25px 0 20px;
    850852}
     853
     854/* Responsive */
     855.customize-controls-preview-toggle {
     856    display: none;
     857}
     858
     859@media screen and ( max-width: 640px ) {
     860    #customize-controls {
     861        width: 100%;
     862    }
     863
     864    .wp-full-overlay.expanded {
     865        margin-left: 0;
     866    }
     867
     868    .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
     869        bottom: 0;
     870    }
     871
     872    .customize-controls-preview-toggle {
     873        display: block;
     874        position: absolute;
     875        top: 0;
     876        left: 48px;
     877        line-height: 45px;
     878        font-size: 14px;
     879        padding: 0 12px 0 12px;
     880        margin: 0;
     881        height: 45px;
     882        background: #eee;
     883        border-right: 1px solid #ddd;
     884        color: #444;
     885        cursor: pointer;
     886        -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
     887        transition: color .1s ease-in-out, background .1s ease-in-out;
     888    }
     889
     890    #customize-footer-actions,
     891    #customize-preview,
     892    .customize-controls-preview-toggle .controls,
     893    .preview-only .wp-full-overlay-sidebar-content,
     894    .preview-only .customize-controls-preview-toggle .preview {
     895        display: none;
     896    }
     897
     898    .customize-controls-preview-toggle .preview:before,
     899    .customize-controls-preview-toggle .controls:before {
     900        font: normal 20px/1 dashicons;
     901        content: "\f177";
     902        position: relative;
     903        top: 4px;
     904        margin-right: 6px;
     905    }
     906
     907    .customize-controls-preview-toggle .controls:before {
     908        content: "\f100";
     909    }
     910
     911    .preview-only #customize-controls {
     912        height: 45px;
     913    }
     914
     915    .preview-only #customize-preview,
     916    .preview-only .customize-controls-preview-toggle .controls {
     917        display: block;
     918    }
     919
     920    #customize-preview {
     921        top: 45px;
     922        bottom: 0;
     923        height: auto;
     924    }
     925}
  • trunk/src/wp-admin/css/customize-widgets.css

    r31227 r31384  
    345345    margin: 0;
    346346    z-index: 1;
    347     background: #fff;
     347    background: #fff !important;
    348348    -webkit-transition: all 0.2s;
    349349    transition: all 0.2s;
     
    608608    }
    609609}
     610
     611@media screen and ( max-width: 640px ) {
     612    body.adding-widget div#available-widgets {
     613        left: 0;
     614        z-index: 10;
     615        width: 100%;
     616    }
     617
     618    #available-widgets-filter {
     619        position: static;
     620        width: 100%;
     621        height: auto;
     622    }
     623}
  • trunk/src/wp-admin/customize.php

    r30760 r31384  
    127127            ?>
    128128            <span class="spinner"></span>
     129            <a class="customize-controls-preview-toggle" href="#">
     130                <span class="controls"><?php _e( 'Customize' ); ?></span>
     131                <span class="preview"><?php _e( 'Preview' ); ?></span>
     132            </a>
    129133            <a class="customize-controls-close" href="<?php echo esc_url( $return ); ?>">
    130134                <span class="screen-reader-text"><?php _e( 'Cancel' ); ?></span>
  • trunk/src/wp-admin/js/customize-controls.js

    r31062 r31384  
    22402240        });
    22412241
     2242        $( '.customize-controls-preview-toggle' ).on( 'click keydown', function( event ) {
     2243            if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
     2244                return;
     2245            }
     2246
     2247            overlay.toggleClass( 'preview-only' );
     2248            event.preventDefault();
     2249        });
     2250
    22422251        // Bind site title display to the corresponding field.
    22432252        if ( title.length ) {
Note: See TracChangeset for help on using the changeset viewer.