WordPress.org
Get WordPress

Make WordPress Core

Changeset 41949


Ignore:
Timestamp:
10/19/2017 06:09:16 PM (7 years 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.