WordPress.org
Get WordPress

Make WordPress Core

Changeset 31181


Ignore:
Timestamp:
01/14/2015 10:13:03 PM (10 years ago)
Author:
helen
Message:

List tables: Use CSS :nth-child() selectors for zebra striping.

Note that this does not fix issues related to comment quick edit. Internal linking also continues to use the .alternate class for now. IE8 and below gracefully degrade by not having zebra striping.

There is some hoop jumping with adding an extra table row to maintain zebra striping during quick edit. Documenting that here for future reference; it is also in the inline documentation.

fixes #30981 and #26060. see #25060.

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

Legend:

Unmodified
Added
Removed

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

    r30952 r31181  
    628628}
    629629
    630 .alternate,
    631 .alt {
     630.striped > tbody > :nth-child(odd),
     631.alternate {
    632632    background-color: #f9f9f9;
    633633}

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

    r29828 r31181  
    695695}
    696696
    697 #activity-widget #the-comment-list .alternate,
    698 #activity-widget #the-comment-list .alt {
    699     background: none;
    700 }
    701 
    702697#activity-widget #the-comment-list .comment-item {
    703698    background: #fafafa;

  • trunk/src/wp-admin/css/list-tables.css

    r30813 r31181  
    14341434/* ms */
    14351435/* Background Color for Site Status */
    1436 .wp-list-table .site-deleted {
     1436.wp-list-table tr.site-deleted {
    14371437    background: #ff8573;
    14381438}
    1439 .wp-list-table .site-spammed {
     1439.wp-list-table tr.site-spammed {
    14401440    background: #faafaa;
    14411441}
    1442 .wp-list-table .site-archived {
     1442.wp-list-table tr.site-archived {
    14431443    background: #ffebe8;
    14441444}
    1445 .wp-list-table .site-mature {
     1445.wp-list-table tr.site-mature {
    14461446    background: #fecac2;
    14471447}

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

    r27469 r31181  
    7777    uasort( $importers, '_usort_by_first_member' );
    7878?>
    79 <table class="widefat importers">
     79<table class="widefat importers striped">
    8080
    8181<?php
    82     $alt = '';
    8382    foreach ($importers as $importer_id => $data) {
    8483        $action = '';
    … …  
    109108        }
    110109
    111         $alt = $alt ? '' : ' class="alternate"';
    112110        echo "
    113             <tr$alt>
     111            <tr>
    114112                <td class='import-system row-title'>$action</td>
    115113                <td class='desc'>{$data[1]}</td>

  • trunk/src/wp-admin/includes/class-wp-links-list-table.php

    r30754 r31181  
    112112        global $cat_id;
    113113
    114         $alt = 0;
    115 
    116114        foreach ( $this->items as $link ) {
    117115            $link = sanitize_bookmark( $link );
    … …  
    123121            $visible = ( $link->link_visible == 'Y' ) ? __( 'Yes' ) : __( 'No' );
    124122            $rating  = $link->link_rating;
    125             $style = ( $alt++ % 2 ) ? '' : ' class="alternate"';
    126123
    127124            $edit_link = get_edit_bookmark_link( $link );
    128125?>
    129         <tr id="link-<?php echo $link->link_id; ?>" <?php echo $style; ?>>
     126        <tr id="link-<?php echo $link->link_id; ?>">
    130127<?php
    131128

  • trunk/src/wp-admin/includes/class-wp-list-table.php

    r31167 r31181  
    954954     */
    955955    protected function get_table_classes() {
    956         return array( 'widefat', 'fixed', $this->_args['plural'] );
     956        return array( 'widefat', 'fixed', 'striped', $this->_args['plural'] );
    957957    }
    958958
    … …  
    10291029     */
    10301030    public function single_row( $item ) {
    1031         static $row_class = '';
    1032         $row_class = ( $row_class == '' ? ' class="alternate"' : '' );
    1033 
    1034         echo '<tr' . $row_class . '>';
     1031        echo '<tr>';
    10351032        $this->single_row_columns( $item );
    10361033        echo '</tr>';

  • trunk/src/wp-admin/includes/class-wp-media-list-table.php

    r31162 r31181  
    269269
    270270        add_filter( 'the_title','esc_html' );
    271         $alt = '';
    272271
    273272        while ( have_posts() ) : the_post();
    … …  
    278277                continue;
    279278
    280             $alt = ( 'alternate' == $alt ) ? '' : 'alternate';
    281279            $post_owner = ( get_current_user_id() == $post->post_author ) ? 'self' : 'other';
    282280            $att_title = _draft_or_post_title();
    283281?>
    284     <tr id="post-<?php echo $post->ID; ?>" class="<?php echo trim( $alt . ' author-' . $post_owner . ' status-' . $post->post_status ); ?>">
     282    <tr id="post-<?php echo $post->ID; ?>" class="<?php echo trim( ' author-' . $post_owner . ' status-' . $post->post_status ); ?>">
    285283<?php
    286284

  • trunk/src/wp-admin/includes/class-wp-ms-sites-list-table.php

    r30679 r31181  
    209209        }
    210210
    211         $class = '';
    212211        foreach ( $this->items as $blog ) {
    213             $class = ( 'alternate' == $class ) ? '' : 'alternate';
     212            $class = '';
    214213            reset( $status_list );
    215214
    … …  
    217216            foreach ( $status_list as $status => $col ) {
    218217                if ( get_blog_status( $blog['blog_id'], $status ) == 1 ) {
    219                     $class = $col[0];
     218                    $class = " class='{$col[0]}'";
    220219                    $blog_states[] = $col[1];
    221220                }
    … …  
    232231                }
    233232            }
    234             echo "<tr class='$class'>";
     233            echo "<tr{$class}>";
    235234
    236235            $blogname = ( is_subdomain_install() ) ? str_replace( '.' . get_current_site()->domain, '', $blog['domain'] ) : $blog['path'];

  • trunk/src/wp-admin/includes/class-wp-ms-users-list-table.php

    r30679 r31181  
    150150        global $mode;
    151151
    152         $alt = '';
    153152        $super_admins = get_super_admins();
    154153        foreach ( $this->items as $user ) {
    155             $alt = ( 'alternate' == $alt ) ? '' : 'alternate';
     154            $class = '';
    156155
    157156            $status_list = array( 'spam' => 'site-spammed', 'deleted' => 'site-deleted' );
    … …  
    159158            foreach ( $status_list as $status => $col ) {
    160159                if ( $user->$status )
    161                     $alt .= " $col";
     160                    $class .= " $col";
    162161            }
    163162
    164163            ?>
    165             <tr class="<?php echo $alt; ?>">
     164            <tr class="<?php echo trim( $class ); ?>">
    166165            <?php
    167166

  • trunk/src/wp-admin/includes/class-wp-posts-list-table.php

    r31165 r31181  
    289289
    290290    protected function get_table_classes() {
    291         return array( 'widefat', 'fixed', is_post_type_hierarchical( $this->screen->post_type ) ? 'pages' : 'posts' );
     291        return array( 'widefat', 'fixed', 'striped', is_post_type_hierarchical( $this->screen->post_type ) ? 'pages' : 'posts' );
    292292    }
    293293
    … …  
    573573    /**
    574574     * @global string $mode
    575      * @staticvar string $alternate
    576575     * @param WP_Post $post
    577576     * @param int $level
    … …  
    579578    public function single_row( $post, $level = 0 ) {
    580579        global $mode;
    581         static $alternate;
    582580
    583581        $global_post = get_post();
    … …  
    590588        $can_edit_post = current_user_can( 'edit_post', $post->ID );
    591589
    592         $alternate = 'alternate' == $alternate ? '' : 'alternate';
    593         $classes = $alternate . ' iedit author-' . ( get_current_user_id() == $post->post_author ? 'self' : 'other' );
     590        $classes = 'iedit author-' . ( get_current_user_id() == $post->post_author ? 'self' : 'other' );
    594591
    595592        $lock_holder = wp_check_post_lock( $post->ID );

  • trunk/src/wp-admin/includes/class-wp-terms-list-table.php

    r31166 r31181  
    269269    /**
    270270     * @global string $taxonomy
    271      * @staticvar string $row_class
    272271     * @param object $tag
    273272     * @param int $level
    … …  
    277276        $tag = sanitize_term( $tag, $taxonomy );
    278277
    279         static $row_class = '';
    280         $row_class = ( $row_class == '' ? ' class="alternate"' : '' );
    281 
    282278        $this->level = $level;
    283279
    284         echo '<tr id="tag-' . $tag->term_id . '"' . $row_class . '>';
     280        echo '<tr id="tag-' . $tag->term_id . '">';
    285281        $this->single_row_columns( $tag );
    286282        echo '</tr>';

  • trunk/src/wp-admin/includes/class-wp-users-list-table.php

    r30537 r31181  
    307307        $editable_roles = array_keys( get_editable_roles() );
    308308
    309         $style = '';
    310309        foreach ( $this->items as $userid => $user_object ) {
    311310            if ( count( $user_object->roles ) <= 1 ) {
    … …  
    320319                continue;
    321320
    322             $style = ( ' class="alternate"' == $style ) ? '' : ' class="alternate"';
    323             echo "\n\t" . $this->single_row( $user_object, $style, $role, isset( $post_counts ) ? $post_counts[ $userid ] : 0 );
     321            echo "\n\t" . $this->single_row( $user_object, $style = '', $role, isset( $post_counts ) ? $post_counts[ $userid ] : 0 );
    324322        }
    325323    }
    … …  
    329327     *
    330328     * @since 3.1.0
     329     * @since 4.2.0 `$style` argument was deprecated.
    331330     * @access public
    332331     *
    333332     * @param object $user_object The current user object.
    334      * @param string $style       Optional. Style attributes added to the `<tr>` element.
    335      *                            Must be sanitized. Default empty.
     333     * @param string $style       Deprecated. Not used.
    336334     * @param string $role        Optional. Key for the $wp_roles array. Default empty.
    337335     * @param int    $numposts    Optional. Post count to display for this user. Defaults
    … …  
    396394        $avatar = get_avatar( $user_object->ID, 32 );
    397395
    398         $r = "<tr id='user-$user_object->ID'$style>";
     396        $r = "<tr id='user-$user_object->ID'>";
    399397
    400398        list( $columns, $hidden ) = $this->get_column_info();

  • trunk/src/wp-admin/includes/template.php

    r31090 r31181  
    590590    $r = '';
    591591    ++ $count;
    592     if ( $count % 2 )
    593         $style = 'alternate';
    594     else
    595         $style = '';
    596592
    597593    if ( is_serialized( $entry['meta_value'] ) ) {
    … …  
    612608    $delete_nonce = wp_create_nonce( 'delete-meta_' . $entry['meta_id'] );
    613609
    614     $r .= "\n\t<tr id='meta-{$entry['meta_id']}' class='$style'>";
     610    $r .= "\n\t<tr id='meta-{$entry['meta_id']}'>";
    615611    $r .= "\n\t\t<td class='left'><label class='screen-reader-text' for='meta-{$entry['meta_id']}-key'>" . __( 'Key' ) . "</label><input name='meta[{$entry['meta_id']}][key]' id='meta-{$entry['meta_id']}-key' type='text' size='20' value='{$entry['meta_key']}' />";
    616612

  • trunk/src/wp-admin/js/inline-edit-post.js

    r28851 r31181  
    8383
    8484        $('#bulk-edit td').attr('colspan', $('.widefat:first thead th:visible').length);
    85         $('table.widefat tbody').prepend( $('#bulk-edit') );
     85        // Insert the editor at the top of the table with an empty row above to maintain zebra striping.
     86        $('table.widefat tbody').prepend( $('#bulk-edit') ).prepend('<tr class="hidden"></tr>');
    8687        $('#bulk-edit').addClass('inline-editor').show();
    8788
    … …  
    129130        }
    130131
    131         // add the new blank row
     132        // add the new edit row with an extra blank row underneath to maintain zebra striping.
    132133        editRow = $('#inline-edit').clone(true);
    133134        $('td', editRow).attr('colspan', $('.widefat:first thead th:visible').length);
    134135
    135         if ( $( t.what + id ).hasClass( 'alternate' ) ) {
    136             $(editRow).addClass('alternate');
    137         }
    138         $(t.what+id).hide().after(editRow);
     136        $(t.what+id).hide().before(editRow).before('<tr class="hidden"></tr>');
    139137
    140138        // populate the data
    … …  
    266264                if (r) {
    267265                    if ( -1 !== r.indexOf( '<tr' ) ) {
    268                         $(inlineEditPost.what+id).remove();
     266                        $(inlineEditPost.what+id).siblings('tr.hidden').addBack().remove();
    269267                        $('#edit-'+id).before(r).remove();
    270268                        $(inlineEditPost.what+id).hide().fadeIn();
    … …  
    276274                    $('#edit-'+id+' .inline-edit-save .error').html(inlineEditL10n.error).show();
    277275                }
    278 
    279                 if ( $('#post-'+id).prev().hasClass('alternate') ) {
    280                     $('#post-'+id).removeClass('alternate');
    281                 }
    282276            },
    283277        'html');
    … …  
    292286
    293287            if ( 'bulk-edit' === id ) {
    294                 $('table.widefat #bulk-edit').removeClass('inline-editor').hide();
     288                $('table.widefat #bulk-edit').removeClass('inline-editor').hide().siblings('tr.hidden').remove();
    295289                $('#bulk-titles').html('');
    296290                $('#inlineedit').append( $('#bulk-edit') );
    297291            } else {
    298                 $('#'+id).remove();
     292                $('#'+id).siblings('tr.hidden').addBack().remove();
    299293                id = id.substr( id.lastIndexOf('-') + 1 );
    300294                $(this.what+id).show();

  • trunk/src/wp-admin/js/inline-edit-tax.js

    r26265 r31181  
    5757        $('td', editRow).attr('colspan', $('.widefat:first thead th:visible').length);
    5858
    59         if ( $( t.what + id ).hasClass( 'alternate' ) ) {
    60             $(editRow).addClass('alternate');
    61         }
    62 
    63         $(t.what+id).hide().after(editRow);
     59        $(t.what+id).hide().before(editRow).before('<tr class="hidden"></tr>');
    6460
    6561        $(':input[name="name"]', editRow).val( $('.name', rowData).text() );
    … …  
    9995                if (r) {
    10096                    if ( -1 !== r.indexOf( '<tr' ) ) {
    101                         $(inlineEditTax.what+id).remove();
     97                        $(inlineEditTax.what+id).siblings('tr.hidden').addBack().remove();
    10298                        new_id = $(r).attr('id');
    10399
    … …  
    111107                    $('#edit-'+id+' .inline-edit-save .error').html(inlineEditL10n.error).show();
    112108                }
    113 
    114                 if ( $( row ).prev( 'tr' ).hasClass( 'alternate' ) ) {
    115                     $(row).removeClass('alternate');
    116                 }
    117109            }
    118110        );
    … …  
    125117        if ( id ) {
    126118            $('table.widefat .spinner').hide();
    127             $('#'+id).remove();
     119            $('#'+id).siblings('tr.hidden').addBack().remove();
    128120            id = id.substr( id.lastIndexOf('-') + 1 );
    129121            $(this.what+id).show();

  • trunk/src/wp-admin/my-sites.php

    r27469 r31181  
    7676    ?>
    7777    <br clear="all" />
    78     <table class="widefat fixed">
     78    <table class="widefat fixed striped">
    7979    <?php
    8080    /**
    … …  
    110110    }
    111111
    112     $c = '';
    113112    foreach ( $rows as $row ) {
    114         $c = $c == 'alternate' ? '' : 'alternate';
    115         echo "<tr class='$c'>";
     113        echo "<tr>";
    116114        $i = 0;
    117115        foreach ( $row as $user_blog ) {
Note: See TracChangeset for help on using the changeset viewer.