Make WordPress Core

Changeset 33155


Ignore:
Timestamp:
07/10/2015 09:43:32 PM (10 years ago)
Author:
helen
Message:

List tables: Better accessibility and design for the comments bubble.

It is now plain text in the comments list table's "In Response To" column, where it was visually a bit confusing to have the bubble. For other list tables, it now shows a little notification bubble with the number of pending comments. The bubble and notification become plain text in the responsive list table view. It also shows no bubble when there are no comments at all, reducing some of the visual noise.

props picard102, afercia, karinchristen.
fixes #32152.

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

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/list-tables.css

    r33152 r33155  
    1 /* List table styles */
    2 .post-com-count-wrapper {
    3     min-width: 22px;
    4 }
    5 
    6 .post-com-count {
    7     background: none;
    8     height: 1.3em;
    9     line-height: 1.1em;
     1.response-links {
    102    display: block;
    11     text-decoration: none;
    12     padding: 0 0 6px;
    13     cursor: pointer;
    14     background-position: center -80px;
    15     background-repeat: no-repeat;
     3    margin-bottom: 1em;
     4}
     5
     6.response-links a {
     7    display: block;
     8}
     9
     10.response-links a.comments-edit-item-link {
     11    font-weight: 600;
     12}
     13
     14.response-links a.comments-view-item-link {
     15    font-size: 12px;
     16}
     17
     18.column-response .post-com-count .screen-reader-text {
     19    position: static;
     20    width: auto;
     21    height: auto;
     22    margin: 0;
     23}
     24
     25.column-response .post-com-count [aria-hidden="true"] {
     26    display: none;
     27}
     28
     29.post-com-count-wrapper strong {
     30    font-weight: 400;
     31}
     32
     33.column-response .post-com-count.post-com-count-pending {
     34    color: #bb2a2a;
     35}
     36
     37.comments-view-item-link {
     38    display: inline-block;
     39    clear: both;
     40}
     41
     42.column-comments .post-com-count-wrapper {
     43    white-space: nowrap;
     44    word-wrap: normal;
     45}
     46
     47/* comments bubble common */
     48.column-comments .post-com-count {
     49    display: inline-block;
     50    vertical-align: top;
     51}
     52
     53.column-response .post-com-count {
     54    display: block;
     55}
     56
     57/* comments bubble approved */
     58.column-comments .post-com-count-no-comments,
     59.column-comments .post-com-count-approved {
     60    margin-top: 5px;
     61}
     62
     63.column-comments .comment-count-no-comments,
     64.column-comments .comment-count-approved {
     65    -webkit-box-sizing: border-box;
     66    -moz-box-sizing: border-box;
     67    box-sizing: border-box;
     68    display: block;
     69    padding: 0 8px;
     70    min-width: 24px;
     71    height: 2em;
     72    -webkit-border-radius: 5px;
     73    border-radius: 5px;
     74    background-color: #72777c;
    1675    color: #fff;
    17 }
    18 
    19 .post-com-count:after {     /* draw bubble connector using CSS! */
     76    font-size: 11px;
     77    line-height: 21px;
     78    text-align: center;
     79}
     80
     81.ie8 .column-comments .comment-count-no-comments,
     82.ie8 .column-comments .comment-count-approved {
     83    min-width: 0;
     84}
     85
     86.column-comments .post-com-count-no-comments:after,
     87.column-comments .post-com-count-approved:after {
    2088    content: "";
    2189    display: block;
     90    margin-left: 8px;
    2291    width: 0;
    2392    height: 0;
    24     margin-left: 8px;
    25     border-top: 5px solid #b4b9be;
     93    border-top: 5px solid #72777c;
    2694    border-right: 5px solid transparent;
    2795}
    2896
    29 .post-com-count span {
    30     font-size: 11px;
    31     font-weight: 600;
    32     height: 1.4em;
    33     line-height: 1.4em;
    34     min-width: 0.7em;
    35     padding: 0 6px;
    36     display: inline-block;
    37     -webkit-border-radius: 5px;
    38     border-radius: 5px;
    39     background-color: #b4b9be;
     97.column-comments .post-com-count-approved:hover .comment-count-approved,
     98.column-comments .post-com-count-approved:focus .comment-count-approved {
     99    background: #0073aa;
     100}
     101
     102.column-comments .post-com-count-approved:hover:after,
     103.column-comments .post-com-count-approved:focus:after {
     104    border-top-color: #0073aa;
     105}
     106
     107/* comments bubble pending */
     108.column-comments .post-com-count-pending {
     109    position: relative;
     110    left: -3px;
     111    padding: 0 5px;
     112    min-width: 7px;
     113    height: 17px;
     114    border: 2px solid #fff;
     115    -webkit-border-radius: 11px;
     116    border-radius: 11px;
     117    background: #ca4a1f;
    40118    color: #fff;
    41 }
    42 
    43 .post-com-count:hover {
    44     background-position: center -3px;
    45 }
    46 
    47 .post-com-count:hover span {
    48     background-color: #00a0d2;
    49 }
    50 
    51 .post-com-count:hover:after {
    52     border-top: 5px solid #00a0d2;
    53 }
    54 
    55 strong .post-com-count {
    56     background-position: center -55px;
    57 }
    58 
    59 strong .post-com-count span {
    60     background-color: #0073aa;
    61 }
    62 
    63 strong .post-com-count:after {
    64     border-top: 5px solid #0073aa;
    65 }
    66 
    67 .column-response .post-com-count {
    68     float: left;
    69     margin-right: 5px;
     119    font-size: 9px;
     120    line-height: 17px;
    70121    text-align: center;
    71 }
    72 
    73 .response-links {
    74     float: left;
    75122}
    76123
     
    284331
    285332.fixed .column-comments {
    286     width: 4em;
     333    width: 5.5em;
    287334    padding: 8px 0;
    288335    text-align: left;
     
    293340}
    294341
    295 .fixed .column-comments a {
    296     float: left;
    297 }
    298342
    299343td.column-title strong,
     
    14531497}
    14541498
    1455 @media screen and ( max-width: 782px ) {
    1456     .plugin-card {
    1457         margin-left: 0;
    1458         margin-right: 0;
    1459         width: 100%;
    1460     }
    1461 }
    1462 
    14631499.plugin-card-top {
    14641500    position: relative;
     
    18161852    }
    18171853
     1854    /* Show comment bubble as text instead */
     1855    .post-com-count .screen-reader-text {
     1856        position: static;
     1857        width: auto;
     1858        height: auto;
     1859        margin: 0;
     1860    }
     1861
     1862    .column-comments .post-com-count-no-comments:after,
     1863    .column-comments .post-com-count-approved:after {
     1864        content: none;
     1865    }
     1866
     1867    .column-comments .post-com-count [aria-hidden="true"] {
     1868        display: none;
     1869    }
     1870
     1871    .column-comments .post-com-count-wrapper {
     1872        white-space: normal;
     1873    }
     1874
     1875    .column-comments .post-com-count-wrapper > a {
     1876        display: block;
     1877    }
     1878
     1879    .column-comments .post-com-count-no-comments,
     1880    .column-comments .post-com-count-approved {
     1881        margin-top: 0;
     1882        margin-right: 0.5em;
     1883    }
     1884
     1885    .column-comments .post-com-count-pending {
     1886        position: static;
     1887        height: auto;
     1888        min-width: 0;
     1889        padding: 0;
     1890        border: none;
     1891        -webkit-border-radius: 0;
     1892        border-radius: 0;
     1893        background: none;
     1894        color: #bb2a2a;
     1895        font-size: inherit;
     1896        line-height: inherit;
     1897        text-align: left;
     1898    }
     1899
     1900    .column-comments .post-com-count-pending:hover {
     1901        color: #dc3232;
     1902    }
     1903
    18181904    .widefat thead .check-column, .widefat tfoot .check-column {
    18191905        padding: 10px 0 10px;
     
    20212107        box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
    20222108    }
    2023 }
     2109
     2110    .plugin-card {
     2111        margin-left: 0;
     2112        margin-right: 0;
     2113        width: 100%;
     2114    }
     2115}
  • trunk/src/wp-admin/includes/class-wp-comments-list-table.php

    r33101 r33155  
    679679
    680680        if ( current_user_can( 'edit_post', $post->ID ) ) {
    681             $post_link = "<a href='" . get_edit_post_link( $post->ID ) . "'>";
     681            $post_link = "<a href='" . get_edit_post_link( $post->ID ) . "' class='comments-edit-item-link'>";
    682682            $post_link .= esc_html( get_the_title( $post->ID ) ) . '</a>';
    683683        } else {
     
    685685        }
    686686
    687         echo '<div class="response-links"><span class="post-com-count-wrapper">';
    688         echo $post_link . '<br />';
     687        echo '<div class="response-links">';
     688        echo $post_link;
     689        $post_type_object = get_post_type_object( $post->post_type );
     690        echo "<a href='" . get_permalink( $post->ID ) . "' class='comments-view-item-link'>" . $post_type_object->labels->view_item . '</a>';
     691        if ( 'attachment' == $post->post_type && ( $thumb = wp_get_attachment_image( $post->ID, array( 80, 60 ), true ) ) ) {
     692            echo $thumb;
     693        }
     694        echo '</div>';
     695        echo '<span class="post-com-count-wrapper">';
    689696        $this->comments_bubble( $post->ID, $pending_comments );
    690697        echo '</span> ';
    691         $post_type_object = get_post_type_object( $post->post_type );
    692         echo "<a href='" . get_permalink( $post->ID ) . "'>" . $post_type_object->labels->view_item . '</a>';
    693         echo '</div>';
    694         if ( 'attachment' == $post->post_type && ( $thumb = wp_get_attachment_image( $post->ID, array( 80, 60 ), true ) ) )
    695             echo $thumb;
    696698    }
    697699
  • trunk/src/wp-admin/includes/class-wp-list-table.php

    r33104 r33155  
    615615     */
    616616    protected function comments_bubble( $post_id, $pending_comments ) {
    617         $pending_phrase = sprintf( __( '%s pending' ), number_format( $pending_comments ) );
    618 
    619         if ( $pending_comments )
    620             echo '<strong>';
    621 
    622         echo "<a href='" . esc_url( add_query_arg( 'p', $post_id, admin_url( 'edit-comments.php' ) ) ) . "' title='" . esc_attr( $pending_phrase ) . "' class='post-com-count'><span class='comment-count'>" . number_format_i18n( get_comments_number() ) . "</span></a>";
    623 
    624         if ( $pending_comments )
    625             echo '</strong>';
     617        $approved_comments = get_comments_number();
     618
     619        $approved_comments_number = number_format_i18n( $approved_comments );
     620        $pending_comments_number = number_format_i18n( $pending_comments );
     621
     622        $approved_only_phrase = sprintf( _n( '%s comment', '%s comments', $approved_comments ), $approved_comments_number );
     623        $approved_phrase = sprintf( _n( '%s approved comment', '%s approved comments', $approved_comments ), $approved_comments_number );
     624        $pending_phrase = sprintf( _n( '%s pending comment', '%s pending comments', $pending_comments ), $pending_comments_number );
     625
     626        // No comments at all.
     627        if ( ! $approved_comments && ! $pending_comments ) {
     628            printf( '<span aria-hidden="true">—</span><span class="screen-reader-text">%s</span>',
     629                __( 'No comments' )
     630            );
     631        // Approved comments have different display depending on some conditions.
     632        } elseif ( $approved_comments ) {
     633            printf( '<a href="%s" class="post-com-count post-com-count-approved"><span class="comment-count-approved" aria-hidden="true">%s</span><span class="screen-reader-text">%s</span></a>',
     634                esc_url( add_query_arg( array( 'p' => $post_id, 'comment_status' => 'approved' ), admin_url( 'edit-comments.php' ) ) ),
     635                $approved_comments_number,
     636                $pending_comments ? $approved_phrase : $approved_only_phrase
     637            );
     638        } else {
     639            printf( '<span class="post-com-count post-com-count-no-comments"><span class="comment-count comment-count-no-comments" aria-hidden="true">%s</span><span class="screen-reader-text">%s</span></span>',
     640                $approved_comments_number,
     641                $pending_comments ? __( 'No approved comments' ) : __( 'No comments' )
     642            );
     643        }
     644
     645        if ( $pending_comments ) {
     646            printf( '<a href="%s" class="post-com-count post-com-count-pending"><span class="comment-count-pending" aria-hidden="true">%s</span><span class="screen-reader-text">%s</span></a>',
     647                esc_url( add_query_arg( array( 'p' => $post_id, 'comment_status' => 'moderated' ), admin_url( 'edit-comments.php' ) ) ),
     648                $pending_comments_number,
     649                $pending_phrase
     650            );
     651        }
    626652    }
    627653
Note: See TracChangeset for help on using the changeset viewer.