WordPress.org
Get WordPress

Make WordPress Core

Changeset 31181


Ignore:
Timestamp:
01/14/2015 10:13:03 PM (12 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.