WordPress.org
Get WordPress

Making WordPress.org

Changeset 3379


Ignore:
Timestamp:
06/15/2016 10:09:02 PM (8 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.