UX: Reviewable layout improvements

app/assets/javascripts/discourse/templates/components/reviewable-flagged-post.hbs

@@ -1,12 +1,11 @@
+{{reviewable-topic-link reviewable=reviewable tagName=''}}
+<div class='post-contents-wrapper'>
 {{reviewable-created-by user=reviewable.target_created_by tagName=''}}
-
 <div class='post-contents'>
   {{reviewable-created-by-name user=reviewable.target_created_by tagName=''}}
-  {{reviewable-topic-link reviewable=reviewable}}
-
   <div class='post-body'>
     {{{reviewable.cooked}}}
   </div>
-
   {{yield}}
 </div>
+</div>

app/assets/javascripts/discourse/templates/components/reviewable-histories.hbs

@@ -1,23 +1,29 @@
 {{#if filteredHistories}}
   <table class='reviewable-histories'>
-    <tr>
+    <thead>
+      <tr>
       <th colspan="3">{{i18n "review.history.title"}}</th>
     </tr>
+    </thead>
+    <tbody>
     {{#each filteredHistories as |rh|}}
       {{#unless rh.created}}
         <tr>
-          <td>{{format-date rh.created_at format="medium"}}</td>
+          <td>
+            {{reviewable-history-description rh}}
+          </td>
           <td>
             {{#user-link user=rs.user}}
               {{avatar rh.created_by imageSize="tiny"}}
               {{rh.created_by.username}}
             {{/user-link}}
           </td>
-          <td>
+          <td>{{format-date rh.created_at format="medium"}}</td>
-            {{reviewable-history-description rh}}
+
-          </td>
         </tr>
       {{/unless}}
     {{/each}}
+  </tbody>
+
   </table>
 {{/if}}

app/assets/javascripts/discourse/templates/components/reviewable-item.hbs

@@ -1,16 +1,12 @@
 <div class='reviewable-item {{customClass}}' data-reviewable-id={{reviewable.id}}>
   <div class='reviewable-meta-data'>
-    <div class='reviewable-type'>{{reviewable.humanType}}</div>
+    <span class='reviewable-type'>{{reviewable.humanType}}</span>
-    <div class='reviewable-category'>
+    <span class='badge-notification new-posts score' title={{i18n "review.scores.score"}}>{{format-score reviewable.score}}</span>
-      {{category-badge reviewable.category}}
+    <span class='created-at'>
-    </div>
-
-    <div class='created-at'>
       {{#link-to 'review.show' reviewable.id}}{{age-with-tooltip reviewable.created_at}}{{/link-to}}
-    </div>
+    </span>
-    <div class='score' title={{i18n "review.scores.score"}}>{{format-score reviewable.score}}</div>
+    <span class='reply-count'>{{i18n "review.topic_replies" count=reviewable.topic.reply_count}}</span>
-
+    <span class='status'>
-    <div class='status'>
       {{#if reviewable.approved}}
         {{d-icon "check"}} {{i18n "review.statuses.approved.title"}}
       {{else if reviewable.rejected}}
@@ -18,7 +14,7 @@
       {{else if reviewable.ignored}}
         {{d-icon "external-link-alt"}} {{i18n "review.statuses.ignored.title"}}
       {{/if}}
-    </div>
+    </span>
   </div>
 
   <div class='reviewable-contents'>
@@ -38,8 +34,10 @@
       </div>
     {{else}}
       {{#component reviewableComponent reviewable=reviewable tagName=''}}
-        {{reviewable-scores scores=reviewable.reviewable_scores}}
+      <div class='reviewable-scores-and-history'>
-        {{reviewable-histories histories=reviewable.reviewable_histories}}
+        {{reviewable-scores scores=reviewable.reviewable_scores tagName=''}}
+        {{reviewable-histories histories=reviewable.reviewable_histories tagName=''}}
+      </div>
       {{/component}}
     {{/if}}
   </div>

app/assets/javascripts/discourse/templates/components/reviewable-scores.hbs

@@ -1,24 +1,23 @@
 {{#if scores}}
   <table class='reviewable-scores'>
-    <tr>
+    <tbody>
-      <th class='user'>{{i18n "review.scores.submitted_by"}}</th>
-      <th>{{i18n "review.scores.description"}}</th>
-      <th>{{i18n "review.scores.score"}}</th>
-    </tr>
     {{#each scores as |rs|}}
       <tr class='reviewable-score'>
+
+        <td>{{d-icon "flag"}} {{rs.score_type.title}} <span class="badge-notification new-posts score">{{format-score rs.score}}</span></td>
         <td class='user'>
           {{#user-link user=rs.user}}
             {{avatar rs.user imageSize="tiny"}}
             {{rs.user.username}}
           {{/user-link}}
+
+        </td>
+        <td>
           {{user-flag-percentage
             agreed=rs.agree_stats.agreed
             disagreed=rs.agree_stats.disagreed
             ignored=rs.agree_stats.ignored}}
         </td>
-        <td>{{rs.score_type.title}}</td>
-        <td>{{format-score rs.score}}</td>
       </tr>
       {{#if rs.reviewable_conversation}}
         <tr>
@@ -37,5 +36,6 @@
         </tr>
       {{/if}}
     {{/each}}
+  </tbody>
   </table>
 {{/if}}

app/assets/javascripts/discourse/templates/components/reviewable-topic-link.hbs

@@ -1,9 +1,8 @@
 <div class='post-topic'>
   {{#if reviewable.topic}}
-    {{i18n "review.topic"}}
     {{topic-status topic=reviewable.topic}}
     <a href={{reviewable.topic_url}} class='title'>{{reviewable.topic.title}}</a>
-    {{i18n "review.topic_replies" count=reviewable.topic.reply_count}}
+    {{category-badge reviewable.category}}
   {{else if (has-block)}}
     {{yield}}
   {{else}}

app/assets/stylesheets/common/base/reviewables.scss

@@ -2,6 +2,7 @@
   .reviewable-container {
     display: flex;
     flex-direction: row;
+    margin-top: 1em;
 
     .reviewable-list {
       flex: 1;
@@ -91,6 +92,7 @@
 .user-flag-percentage {
   display: flex;
   align-items: center;
+  justify-content: flex-end;
   margin-left: 0.5em;
 
   .percentage-label {
@@ -122,11 +124,11 @@
     color: dark-light-choose($primary-medium, $secondary-medium);
     display: flex;
     width: 100%;
-    margin-bottom: 0.5em;
+    margin-bottom: 0.15em;
     font-size: $font-down-1;
-    align-items: center;
+    align-items: baseline;
     .reviewable-type {
-      margin-right: 1em;
+      margin-right: 0.25em;
     }
     .created-at {
       a {
@@ -136,6 +138,7 @@
     }
     .score {
       margin-right: 1em;
+      font-size: $font-down-1;
     }
     .status {
       color: dark-light-choose($primary-high, $secondary-high);
@@ -144,11 +147,17 @@
 
   .reviewable-contents {
     display: flex;
+    flex-wrap: wrap;
   }
 
   .reviewable-actions {
-    margin-top: 0.5em;
+    margin-top: 1.5em;
     display: flex;
+    flex-wrap: wrap;
+
+    button {
+      white-space: nowrap;
+    }
 
     .reviewable-action,
     .reviewable-action-dropdown {
@@ -166,24 +175,48 @@
   margin-top: 1em;
 }
 
+.reviewable-scores-and-history {
+  display: inline-block;
+}
+
 .reviewable-scores,
 .reviewable-histories {
   min-width: 50%;
+  width: 100%;
 
   .user {
     display: flex;
     align-items: center;
+    white-space: nowrap;
 
     .user-flag-percentage {
       margin-left: 0.5em;
     }
   }
-  > tr > th {
+
-    text-align: left;
+  .d-icon {
+    font-size: $font-down-1;
+    color: $primary-high;
   }
-  > tr > th,
+
-  > tr > td {
+  .badge-notification {
-    padding: 0.25em;
+    line-height: $line-height-medium;
+  }
+
+  tbody {
+    border-width: 1px;
+    td:first-of-type {
+      padding-right: 1em;
+      min-width: 150px;
+      width: 25%;
+    }
+    > tr > th {
+      text-align: left;
+    }
+    > tr > th,
+    > tr > td {
+      padding: 0.25em;
+    }
   }
 }
 
@@ -207,24 +240,44 @@
 
 .reviewable-queued-post,
 .reviewable-flagged-post {
-  .reviewable-contents {
-    margin-top: 1em;
-  }
-
   .post-title {
     background-color: yellow;
   }
   .created-by {
     margin-right: 1em;
+    padding-top: 0.35em;
+  }
+
+  .names {
+    font-weight: bold;
+  }
+
+  .post-contents-wrapper {
+    display: flex;
   }
 
   .post-contents {
     width: 100%;
   }
   .post-topic {
+    width: 100%;
     font-weight: bold;
     color: $primary-medium;
-    margin-bottom: 1em;
+    margin-bottom: 0.75em;
+    a {
+      display: block;
+      font-size: $font-up-2;
+      margin-right: 0.75em;
+    }
+    .topic-statuses {
+      &:empty {
+        display: none;
+      }
+    }
+    .reply-count {
+      font-size: $font-down-1;
+      font-weight: normal;
+    }
   }
 }
 
@@ -232,6 +285,7 @@
   .post-body {
     max-width: $topic-body-width;
     max-height: 300px;
+    margin-top: 0.5em;
     overflow-y: auto;
 
     p,

app/assets/stylesheets/mobile/reviewables.scss

@@ -54,23 +54,32 @@
 }
 
 .reviewable-actions {
+  margin-right: -0.5em;
+
+  > div,
+  > button {
+    flex: 0 1 47%;
+    margin-right: 0.25em;
+    margin-bottom: 0.5em;
+  }
+
   .reviewable-action,
   .reviewable-action-dropdown .dropdown-select-box-header {
     display: flex;
-    flex-direction: column;
     align-items: center;
+    justify-content: center;
 
     .d-icon {
-      margin: 0;
+      margin: 0 0.15 0 0;
     }
   }
+}
 
-  .reviewable-action,
+.reviewable-scores-and-history table {
-  .reviewable-action-dropdown {
+  width: 100%;
-    flex: 1;
+  table-layout: fixed;
-  }
+  td {
-
+    display: block;
-  .reviewable-action-dropdown:last-of-type {
+    white-space: nowrap;
-    margin-right: 0;
   }
 }

config/locales/client.en.yml

@@ -395,8 +395,8 @@ en:
           one: "1 user"
           other: "{{count}} users"
       topic_replies:
-        one: "(1 reply)"
+        one: "1 reply"
-        other: "({{count}} replies)"
+        other: "{{count}} replies"
       edit: "Edit"
       save: "Save"
       cancel: "Cancel"
@@ -437,12 +437,12 @@ en:
 
       types:
         reviewable_flagged_post:
-          title: 'Flagged Post'
+          title: "Flagged Post"
           flagged_by: "Flagged By"
         reviewable_queued_post:
-          title: 'Queued Post'
+          title: "Queued Post"
         reviewable_user:
-          title: 'User'
+          title: "User"
       approval:
         title: "Post Needs Approval"
         description: "We've received your new post but it needs to be approved by a moderator before it will appear. Please be patient."