WordPress.org
Get WordPress

Making WordPress.org

Changeset 3379


Ignore:
Timestamp:
06/15/2016 10:09:02 PM (10 years ago)
Author:
coffee2code
Message:

developer.wordpress.org: Improve UX/UI for user contributed notes.

  • UI improvements to notes.
  • Order notes in descending order by cumulative vote rating.
  • Notes with a cumulative vote rating below -1 are shown slightly faded out.

Props keesiemeijer.
See #1649.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/comments.php

    r3316 r3379  
    4343                                        wp_list_comments();
    4444                                } else {
    45                                         wp_list_comments( array( 'callback' => 'wporg_developer_user_note' ) );
     45                                        $ordered_comments = wporg_developer_get_ordered_notes();
     46                                        if ( $ordered_comments ) {
     47                                                wp_list_comments( array( 'callback' => 'wporg_developer_user_note' ), $ordered_comments );
     48                                        }
    4649                                }
    4750                        ?>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/template-tags.php

    r3315 r3379  
    7373        endif;
    7474
     75        if ( ! function_exists( 'wporg_developer_get_ordered_notes' ) ) :
     76                /**
     77                 * Get contibuted notes ordered by vote
     78                 *
     79                 * By default only top level comments are returned.
     80                 * If child notes are included use wp_list_comments() or a custom walker for display.
     81                 * unapproved notes for the current user are included.
     82                 *
     83                 * @param integer $post_id Optional. Post id to get comments for
     84                 * @param array $args Arguments used for get_comments().
     85                 * @return array Array with comment objects
     86                 */
     87                function wporg_developer_get_ordered_notes( $post_id = 0, $args = array() ) {
     88
     89                        $post_id = absint( $post_id );
     90
     91                        if ( ! $post_id ) {
     92                                $post_id = get_the_ID();
     93                        }
     94
     95                        $order    = array();
     96                        $defaults = array(
     97                                'post__in'           => array( $post_id ),
     98                                'type'               => 'comment',
     99                                'status'             => 'approve',
     100                                'include_unapproved' => array_filter( array( get_current_user_id() ) ),
     101                                'parent'             => false,
     102                        );
     103
     104                        if ( is_super_admin() ) {
     105                                $defaults['status'] = 'all';
     106                        }
     107
     108                        $args = wp_parse_args( $args, $defaults );
     109
     110                        $comments = get_comments( $args );
     111               
     112                        if ( ! $comments ) {
     113                                return;
     114                        }
     115
     116                        foreach ( $comments as $key => $comment ) {
     117                                $order[ $key ] = (int) DevHub_User_Contributed_Notes_Voting::count_votes( $comment->comment_ID, 'difference' );
     118                        }
     119
     120                        // sort the posts by votes
     121                        array_multisort( $order, SORT_DESC, $comments );
     122
     123                        return $comments;
     124                }
     125        endif;
     126
    75127        if ( ! function_exists( 'wporg_developer_user_note' ) ) :
    76128                /**
    77129                 * Template for user contributed notes.
    78                  *
    79                  * Used as a callback by wp_list_comments() for displaying the notes.
    80130                 */
    81131                function wporg_developer_user_note( $comment, $args, $depth ) {
    82132                        $GLOBALS['comment'] = $comment;
    83 
    84                         if ( 'pingback' == $comment->comment_type || 'trackback' == $comment->comment_type ) : ?>
    85 
    86                                 <li id="comment-<?php comment_ID(); ?>" <?php comment_class(); ?>>
    87                                 <div class="comment-body">
    88                                         <?php _e( 'Pingback:', 'wporg' ); ?> <?php comment_author_link(); ?> <?php edit_comment_link( __( 'Edit', 'wporg' ), '<span class="edit-link">', '</span>' ); ?>
     133                        $count = (int) DevHub_User_Contributed_Notes_Voting::count_votes( $comment->comment_ID, 'difference' );
     134                        $comment_class = ( -1 > $count ) ? 'bad-note' : '';
     135                        ?>
     136
     137                        <li id="comment-<?php comment_ID(); ?>" <?php comment_class( $comment_class ); ?>>
     138                        <article id="div-comment-<?php comment_ID(); ?>" class="comment-body">
     139                                <header class="comment-meta">
     140                                        <?php DevHub_User_Contributed_Notes_Voting::show_voting(); ?>
     141                                        <div class="comment-author vcard">
     142                                                <span class="comment-author-attribution">
     143                                                <?php if ( 0 != $args['avatar_size'] ) {
     144                                                                echo get_avatar( $comment, $args['avatar_size'] );
     145                                                } ?>
     146
     147                                                <?php
     148                                                        // This would all be moot if core passed the $comment context for 'get_comment_author_link' filter
     149                                                        if ( $comment->user_id ) {
     150                                                                $commenter = get_user_by( 'id', $comment->user_id );
     151                                                                $url = 'https://profiles.wordpress.org/' . esc_attr( $commenter->user_nicename ) . '/';
     152                                                                $author = get_the_author_meta( 'display_name', $comment->user_id );
     153                                                        } else {
     154                                                                $url = $comment->comment_author_url;
     155                                                                $author = $comment->comment_author;
     156                                                        }
     157
     158                                                        $comment_author_link = '';
     159                                                        if ( $url ) {
     160                                                                $comment_author_link = "<a href='$url' rel='external nofollow' class='url'>";
     161                                                        }
     162                                                        $comment_author_link .= $author;
     163                                                        if ( $url ) {
     164                                                                $comment_author_link .= '</a>';
     165                                                        }
     166
     167                                                        printf( __( 'Contributed by %s', 'wporg' ), sprintf( '<cite class="fn">%s</cite>', $comment_author_link ) );
     168                                                ?>
     169
     170                                                </span>
     171                                                &mdash;
     172                                                <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
     173                                                        <time datetime="<?php comment_time( 'c' ); ?>">
     174                                                        <?php
     175                                                                printf( _x( '%1$s ago', '%1$s = human-readable time difference', 'wporg' ),
     176                                                                        human_time_diff( get_comment_time( 'U' ),
     177                                                                        current_time( 'timestamp' ) )
     178                                                                );
     179                                                        ?>
     180                                                        </time>
     181                                                </a>
     182                                                <?php edit_comment_link( __( 'Edit', 'wporg' ), '<span class="edit-link">&mdash; ', '</span>' ); ?>
     183                                        </div>
     184                                </header>
     185                                <!-- .comment-metadata -->
     186
     187                                <div class="comment-content">
     188                                        <?php comment_text(); ?>
    89189                                </div>
    90 
    91                         <?php else : ?>
    92 
    93                                 <li id="comment-<?php comment_ID(); ?>" <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ); ?>>
    94                                 <article id="div-comment-<?php comment_ID(); ?>" class="comment-body">
    95                                         <div class="comment-content">
    96                                                 <?php comment_text(); ?>
    97                                         </div>
    98                                         <!-- .comment-content -->
    99 
    100                                         <footer class="comment-meta">
    101                                                 <?php DevHub_User_Contributed_Notes_Voting::show_voting(); ?>
    102                                                 <div class="comment-author vcard">
    103                                                         <span class="comment-author-attribution">
    104                                                         <?php if ( 0 != $args['avatar_size'] ) {
    105                                                                 echo get_avatar( $comment, $args['avatar_size'] );
    106                                                         } ?>
    107 
    108                                                         <?php
    109                                                                 // This would all be moot if core passed the $comment context for 'get_comment_author_link' filter
    110                                                                 if ( $comment->user_id ) {
    111                                                                         $commenter = get_user_by( 'id', $comment->user_id );
    112                                                                         $url = 'https://profiles.wordpress.org/' . esc_attr( $commenter->user_nicename ) . '/';
    113                                                                         $author = get_the_author_meta( 'display_name', $comment->user_id );
    114                                                                 } else {
    115                                                                         $url = $comment->comment_author_url;
    116                                                                         $author = $comment->comment_author;
    117                                                                 }
    118 
    119                                                                 $comment_author_link = '';
    120                                                                 if ( $url ) {
    121                                                                         $comment_author_link = "<a href='$url' rel='external nofollow' class='url'>";
    122                                                                 }
    123                                                                 $comment_author_link .= $author;
    124                                                                 if ( $url ) {
    125                                                                         $comment_author_link .= '</a>';
    126                                                                 }
    127 
    128                                                                 printf( __( 'Contributed by %s', 'wporg' ), sprintf( '<cite class="fn">%s</cite>', $comment_author_link ) );
    129                                                         ?>
    130 
    131                                                         </span>
    132                                                         &mdash;
    133                                                         Added on <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
    134                                                                 <time datetime="<?php comment_time( 'c' ); ?>">
    135                                                                         <?php printf( _x( '%1$s at %2$s', '1: date, 2: time', 'wporg' ), get_comment_date(), get_comment_time() ); ?>
    136                                                                 </time>
    137                                                         </a>
    138                                                         <?php edit_comment_link( __( 'Edit', 'wporg' ), '<span class="edit-link">&mdash; ', '</span>' ); ?>
    139                                                 </div>
    140                                                 <!-- .comment-metadata -->
    141 
    142                                                 <?php if ( '0' == $comment->comment_approved ) : ?>
    143                                                         <p class="comment-awaiting-moderation"> &mdash; <?php _e( 'Your note is awaiting moderation.', 'wporg' ); ?></p>
    144                                                 <?php endif; ?>
     190                                <!-- .comment-content -->
     191
     192                                <?php if ( '0' == $comment->comment_approved ) : ?>
     193                                        <footer class="comment-footer">
     194                                                <p class="comment-awaiting-moderation"><?php _e( 'Your note is awaiting moderation.', 'wporg' ); ?></p>
    145195                                        </footer>
    146                                         <!-- .comment-meta -->
    147 
    148                                         <?php
     196                                        <!-- .comment-footer -->
     197                                <?php endif; ?>
     198
     199                                <?php
    149200                                        comment_reply_link( array_merge( $args, array(
    150201                                                'add_below' => 'div-comment',
    … …  
    154205                                                'after'     => '</div>',
    155206                                        ) ) );
    156                                         ?>
    157                                 </article><!-- .comment-body -->
    158 
     207                                ?>
     208                        </article><!-- .comment-body -->
    159209                        <?php
    160                         endif;
    161210                }
    162211        endif; // ends check for wporg_developer_user_note()

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

    r3316 r3379  
    11341134
    11351135        .source-code-container {
    1136                 border-right: 1px solid #dfdfdf;
    11371136                overflow-x: auto;
    11381137                overflow-y: hidden;
    … …  
    11561155        // User contributed notes
    11571156        &.single-wp-parser-function, &.single-wp-parser-method, &.single-wp-parser-hook {
     1157
     1158                .bad-note .comment-content {
     1159                        opacity: .6;
     1160                }
     1161
     1162                .bad-note .comment-content:hover {
     1163                        opacity: 1;
     1164                }
     1165
    11581166                .comment-list,
    11591167                .comment-list ol {
    … …  
    11641172
    11651173                .comment-list li {
    1166                         padding: 2rem 1.5rem 1rem;
     1174                        margin-top: 2.5rem;
    11671175                        background: #fff;
    11681176                        overflow: auto;
    1169 
    1170                         &:first-child {
    1171                                 padding-top: 1rem;
    1172                         }
     1177                        border: 1px solid #dfdfdf;
     1178                        border-radius: 2px;
    11731179
    11741180                        article {
    1175                                 border-bottom: 1px solid #dfdfdf;
    1176                                 padding-bottom: 1em;
    11771181                                overflow: auto;
    11781182                        }
    … …  
    11811185                .comment-list .avatar {
    11821186                        float: left;
    1183                         width: 2.5em;
    1184                         height: 2.5em;
    1185                         margin: -0.5em 1em 0.5em 0;
     1187                        margin: -2px 1em 0 0;
    11861188                        padding: 0.125em;
    11871189                        border: 1px solid #eee;
    … …  
    11891191
    11901192                .comment-author-attribution {
    1191                         font-weight: bold;
    11921193                }
    11931194
    11941195                .comment-meta {
    1195                         margin: 0 0 1.5em 0;
    1196                         font-size: 0.75em;
     1196                        padding: .5em 1em;
     1197                        background-color: #f7f7f7;
     1198                        overflow: auto;
    11971199                }
    11981200
    … …  
    12001202                .comment-meta .comment-author cite a {
    12011203                }
     1204
    12021205                .comment-meta a {
    12031206                }
    … …  
    12111214                        margin-left: 0;
    12121215                        clear: both;
     1216                        padding: 2rem 1.5rem .5rem;
     1217                }
     1218
     1219                .comment-footer {
     1220                        margin: 0 1em;
     1221                        padding: 0 0 1em 0;
     1222                        position: relative;
     1223                        overflow: auto;
     1224
     1225                        a {
     1226                                float: right;
     1227                        }
     1228
     1229                        p {
     1230                                margin-bottom: 0;
     1231                        }
    12131232                }
    12141233
    … …  
    12691288                .comment-author {
    12701289                        float: left;
     1290                        line-height: 1.8;
     1291                }
     1292
     1293                #add-user-note {
     1294                        font-size: 1.6rem;
    12711295                }
    12721296        }
    … …  
    14151439
    14161440        .user-note-voting {
    1417                 font-size: 1.5em;
     1441                font-size: 1.2em;
    14181442                clear: left;
    14191443                float: left;
    1420                 margin-top: -5px;
    14211444                margin-right: 10px;
    14221445        }
    … …  
    14301453                margin-left: -9px;
    14311454        }
     1455
     1456        span.user-note-voting-up,
     1457        span.user-note-voting-down {
     1458                cursor: default;
     1459        }
     1460
    14321461        .user-note-voting-count {
    14331462                margin-right: -2px;

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css

    r3316 r3379  
    13171317}
    13181318.devhub-wrap .source-code-container {
    1319   border-right: 1px solid #dfdfdf;
    13201319  overflow-x: auto;
    13211320  overflow-y: hidden;
    … …  
    13311330.devhub-wrap .comment-content a {
    13321331  word-wrap: break-word;
     1332}
     1333.devhub-wrap.single-wp-parser-function .bad-note .comment-content, .devhub-wrap.single-wp-parser-method .bad-note .comment-content, .devhub-wrap.single-wp-parser-hook .bad-note .comment-content {
     1334  opacity: .6;
     1335}
     1336.devhub-wrap.single-wp-parser-function .bad-note .comment-content:hover, .devhub-wrap.single-wp-parser-method .bad-note .comment-content:hover, .devhub-wrap.single-wp-parser-hook .bad-note .comment-content:hover {
     1337  opacity: 1;
    13331338}
    13341339.devhub-wrap.single-wp-parser-function .comment-list,
    … …  
    13411346}
    13421347.devhub-wrap.single-wp-parser-function .comment-list li, .devhub-wrap.single-wp-parser-method .comment-list li, .devhub-wrap.single-wp-parser-hook .comment-list li {
    1343   padding: 2rem 1.5rem 1rem;
     1348  margin-top: 2.5rem;
    13441349  background: #fff;
    13451350  overflow: auto;
    1346 }
    1347 .devhub-wrap.single-wp-parser-function .comment-list li:first-child, .devhub-wrap.single-wp-parser-method .comment-list li:first-child, .devhub-wrap.single-wp-parser-hook .comment-list li:first-child {
    1348   padding-top: 1rem;
     1351  border: 1px solid #dfdfdf;
     1352  border-radius: 2px;
    13491353}
    13501354.devhub-wrap.single-wp-parser-function .comment-list li article, .devhub-wrap.single-wp-parser-method .comment-list li article, .devhub-wrap.single-wp-parser-hook .comment-list li article {
    1351   border-bottom: 1px solid #dfdfdf;
    1352   padding-bottom: 1em;
    13531355  overflow: auto;
    13541356}
    13551357.devhub-wrap.single-wp-parser-function .comment-list .avatar, .devhub-wrap.single-wp-parser-method .comment-list .avatar, .devhub-wrap.single-wp-parser-hook .comment-list .avatar {
    13561358  float: left;
    1357   width: 2.5em;
    1358   height: 2.5em;
    1359   margin: -0.5em 1em 0.5em 0;
     1359  margin: -2px 1em 0 0;
    13601360  padding: 0.125em;
    13611361  border: 1px solid #eee;
    13621362}
    1363 .devhub-wrap.single-wp-parser-function .comment-author-attribution, .devhub-wrap.single-wp-parser-method .comment-author-attribution, .devhub-wrap.single-wp-parser-hook .comment-author-attribution {
    1364   font-weight: bold;
    1365 }
    13661363.devhub-wrap.single-wp-parser-function .comment-meta, .devhub-wrap.single-wp-parser-method .comment-meta, .devhub-wrap.single-wp-parser-hook .comment-meta {
    1367   margin: 0 0 1.5em 0;
    1368   font-size: 0.75em;
     1364  padding: .5em 1em;
     1365  background-color: #f7f7f7;
     1366  overflow: auto;
    13691367}
    13701368.devhub-wrap.single-wp-parser-function .comment-content, .devhub-wrap.single-wp-parser-method .comment-content, .devhub-wrap.single-wp-parser-hook .comment-content {
    … …  
    13731371  margin-left: 0;
    13741372  clear: both;
     1373  padding: 2rem 1.5rem .5rem;
     1374}
     1375.devhub-wrap.single-wp-parser-function .comment-footer, .devhub-wrap.single-wp-parser-method .comment-footer, .devhub-wrap.single-wp-parser-hook .comment-footer {
     1376  margin: 0 1em;
     1377  padding: 0 0 1em 0;
     1378  position: relative;
     1379  overflow: auto;
     1380}
     1381.devhub-wrap.single-wp-parser-function .comment-footer a, .devhub-wrap.single-wp-parser-method .comment-footer a, .devhub-wrap.single-wp-parser-hook .comment-footer a {
     1382  float: right;
     1383}
     1384.devhub-wrap.single-wp-parser-function .comment-footer p, .devhub-wrap.single-wp-parser-method .comment-footer p, .devhub-wrap.single-wp-parser-hook .comment-footer p {
     1385  margin-bottom: 0;
    13751386}
    13761387.devhub-wrap.single-wp-parser-function .comment-content ol, .devhub-wrap.single-wp-parser-method .comment-content ol, .devhub-wrap.single-wp-parser-hook .comment-content ol {
    … …  
    14071418.devhub-wrap.single-wp-parser-function .comment-author, .devhub-wrap.single-wp-parser-method .comment-author, .devhub-wrap.single-wp-parser-hook .comment-author {
    14081419  float: left;
     1420  line-height: 1.8;
     1421}
     1422.devhub-wrap.single-wp-parser-function #add-user-note, .devhub-wrap.single-wp-parser-method #add-user-note, .devhub-wrap.single-wp-parser-hook #add-user-note {
     1423  font-size: 1.6rem;
    14091424}
    14101425.devhub-wrap.single-post .comment-list,
    … …  
    15181533}
    15191534.devhub-wrap .user-note-voting {
    1520   font-size: 1.5em;
     1535  font-size: 1.2em;
    15211536  clear: left;
    15221537  float: left;
    1523   margin-top: -5px;
    15241538  margin-right: 10px;
    15251539}
    … …  
    15321546.devhub-wrap .user-note-voting-up {
    15331547  margin-left: -9px;
     1548}
     1549.devhub-wrap span.user-note-voting-up,
     1550.devhub-wrap span.user-note-voting-down {
     1551  cursor: default;
    15341552}
    15351553.devhub-wrap .user-note-voting-count {
Note: See TracChangeset for help on using the changeset viewer.