WordPress.org

Make WordPress Core

Changeset 41893


Ignore:
Timestamp:
10/18/17 04:05:03 (5 days 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.