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

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:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss (modified) (10 diffs)

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

@@ -1134 +1134 @@
 
     .source-code-container {
-        border-right: 1px solid #dfdfdf;
         overflow-x: auto;
         overflow-y: hidden;
@@ -1156 +1155 @@
     // User contributed notes
     &.single-wp-parser-function, &.single-wp-parser-method, &.single-wp-parser-hook {
+
+        .bad-note .comment-content {
+            opacity: .6;
+        }
+
+        .bad-note .comment-content:hover {
+            opacity: 1;
+        }
+
         .comment-list,
         .comment-list ol {
@@ -1164 +1172 @@
 
         .comment-list li {
-            padding: 2rem 1.5rem 1rem;
+            margin-top: 2.5rem;
             background: #fff;
             overflow: auto;
-
-            &:first-child {
-                padding-top: 1rem;
-            }
+            border: 1px solid #dfdfdf;
+            border-radius: 2px;
 
             article {
-                border-bottom: 1px solid #dfdfdf;
-                padding-bottom: 1em;
                 overflow: auto;
             }
@@ -1181 +1185 @@
         .comment-list .avatar {
             float: left;
-            width: 2.5em;
-            height: 2.5em;
-            margin: -0.5em 1em 0.5em 0;
+            margin: -2px 1em 0 0;
             padding: 0.125em;
             border: 1px solid #eee;
@@ -1189 +1191 @@
 
         .comment-author-attribution {
-            font-weight: bold;
         }
 
         .comment-meta {
-            margin: 0 0 1.5em 0;
-            font-size: 0.75em;
+            padding: .5em 1em;
+            background-color: #f7f7f7;
+            overflow: auto;
         }
 
@@ -1200 +1202 @@
         .comment-meta .comment-author cite a {
         }
+
         .comment-meta a {
         }
@@ -1211 +1214 @@
             margin-left: 0;
             clear: both;
+            padding: 2rem 1.5rem .5rem;
+        }
+
+        .comment-footer {
+            margin: 0 1em;
+            padding: 0 0 1em 0;
+            position: relative;
+            overflow: auto;
+
+            a {
+                float: right;
+            }
+
+            p {
+                margin-bottom: 0;
+            }
         }
 
@@ -1269 +1288 @@
         .comment-author {
             float: left;
+            line-height: 1.8;
+        }
+
+        #add-user-note {
+            font-size: 1.6rem;
         }
     }
@@ -1415 +1439 @@
 
     .user-note-voting {
-        font-size: 1.5em;
+        font-size: 1.2em;
         clear: left;
         float: left;
-        margin-top: -5px;
         margin-right: 10px;
     }
@@ -1430 +1453 @@
         margin-left: -9px;
     }
+
+    span.user-note-voting-up,
+    span.user-note-voting-down {
+        cursor: default;
+    }
+
     .user-note-voting-count {
         margin-right: -2px;