WordPress.org
Get WordPress

Make WordPress Core

Changeset 41893


Ignore:
Timestamp:
10/18/2017 04:05:03 AM (7 years ago)
Author:
westonruter
Message:

Customize: Improve theme browsing UI on small screens.

Props Mahvash-Fatima, melchoyce, celloexpressions.
See #37661.
Fixes #42215.

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed

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

    r41871 r41893  
    20212021}
    20222022
    2023 .control-panel-themes .theme-browser .theme .theme-actions .button-primary {
    2024     margin: 0 0 0 8px;
    2025 }
    2026 
    20272023.customize-control-theme .theme {
    20282024    width: 100%;
    … …  
    20932089#customize-controls h3.theme-name {
    20942090    font-size: 15px;
     2091}
     2092
     2093.theme-id-container {
     2094    position: relative;
     2095}
     2096
     2097.theme-browser .theme.active .theme-actions,
     2098.wp-customizer .theme-browser .theme .theme-actions {
     2099    position: absolute;
     2100    top: 50%;
     2101    -webkit-transform: translateY(-50%);
     2102    transform: translateY(-50%);
     2103    right: 0;
     2104    padding: 10px 15px;
     2105    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
    20952106}
    20962107
    … …  
    21192130.themes-filter-bar .wp-filter-search {
    21202131    line-height: 25px;
    2121     padding: 3px 5px;
     2132    padding: 6px 10px 6px 30px;
    21222133    max-width: 100%;
    21232134    width: 40%;
    … …  
    21262137    top: 6px;
    21272138    left: 25px;
     2139    height: 32px;
     2140    margin: 1px 0;
    21282141}
    21292142
    … …  
    22342247        left: 0;
    22352248        top: 0;
    2236         height: 42px;
     2249        height: 46px;
    22372250        width: 26px;
    22382251        display: block;
    … …  
    22532266    .showing-themes #customize-header-actions {
    22542267        display: none;
     2268    }
     2269
     2270    #customize-controls {
     2271        width: 100%;
    22552272    }
    22562273}
    … …  
    23632380        top: 0;
    23642381        bottom: 0;
     2382    }
     2383
     2384    .wp-customizer .theme-browser .themes {
     2385        padding-right: 25px;
    23652386    }
    23662387}
    … …  
    26782699
    26792700#available-menu-items-search .search-icon:after,
    2680 #available-widgets-filter .search-icon:after {
     2701.themes-filter-bar .search-icon:after {
    26812702    content: "\f179";
    26822703    font: normal 20px/1 dashicons;
    … …  
    26842705    -webkit-font-smoothing: antialiased;
    26852706    -moz-osx-font-smoothing: grayscale;
     2707}
     2708
     2709.themes-filter-bar .search-icon {
     2710    position: absolute;
     2711    top: 7px;
     2712    left: 26px;
     2713    z-index: 1;
     2714    color: #72777c;
     2715    height: 30px;
     2716    width: 30px;
     2717    line-height: 2;
     2718    text-align: center;
    26862719}
    26872720
    … …  
    27982831        margin-top: 12px;
    27992832    }
     2833
     2834    .wp-core-ui .themes-filter-bar .feature-filter-toggle {
     2835        margin: 3px 0 3px 25px;
     2836    }
    28002837}
    28012838
    … …  
    28092846
    28102847@media screen and ( max-width: 640px ) {
    2811     #customize-controls {
    2812         width: 100%;
    2813     }
    28142848
    28152849    .wp-full-overlay.expanded,
    … …  
    28472881
    28482882    #customize-footer-actions,
    2849     #customize-preview,
     2883    /*#customize-preview,*/
    28502884    .customize-controls-preview-toggle .controls,
    28512885    .preview-only .wp-full-overlay-sidebar-content,
    … …  
    28802914    }
    28812915
    2882     #customize-preview {
    2883         top: 45px;
    2884         bottom: 0;
    2885         height: auto;
     2916    .wp-full-overlay.expanded {
     2917        margin-left: 300px;
    28862918    }
    28872919
    … …  
    28922924        vertical-align: middle;
    28932925        height: auto;
    2894         margin-bottom: 4px;
    2895         margin-top: 12px;
    28962926    }
    28972927
    … …  
    29753005        padding: 8px;
    29763006    }
    2977 }
     3007
     3008    .wp-core-ui .themes-filter-bar .feature-filter-toggle {
     3009        margin: 0;
     3010    }
     3011
     3012    .theme-browser .theme.active .theme-actions,
     3013    .wp-customizer .theme-browser .theme .theme-actions {
     3014        padding: 9px 15px;
     3015        box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
     3016    }
     3017}

  • trunk/src/wp-admin/css/themes.css

    r41797 r41893  
    9898    opacity: 0;
    9999    transition: opacity 0.1s ease-in-out;
    100     position: absolute;
    101     bottom: 0;
    102     right: 0;
    103     height: 38px;
    104     padding: 9px 10px 0 10px;
     100    height: auto;
    105101    background: rgba(244, 244, 244, 0.7);
    106102    border-left: 1px solid rgba(0,0,0,0.05);

  • trunk/src/wp-includes/customize/class-wp-customize-theme-control.php

    r41709 r41893  
    100100
    101101            <# if ( data.theme.active ) { #>
    102                 <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
    103                     <?php
    104                     /* translators: %s: theme name */
    105                     printf( __( '<span>Previewing:</span> %s' ), '{{ data.theme.name }}' );
    106                     ?>
    107                 </h3>
    108                 <div class="theme-actions">
    109                     <button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button>
     102                <div class="theme-id-container">
     103                    <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
     104                        <?php
     105                        /* translators: %s: theme name */
     106                        printf( __( '<span>Previewing:</span> %s' ), '{{ data.theme.name }}' );
     107                        ?>
     108                    </h3>
     109                    <div class="theme-actions">
     110                        <button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button>
     111                    </div>
    110112                </div>
    111113                <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
    112114            <# } else if ( 'installed' === data.theme.type ) { #>
    113                 <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
    114                 <div class="theme-actions">
    115                     <button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-slug="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></span>
     115                <div class="theme-id-container">
     116                    <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
     117                    <div class="theme-actions">
     118                        <button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-slug="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></span>
     119                    </div>
    116120                </div>
    117121                <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
    118122            <# } else { #>
    119                 <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
    120                 <div class="theme-actions">
    121                     <button type="button" class="button button-primary theme-install preview" aria-label="<?php echo esc_attr( $install_label ); ?>" data-slug="{{ data.theme.id }}" data-name="{{ data.theme.name }}"><?php _e( 'Install &amp; Preview' ); ?></button>
     123                <div class="theme-id-container">
     124                    <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
     125                    <div class="theme-actions">
     126                        <button type="button" class="button button-primary theme-install preview" aria-label="<?php echo esc_attr( $install_label ); ?>" data-slug="{{ data.theme.id }}" data-name="{{ data.theme.name }}"><?php _e( 'Install &amp; Preview' ); ?></button>
     127                    </div>
    122128                </div>
    123129            <# } #>

  • trunk/src/wp-includes/customize/class-wp-customize-themes-section.php

    r41807 r41893  
    115115                <label for="wp-filter-search-input-{{ data.id }}" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
    116116                <input type="search" id="wp-filter-search-input-{{ data.id }}" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search">
     117                <div class="search-icon" aria-hidden="true"></div>
    117118                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
    118119            </div>
    … …  
    145146                <label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
    146147                <input type="search" id="{{ data.id }}-themes-filter" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search wp-filter-search-themes" />
     148                <div class="search-icon" aria-hidden="true"></div>
    147149                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
    148150            </div>
Note: See TracChangeset for help on using the changeset viewer.