WordPress.org

Make WordPress Core

Changeset 41949


Ignore:
Timestamp:
10/19/17 18:09:16 (4 days ago)
Author:
westonruter
Message:

Customize: Fix alignment of Customize, Activate, and Live Preview buttons appearing on the Themes admin screen.

Amends [41893].
Props Mahvash-Fatima.
See #42215.
Fixes #42275.

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

Legend:

Unmodified
Added
Removed

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

    r41948 r41949  
    16761676} 
    16771677 
     1678.theme-browser .theme.active .theme-actions, 
     1679.wp-customizer .theme-browser .theme .theme-actions { 
     1680    padding: 10px 15px; 
     1681    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); 
     1682} 
     1683 
    16781684@media screen and ( max-width: 640px ) { 
    16791685    .customize-section-description-container + #customize-control-custom_css:last-child { 
    … …  
    20972103#customize-controls h3.theme-name { 
    20982104    font-size: 15px; 
    2099 } 
    2100  
    2101 .theme-id-container { 
    2102     position: relative; 
    2103 } 
    2104  
    2105 .theme-browser .theme.active .theme-actions, 
    2106 .wp-customizer .theme-browser .theme .theme-actions { 
    2107     position: absolute; 
    2108     top: 50%; 
    2109     -webkit-transform: translateY(-50%); 
    2110     transform: translateY(-50%); 
    2111     right: 0; 
    2112     padding: 10px 15px; 
    2113     box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); 
    21142105} 
    21152106 
    … …  
    30433034    } 
    30443035} 
     3036 
     3037@media screen and ( max-width: 600px ) { 
     3038    .theme-browser .theme.active .theme-actions, 
     3039    .wp-customizer .theme-browser .theme .theme-actions { 
     3040        padding: 8px 15px; 
     3041        box-shadow: none; 
     3042    } 
     3043} 

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

    r41893 r41949  
    221221    border-left: none; 
    222222    opacity: 1; 
     223} 
     224 
     225.theme-id-container { 
     226    position: relative; 
     227} 
     228 
     229.theme-browser .theme.active .theme-actions, 
     230.theme-browser .theme .theme-actions { 
     231    position: absolute; 
     232    top: 50%; 
     233    -webkit-transform: translateY(-50%); 
     234    transform: translateY(-50%); 
     235    right: 0; 
     236    padding: 10px 15px; 
     237    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1); 
    223238} 
    224239 
    … …  
    18931908        line-height: normal; 
    18941909    } 
     1910 
     1911    .theme-browser .theme .theme-actions .button { 
     1912        margin-bottom: 0; 
     1913    } 
     1914 
     1915    .theme-browser .theme.active .theme-actions, 
     1916    .theme-browser .theme .theme-actions { 
     1917        padding-top: 8px; 
     1918        padding-bottom: 8px; 
     1919    } 
    18951920} 
    18961921 

  • trunk/src/wp-admin/theme-install.php

    r41878 r41949  
    265265        ?> 
    266266    </div> 
    267     <h3 class="theme-name">{{ data.name }}</h3> 
    268  
    269     <div class="theme-actions"> 
    270         <# if ( data.installed ) { #> 
    271             <?php 
    272             /* translators: %s: Theme name */ 
    273             $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' ); 
    274             ?> 
    275             <# if ( data.activate_url ) { #> 
    276                 <a class="button button-primary activate" href="{{ data.activate_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a> 
    277             <# } #> 
    278             <# if ( data.customize_url ) { #> 
    279                 <a class="button load-customize" href="{{ data.customize_url }}"><?php _e( 'Live Preview' ); ?></a> 
     267 
     268    <div class="theme-id-container"> 
     269        <h3 class="theme-name">{{ data.name }}</h3> 
     270 
     271        <div class="theme-actions"> 
     272            <# if ( data.installed ) { #> 
     273                <?php 
     274                /* translators: %s: Theme name */ 
     275                $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' ); 
     276                ?> 
     277                <# if ( data.activate_url ) { #> 
     278                    <a class="button button-primary activate" href="{{ data.activate_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a> 
     279                <# } #> 
     280                <# if ( data.customize_url ) { #> 
     281                    <a class="button load-customize" href="{{ data.customize_url }}"><?php _e( 'Live Preview' ); ?></a> 
     282                <# } else { #> 
     283                    <button class="button preview install-theme-preview"><?php _e( 'Preview' ); ?></button> 
     284                <# } #> 
    280285            <# } else { #> 
     286                <?php 
     287                /* translators: %s: Theme name */ 
     288                $aria_label = sprintf( __( 'Install %s' ), '{{ data.name }}' ); 
     289                ?> 
     290                <a class="button button-primary theme-install" data-name="{{ data.name }}" data-slug="{{ data.id }}" href="{{ data.install_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Install' ); ?></a> 
    281291                <button class="button preview install-theme-preview"><?php _e( 'Preview' ); ?></button> 
    282292            <# } #> 
    283         <# } else { #> 
    284             <?php 
    285             /* translators: %s: Theme name */ 
    286             $aria_label = sprintf( __( 'Install %s' ), '{{ data.name }}' ); 
    287             ?> 
    288             <a class="button button-primary theme-install" data-name="{{ data.name }}" data-slug="{{ data.id }}" href="{{ data.install_url }}" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Install' ); ?></a> 
    289             <button class="button preview install-theme-preview"><?php _e( 'Preview' ); ?></button> 
    290         <# } #> 
     293        </div> 
    291294    </div> 
    292295 

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

    r41878 r41949  
    274274    <div class="theme-author"><?php printf( __( 'By %s' ), $theme['author'] ); ?></div> 
    275275 
    276     <?php if ( $theme['active'] ) { ?> 
    277         <h2 class="theme-name" id="<?php echo $aria_name; ?>"> 
     276    <div class="theme-id-container"> 
     277        <?php if ( $theme['active'] ) { ?> 
     278            <h2 class="theme-name" id="<?php echo $aria_name; ?>"> 
     279                <?php 
     280                /* translators: %s: theme name */ 
     281                printf( __( '<span>Active:</span> %s' ), $theme['name'] ); 
     282                ?> 
     283            </h2> 
     284        <?php } else { ?> 
     285            <h2 class="theme-name" id="<?php echo $aria_name; ?>"><?php echo $theme['name']; ?></h2> 
     286        <?php } ?> 
     287 
     288        <div class="theme-actions"> 
     289        <?php if ( $theme['active'] ) { ?> 
     290            <?php if ( $theme['actions']['customize'] && current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?> 
     291                <a class="button button-primary customize load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Customize' ); ?></a> 
     292            <?php } ?> 
     293        <?php } else { ?> 
    278294            <?php 
    279             /* translators: %s: theme name */ 
    280             printf( __( '<span>Active:</span> %s' ), $theme['name'] ); 
     295            /* translators: %s: Theme name */ 
     296            $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' ); 
    281297            ?> 
    282         </h2> 
    283     <?php } else { ?> 
    284         <h2 class="theme-name" id="<?php echo $aria_name; ?>"><?php echo $theme['name']; ?></h2> 
    285     <?php } ?> 
    286  
    287     <div class="theme-actions"> 
    288  
    289     <?php if ( $theme['active'] ) { ?> 
    290         <?php if ( $theme['actions']['customize'] && current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?> 
    291             <a class="button button-primary customize load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Customize' ); ?></a> 
     298            <a class="button activate" href="<?php echo $theme['actions']['activate']; ?>" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a> 
     299            <?php if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?> 
     300                <a class="button button-primary load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Live Preview' ); ?></a> 
     301            <?php } ?> 
    292302        <?php } ?> 
    293     <?php } else { ?> 
    294         <?php 
    295         /* translators: %s: Theme name */ 
    296         $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' ); 
    297         ?> 
    298         <a class="button activate" href="<?php echo $theme['actions']['activate']; ?>" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Activate' ); ?></a> 
    299         <?php if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) { ?> 
    300             <a class="button button-primary load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Live Preview' ); ?></a> 
    301         <?php } ?> 
    302     <?php } ?> 
    303  
     303 
     304        </div> 
    304305    </div> 
    305306</div> 
    … …  
    408409    </div> 
    409410 
    410     <# if ( data.active ) { #> 
    411         <h2 class="theme-name" id="{{ data.id }}-name"> 
    412             <?php 
    413             /* translators: %s: Theme name */ 
    414             printf( __( '<span>Active:</span> %s' ), '{{{ data.name }}}' ); 
    415             ?> 
    416         </h2> 
    417     <# } else { #> 
    418         <h2 class="theme-name" id="{{ data.id }}-name">{{{ data.name }}}</h2> 
    419     <# } #> 
    420  
    421     <div class="theme-actions"> 
     411    <div class="theme-id-container"> 
    422412        <# if ( data.active ) { #> 
    423             <# if ( data.actions.customize ) { #> 
    424                 <a class="button button-primary customize load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Customize' ); ?></a> 
     413            <h2 class="theme-name" id="{{ data.id }}-name"> 
     414                <?php 
     415                /* translators: %s: Theme name */ 
     416                printf( __( '<span>Active:</span> %s' ), '{{{ data.name }}}' ); 
     417                ?> 
     418            </h2> 
     419        <# } else { #> 
     420            <h2 class="theme-name" id="{{ data.id }}-name">{{{ data.name }}}</h2> 
     421        <# } #> 
     422 
     423        <div class="theme-actions"> 
     424            <# if ( data.active ) { #> 
     425                <# if ( data.actions.customize ) { #> 
     426                    <a class="button button-primary customize load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Customize' ); ?></a> 
     427                <# } #> 
     428            <# } else { #> 
     429                <?php 
     430                /* translators: %s: Theme name */ 
     431                $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' ); 
     432                ?> 
     433                <a class="button activate" href="{{{ data.actions.activate }}}" aria-label="<?php echo $aria_label; ?>"><?php _e( 'Activate' ); ?></a> 
     434                <a class="button button-primary load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a> 
    425435            <# } #> 
    426         <# } else { #> 
    427             <?php 
    428             /* translators: %s: Theme name */ 
    429             $aria_label = sprintf( _x( 'Activate %s', 'theme' ), '{{ data.name }}' ); 
    430             ?> 
    431             <a class="button activate" href="{{{ data.actions.activate }}}" aria-label="<?php echo $aria_label; ?>"><?php _e( 'Activate' ); ?></a> 
    432             <a class="button button-primary load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a> 
    433         <# } #> 
     436        </div> 
    434437    </div> 
    435438</script> 
Note: See TracChangeset for help on using the changeset viewer.