From 69bccb9e32871c40bfd9d17e3fbf1a00692bbe0b Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 8 Feb 2018 17:04:29 -0500
Subject: [PATCH] UX: Better alignment of small topic statuses

---
 .../stylesheets/common/base/topic-post.scss   | 44 ++++++++++++-------
 app/assets/stylesheets/mobile/topic-post.scss | 10 +++++
 2 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index b10b4d18331..b2c9f640a6d 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -385,7 +385,7 @@ blockquote > *:last-child {
 }
 
 .gap {
-  padding: 0.25em 0 0.5em 4.3em;
+  padding: 0.25em 0 0.5em 4.6em;
   color: dark-light-choose($primary-medium, $secondary-high);
   cursor: pointer;
   text-transform: uppercase;
@@ -420,17 +420,20 @@ blockquote > *:last-child {
 }
 
 .small-action {
+  display: flex;
+  align-items: center;
   max-width: 755px;
   border-top: 1px solid $primary-low;
   .topic-avatar {
-    padding: .67em 0;
+    align-self: flex-start;    
+    padding: .7em 0;
     border-top: none;
-    float: left;
+    margin-right: 11px;
     i {
       font-size: 2em;
       width: 45px;
       text-align: center;
-      color: dark-light-choose($primary-low-mid, $secondary-high);
+      color: $primary-low-mid;
     }
   }
 
@@ -439,27 +442,33 @@ blockquote > *:last-child {
   }
 
   .small-action-desc.timegap {
-      color: dark-light-choose($primary-medium, $secondary-high);
+      color: $primary-medium;
   }
 
   .small-action-desc {
-    padding: 1em;
+    display: flex; 
+    flex-wrap: wrap;
+    flex: 1 1 100%;
+    align-items: center;
+    padding: 1em 0;
     text-transform: uppercase;
     font-weight: bold;
     font-size: $font-down-1;
-    color: dark-light-choose($primary-low-mid, $secondary-high);
+    color: $primary-medium;
 
     .custom-message {
+      flex: 1 1 100%;      
       text-transform: none;
-      margin: 15px 0 5px;
       font-weight: normal;
       font-size: $font-up-1;
+      order: 12;
       p {
-        margin: 5px 0;
-        line-height: $line-height-large;
+        margin-bottom: 0;
       }
     }
-
+    a.trigger-user-card {
+      align-self: stretch;
+    }
     .avatar {
       margin-right: 0.8em;
       float: left;
@@ -467,18 +476,21 @@ blockquote > *:last-child {
 
     > p {
       margin: 0;
-      padding-top: 4px;
+      line-height: $line-height-medium;
+      flex: 1 1;
+
     }
   }
 
   button {
     background: transparent;
     border: 0;
-    float: right;
-    margin-top: -2px;
+    order: 9;
+    &:last-of-type {
+       margin-left: auto;
+       order: 8;
+    }
   }
-
-  clear: both;
 }
 
 .whisper {
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index e507b59fcdb..768a59bf810 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -3,6 +3,12 @@
   border-top: none;
 }
 
+.time-gap {
+  .topic-avatar {
+    display: none;
+  }
+}
+
 .topic-post article {
   border-top: 1px solid $primary-low;
   padding: 15px 0 8px 0;
@@ -431,6 +437,10 @@ blockquote {
   margin-right: 0;
 }
 
+.gap {
+  padding: 0.25em 0;  
+}
+
 .gutter { display: none; }
 
 .posts-wrapper {  position: relative; }