From ef0d9d631c6e5a0f4159ad8833ddca9a26a498a0 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 7 Dec 2017 12:40:39 -0500
Subject: [PATCH]  UX: New style for staff highlight

Moved highlight to cooked content, also highlighting primary name (with shield) and title (if applicable).

**Before**:
![image](https://user-images.githubusercontent.com/1681963/33724323-2269e79e-db3d-11e7-8c93-75b9dc9a1ab7.png)


**After**:
<img width="809" alt="screen shot 2017-12-06 at 3 55 31 pm" src="https://user-images.githubusercontent.com/1681963/33724287-09eb66de-db3d-11e7-8e02-0062ed2b8716.png">
---
 .../stylesheets/common/base/topic-post.scss   | 42 +++++++++++++++++--
 .../stylesheets/desktop/topic-post.scss       | 21 ----------
 app/assets/stylesheets/mobile/topic-post.scss |  8 ----
 3 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index d887785750d..c739ce434f3 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -23,7 +23,7 @@
 
  span {
    font-size: 0.929em;
-   padding-right: 8px;
+   margin-right: 8px;
    display: inline-block;
    max-width: 280px;
    white-space: nowrap;
@@ -38,7 +38,7 @@
    margin-left: 3px;
    color: dark-light-choose($primary-medium, $secondary-medium);
  }
-  .new_user a, .user-title, .user-title a {
+ .new_user a, .user-title, .user-title a {
     color: dark-light-choose($primary-medium, $secondary-medium);
  }
 }
@@ -53,7 +53,6 @@
   del { background-color: dark-light-choose($danger-low, scale-color($danger, $lightness: -60%)); }
 }
 
-
 .cooked, .d-editor-preview {
   video {
     max-width: 100%;
@@ -62,6 +61,27 @@
     top: 0;
   }
 }
+
+// add staff color
+.moderator {
+  .cooked {
+    background-color: dark-light-choose($highlight-low, $highlight-medium);
+    padding: 10px;
+    img:not(.thumbnail) {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+  .names {
+    span.user-title, .first {
+      background-color: dark-light-choose($highlight-low, $highlight-medium);
+      color: dark-light-choose($primary-high, $secondary-low);      
+      padding-left: 4px;
+      padding-right: 4px;
+    }
+  }
+}
+
 // we use aside to hold expandable quotes (versus, say, static blockquotes)
 aside.quote {
   margin-top: 1em;
@@ -459,3 +479,19 @@ a.mention, a.mention-group {
   font-size: 32px;
   padding: 16px;
 }
+
+/* below standard tablet portrait ----------- */
+
+@media all
+and (max-width : 767px) {
+  .reply-to-tab {
+    span {display: none;}
+  }
+  .names {
+    span {display: block;}
+  }
+  .user-title {
+    float: left;
+    clear: left;
+  }
+}
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index f36bfcf05a2..47df657da2d 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -572,11 +572,6 @@ video {
   position: relative;
 }
 
-.moderator {
-  .topic-body {
-    background-color: dark-light-choose($highlight-low, $highlight-medium);
-  }
-}
 
 .deleted {
   .topic-body {
@@ -970,19 +965,3 @@ and (max-width : 870px) {
   }
 
 }
-
-
-
-/* below standard tablet portrait ----------- */
-
-@media all
-and (max-width : 767px) {
-
-  .reply-to-tab {
-    span {display: none;}
-  }
-  .names {
-    span {display: block;}
-  }
-
-}
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index 86bef37e25d..5e6cad2d498 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -133,7 +133,6 @@ a.reply-to-tab {
   z-index: 400;
   right: 80px;
   color: dark-light-choose($primary-medium, $secondary-medium);
-  span { display: none; }
 }
 
 a.star {
@@ -360,10 +359,6 @@ span.post-count {
   line-height: $base-line-height + 2; /* bump up line height to match increased font */
 }
 
-.moderator .topic-body {
-  background-color: dark-light-choose($highlight-low, $highlight-medium);
-}
-
 .quote-button.visible {
   display: block;
   z-index: 936;
@@ -488,9 +483,6 @@ span.highlighted {
   .names {
     margin: 5px 0 0 5px;
     line-height: 17px;
-    span.full-name, span.user-title, span.username {
-      display: block;
-    }
 
     .poster-icon {
       float: right;