From dc5b0e05e295c446c1c370955f7429316b8c9c16 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 16 Jan 2018 15:48:47 -0500
Subject: [PATCH] UX: Styling embedded post collapse button

---
 .../javascripts/discourse/widgets/post.js.es6 |  7 +--
 .../stylesheets/common/base/topic-post.scss   |  2 +-
 .../stylesheets/desktop/topic-post.scss       | 44 +++++++++++++++++--
 app/assets/stylesheets/desktop/topic.scss     |  3 +-
 4 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/discourse/widgets/post.js.es6 b/app/assets/javascripts/discourse/widgets/post.js.es6
index 5e671ec56d4..470a4c5dca5 100644
--- a/app/assets/javascripts/discourse/widgets/post.js.es6
+++ b/app/assets/javascripts/discourse/widgets/post.js.es6
@@ -300,14 +300,15 @@ createWidget('post-contents', {
     const repliesBelow = state.repliesBelow;
     if (repliesBelow.length) {
       result.push(h('section.embedded-posts.bottom', [
+       
+        repliesBelow.map(p => {
+          return this.attach('embedded-post', p, { model: this.store.createRecord('post', p) });
+        }),
         this.attach('button', {
           title: 'post.collapse',
           icon: 'chevron-up',
           action: 'toggleRepliesBelow',
           className: 'btn collapse-up'
-        }),
-        repliesBelow.map(p => {
-          return this.attach('embedded-post', p, { model: this.store.createRecord('post', p) });
         })
       ]));
     }
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index db64550c3f9..8be13e9f6b8 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -433,7 +433,7 @@ blockquote > *:last-child {
   }
 
   .small-action-desc {
-    padding: 1em 1em 1.25em 1em;
+    padding: 1em;
     text-transform: uppercase;
     font-weight: bold;
     font-size: $font-down-1;
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index ef82dfce383..d1ac42b643e 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -207,7 +207,7 @@ nav.post-controls {
 
   .topic-body {
     box-sizing: border-box;
-    width: calc(100% - 60px); // [100% - .topic-avatar width]
+    width: calc(100% - 70px); // [100% - .topic-avatar width]
     // WARNING: overflow hide is required for quoted / embedded images
     // which expect "normal" post width, but expansions are narrower
     overflow: hidden;
@@ -221,10 +221,14 @@ nav.post-controls {
   }
 
   .topic-avatar {
-    padding-left: 15px;
+    padding-left: 25px;
     padding-top: 15px;
   }
 
+  .row {
+    border:  1px solid $primary-low;
+  }
+
   // bottom means "reply expansion" below a post
   &.bottom {
     &.hidden {
@@ -233,15 +237,42 @@ nav.post-controls {
     }
   }
   &.bottom {
+    .collapse-up {
+      position: absolute;
+      transform: translate(-50%, -170%);
+      background: $secondary;
+      border:  1px solid $primary-low;
+      padding: 6px 9px 8px;
+      z-index: 99; // Needs to be higher than topic-avatar
+    }
     .row {
-      padding-top: 7px;
+      padding-bottom: .5em;
+      border-top: none;
+      border-bottom: none;
+      .topic-avatar, .topic-body {
+        border-top: 1px solid $primary-low;
+      }
     }
   }
 
   // top means "in reply to expansion" above a post
   &.top {
+    .collapse-down {
+      position: absolute;
+      transform: translate(-50%, 55%);
+      background: $secondary;
+      border:  1px solid $primary-low;
+      padding: 6px 9px 8px;
+      z-index: 99; // Needs to be higher than topic-avatar
+    }
     margin-left: 56px;
     width: 701px;
+    .row {
+      border-bottom: none;
+      .topic-avatar, .topic-body {
+        border-top: 1px solid $primary-low;
+      }
+    }
   }
   &.top.topic-body {
     padding: 0;
@@ -615,7 +646,7 @@ $topic-avatar-width: 45px;
   position: relative;
   z-index: 2;
   border-top: 1px solid $primary-low;
-  padding: 12px $topic-body-width-padding 15px $topic-body-width-padding;
+  padding: 12px $topic-body-width-padding 0 $topic-body-width-padding;
 }
 
 .topic-avatar {
@@ -636,6 +667,11 @@ $topic-avatar-width: 45px;
   border-top: none;
 }
 
+.time-gap + .topic-post .embedded-posts.top {
+  border-bottom: 1px solid $primary-low;
+} 
+
+
 .posts-wrapper {
   position: relative;
   -webkit-font-smoothing: subpixel-antialiased;
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 1d5cf118c66..1a15ef944cb 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -10,8 +10,7 @@
 }
 
 .post-menu-area {
-  margin-bottom: 10px;
-  margin-top: 20px;
+  margin: 20px 0;
 }
 
 .edits {margin-right: 5px;}