Making WordPress.org


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

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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;
Note: See TracChangeset for help on using the changeset viewer.