UX: Reviewable layout improvements

UX: Reviewable layout improvements

diff --git a/app/assets/javascripts/discourse/templates/components/reviewable-flagged-post.hbs b/app/assets/javascripts/discourse/templates/components/reviewable-flagged-post.hbs
index 047da85..9f6fd37 100644
--- a/app/assets/javascripts/discourse/templates/components/reviewable-flagged-post.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/templates/components/reviewable-histories.hbs b/app/assets/javascripts/discourse/templates/components/reviewable-histories.hbs
index 318ce23..33c3e01 100644
--- a/app/assets/javascripts/discourse/templates/components/reviewable-histories.hbs
+++ b/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>
-            {{reviewable-history-description rh}}
-          </td>
+          <td>{{format-date rh.created_at format="medium"}}</td>
+
         </tr>
       {{/unless}}
     {{/each}}
+  </tbody>
+
   </table>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/templates/components/reviewable-item.hbs b/app/assets/javascripts/discourse/templates/components/reviewable-item.hbs
index 9c2c8d9..37737ca 100644
--- a/app/assets/javascripts/discourse/templates/components/reviewable-item.hbs
+++ b/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>
-    <div class='reviewable-category'>
-      {{category-badge reviewable.category}}
-    </div>
-
-    <div class='created-at'>
+    <span class='reviewable-type'>{{reviewable.humanType}}</span>
+    <span class='badge-notification new-posts score' title={{i18n "review.scores.score"}}>{{format-score reviewable.score}}</span>
+    <span class='created-at'>
       {{#link-to 'review.show' reviewable.id}}{{age-with-tooltip reviewable.created_at}}{{/link-to}}
-    </div>
-    <div class='score' title={{i18n "review.scores.score"}}>{{format-score reviewable.score}}</div>
-
-    <div class='status'>
+    </span>
+    <span class='reply-count'>{{i18n "review.topic_replies" count=reviewable.topic.reply_count}}</span>
+    <span 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}}
-        {{reviewable-histories histories=reviewable.reviewable_histories}}
+      <div class='reviewable-scores-and-history'>
+        {{reviewable-scores scores=reviewable.reviewable_scores tagName=''}}
+        {{reviewable-histories histories=reviewable.reviewable_histories tagName=''}}
+      </div>
       {{/component}}
     {{/if}}
   </div>
diff --git a/app/assets/javascripts/discourse/templates/components/reviewable-scores.hbs b/app/assets/javascripts/discourse/templates/components/reviewable-scores.hbs
index b9a6bf0..1d04916 100644
--- a/app/assets/javascripts/discourse/templates/components/reviewable-scores.hbs
+++ b/app/assets/javascripts/discourse/templates/components/reviewable-scores.hbs
@@ -1,24 +1,23 @@
 {{#if scores}}
   <table class='reviewable-scores'>
-    <tr>
-      <th class='user'>{{i18n "review.scores.submitted_by"}}</th>
-      <th>{{i18n "review.scores.description"}}</th>
-      <th>{{i18n "review.scores.score"}}</th>
-    </tr>
+    <tbody>
     {{#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}}
diff --git a/app/assets/javascripts/discourse/templates/components/reviewable-topic-link.hbs b/app/assets/javascripts/discourse/templates/components/reviewable-topic-link.hbs
index f19fc01..12b2aa3 100644
--- a/app/assets/javascripts/discourse/templates/components/reviewable-topic-link.hbs
+++ b/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}}
diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss
index 0656f12..34f438a 100644
--- a/app/assets/stylesheets/common/base/reviewables.scss
+++ b/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,

[... diff too long, it was truncated ...]

GitHub sha: 2ab6eb58