WordPress.org

Make WordPress Core


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

Customize: Improve theme browsing UI on small screens.

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

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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            <# } #>
Note: See TracChangeset for help on using the changeset viewer.