WordPress.org
Get WordPress

Make WordPress Core

Changeset 41949


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