From 9faebfcfe06dc9c5a39e34b4150509d3b5664b06 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 4 Apr 2019 16:20:25 -0400
Subject: [PATCH] UX: Adjust layout, allow additional responsiveness

---
 .../reviewable-history-description.js.es6     |  3 +-
 .../templates/components/reviewable-item.hbs  | 18 ++++----
 .../stylesheets/common/base/reviewables.scss  | 41 +++++++++++++------
 3 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/app/assets/javascripts/discourse/helpers/reviewable-history-description.js.es6 b/app/assets/javascripts/discourse/helpers/reviewable-history-description.js.es6
index 08f0e6d3938..61b8897f84c 100644
--- a/app/assets/javascripts/discourse/helpers/reviewable-history-description.js.es6
+++ b/app/assets/javascripts/discourse/helpers/reviewable-history-description.js.es6
@@ -1,11 +1,12 @@
 import { htmlHelper } from "discourse-common/lib/helpers";
 import { htmlStatus } from "discourse/helpers/reviewable-status";
 import { EDITED } from "discourse/models/reviewable-history";
+import { iconHTML } from "discourse-common/lib/icon-library";
 
 export default htmlHelper(function(rh) {
   switch (rh.reviewable_history_type) {
     case EDITED:
-      return I18n.t("review.history.edited");
+      return iconHTML("pencil-alt") + " " + I18n.t("review.history.edited");
     default:
       return htmlStatus(rh.status);
   }
diff --git a/app/assets/javascripts/discourse/templates/components/reviewable-item.hbs b/app/assets/javascripts/discourse/templates/components/reviewable-item.hbs
index f24eee47ada..34c1c66b5d0 100644
--- a/app/assets/javascripts/discourse/templates/components/reviewable-item.hbs
+++ b/app/assets/javascripts/discourse/templates/components/reviewable-item.hbs
@@ -5,18 +5,18 @@
     {{#if reviewable.reply_count}}
       <span class='reply-count'>{{i18n "review.replies" count=reviewable.reply_count}}</span>
     {{/if}}
-    <span class='status'>
-      {{#if reviewable.approved}}
-        {{d-icon "check"}} {{i18n "review.statuses.approved.title"}}
-      {{else if reviewable.rejected}}
-        {{d-icon "times"}} {{i18n "review.statuses.rejected.title"}}
-      {{else if reviewable.ignored}}
-        {{d-icon "external-link-alt"}} {{i18n "review.statuses.ignored.title"}}
-      {{/if}}
-    </span>
     <span class='created-at'>
       {{#link-to 'review.show' reviewable.id}}{{age-with-tooltip reviewable.created_at}}{{/link-to}}
     </span>
+    <span class='status'>
+      {{#if reviewable.approved}}
+      <span class="approved">  {{d-icon "check"}} {{i18n "review.statuses.approved.title"}} </span>
+      {{else if reviewable.rejected}}
+      <span class="rejected">   {{d-icon "times"}} {{i18n "review.statuses.rejected.title"}} </span>
+      {{else if reviewable.ignored}}
+      <span class="ignored">   {{d-icon "external-link-alt"}} {{i18n "review.statuses.ignored.title"}} </span>
+      {{/if}}
+    </span>
   </div>
 
   <div class='reviewable-contents'>
diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss
index 47b9fb79576..6be826421a7 100644
--- a/app/assets/stylesheets/common/base/reviewables.scss
+++ b/app/assets/stylesheets/common/base/reviewables.scss
@@ -12,6 +12,7 @@
       flex: 1;
       box-sizing: border-box;
       max-width: 760px; // Match topic post width
+      min-width: 320px;
       margin-right: auto;
     }
 
@@ -70,7 +71,7 @@
 
 .reviewable-filters {
   background-color: $primary-very-low;
-  padding: 0.5em 1em 1em 1em;
+  padding: 1em;
   margin-bottom: 1em;
 
   .reviewable-filter {
@@ -131,7 +132,6 @@
 .user-flag-percentage {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
   margin-left: 0.5em;
 
   .percentage-label {
@@ -152,7 +152,6 @@
 }
 
 .reviewable-item {
-  margin-bottom: 1em;
   padding-top: 2em;
   border-top: 1px solid dark-light-choose($primary-low, $secondary-low);
 
@@ -170,31 +169,37 @@
     .reviewable-type {
       margin-right: 0.25em;
     }
+    .reply-count {
+      margin-left: 1em;
+    }
     .created-at {
-      margin-left: auto;
+      margin-left: 1em;
+      margin-right: auto;
       a {
         color: dark-light-choose($primary-medium, $secondary-medium);
       }
     }
     .score {
-      margin-right: 1em;
       font-size: $font-down-1;
     }
     .status {
-      color: dark-light-choose($primary-high, $secondary-high);
-    }
-    .reply-count {
-      margin-right: 1em;
+      color: $primary-medium;
+      span.approved {
+        color: $success;
+      }
+      span.rejected {
+        color: $danger;
+      }
     }
   }
 
   .reviewable-contents {
     display: flex;
     flex-wrap: wrap;
+    margin-bottom: 2em;
   }
 
   .reviewable-actions {
-    margin-top: 1.5em;
     display: flex;
     flex-wrap: wrap;
 
@@ -220,6 +225,7 @@
 
 .reviewable-scores-and-history {
   display: inline-block;
+  margin-top: 1em;
 }
 
 .reviewable-scores,
@@ -247,9 +253,16 @@
 
   tbody {
     border-width: 1px;
+    td {
+      white-space: nowrap;
+    }
     td:first-of-type {
       padding-right: 1em;
     }
+    td:last-of-type {
+      width: 100%;
+      white-space: normal;
+    }
     > tr > th {
       text-align: left;
     }
@@ -293,6 +306,9 @@
 
   .post-contents-wrapper {
     display: flex;
+    width: 100%;
+    margin-top: 1em;
+    min-width: 275px;
   }
 
   .post-contents {
@@ -310,7 +326,8 @@
       margin: 0 0 1em 0;
     }
 
-    p {
+    pre,
+    code {
       word-break: break-all;
     }
   }
@@ -321,7 +338,7 @@
     margin-bottom: 0.75em;
     .title-text {
       font-weight: bold;
-      color: $primary-high;
+      color: $primary;
       display: block;
       font-size: $font-up-2;
       margin-right: 0.75em;