From e700068b17ce7e15e14cff88fc3ba04f2b76be8e Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Thu, 2 Nov 2017 14:21:34 -0400
Subject: [PATCH] UX: Convert Group Posts to Flexbox

---
 .../templates/components/group-post.hbs       | 37 ++++++++++++-------
 .../templates/group-activity-posts.hbs        |  6 +--
 app/assets/stylesheets/common/base/group.scss | 37 +++++++++++++++++++
 .../common/components/user-stream-item.scss   | 14 -------
 app/assets/stylesheets/desktop/group.scss     |  1 +
 5 files changed, 64 insertions(+), 31 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/components/group-post.hbs b/app/assets/javascripts/discourse/templates/components/group-post.hbs
index 66386d75ae9..7521788ec35 100644
--- a/app/assets/javascripts/discourse/templates/components/group-post.hbs
+++ b/app/assets/javascripts/discourse/templates/components/group-post.hbs
@@ -1,19 +1,28 @@
-<div class="user-stream-item item">{{!-- DEPRECATED: 'item' class --}}
-  <div class='clearfix info'>
-    <a href="{{unbound post.user.userUrl}}" data-user-card="{{unbound post.user.username}}" class='avatar-link'><div class='avatar-wrapper'>{{avatar post.user imageSize="large" extraClasses="actor" ignoreTitle="true"}}</div></a>
-    <span class='time'>{{format-date post.created_at leaveAgo="true"}}</span>
-    {{expand-post item=post}}
-    <span class="title">
-      <a href={{post.url}}>{{{post.topic.fancyTitle}}}</a>
-    </span>
-    <span class="category">{{category-link post.category}}</span>
-    <div class="group-member-info">
+<div class='group-post-header'>
+  <div class='group-post-avatar'>
+    <a href="{{unbound post.user.userUrl}}" data-user-card="{{unbound post.user.username}}" class='avatar-link'>
+      {{avatar post.user imageSize="large" extraClasses="actor" ignoreTitle="true"}}
+    </a>
+  </div>
+  <div class='group-post-info'>
+    <div class="group-post-topic">
+      <div class='group-post-title'>
+        <a href={{post.url}}>{{{post.topic.fancyTitle}}}</a>
+      </div>
+      <div class="group-post-category">{{category-link post.category}}</div>
       {{#if post.user.name}}
-        <span class="name">{{post.user.name}}</span>{{#if post.user.title}}<span class="title">, {{post.user.title}}</span>{{/if}}
+        <div class="group-member-info">
+          <span class="name">{{post.user.name}}</span>
+          {{#if post.user.title}}<span class="title">, {{post.user.title}}</span>{{/if}}
+        </div>
       {{/if}}
     </div>
+    <div class='group-post-controls'>
+      {{expand-post item=post}}
+      <span class='time'>{{format-date post.created_at leaveAgo="true"}}</span>
+    </div>
   </div>
-  <p class='excerpt'>
-  {{{post.excerpt}}}
-  </p>
+</div>
+<div class='group-post-excerpt'>
+  {{{post.excerpt}}}
 </div>
diff --git a/app/assets/javascripts/discourse/templates/group-activity-posts.hbs b/app/assets/javascripts/discourse/templates/group-activity-posts.hbs
index 298edaff831..061160d1ed1 100644
--- a/app/assets/javascripts/discourse/templates/group-activity-posts.hbs
+++ b/app/assets/javascripts/discourse/templates/group-activity-posts.hbs
@@ -1,7 +1,7 @@
-{{#load-more selector=".user-stream .user-stream-item" action=(action "loadMore")}}
-  <div class='user-stream'>
+{{#load-more selector=".group-post" action=(action "loadMore")}}
+  <div class='group-posts'>
     {{#each model as |post|}}
-      {{group-post post=post}}
+      {{group-post post=post class="group-post"}}
     {{else}}
       <div>{{i18n emptyText}}</div>
     {{/each}}
diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss
index c476e892da6..4b8f48d08bb 100644
--- a/app/assets/stylesheets/common/base/group.scss
+++ b/app/assets/stylesheets/common/base/group.scss
@@ -4,6 +4,43 @@
   margin-bottom: 15px;
 }
 
+.group-post {
+  .group-post-header {
+    display: flex;
+
+    .group-post-avatar {
+      margin-right: 0.5em;
+    }
+
+    .time,
+    .delete-info {
+      color: lighten($primary, 40%);
+      font-size: 0.8em;
+    }
+
+    .group-member-info {
+      display: flex;
+      color: lighten($primary, 40%);
+    }
+  }
+
+  .group-post-info {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .group-post-excerpt {
+    margin: 1em 0;
+    font-size: 0.929em;
+    word-wrap: break-word;
+    color: $primary;
+  }
+
+  padding: 1em 0;
+  border-bottom: 1px solid $primary-low;
+}
+
 .group-info {
   width: 100%;
 
diff --git a/app/assets/stylesheets/common/components/user-stream-item.scss b/app/assets/stylesheets/common/components/user-stream-item.scss
index fbdcc97e668..078d5fd2e4f 100644
--- a/app/assets/stylesheets/common/components/user-stream-item.scss
+++ b/app/assets/stylesheets/common/components/user-stream-item.scss
@@ -111,20 +111,6 @@
     word-wrap: break-word;
     color: $primary;
   }
-
-  .group-member-info {
-    .name {
-      display: inline-block;
-      margin-top: 5px;
-      color: dark-light-choose($primary-medium,$secondary-medium);
-    }
-
-    .title {
-      display: inline-block;
-      margin-top: 5px;
-      color: dark-light-choose($primary-medium, $secondary-medium);
-    }
-  }
 }
 
 .user-stream .child-actions, // DEPRECATED: '.user-stream .child-actions' selector
diff --git a/app/assets/stylesheets/desktop/group.scss b/app/assets/stylesheets/desktop/group.scss
index e287be2cb0e..ea1378fd1e2 100644
--- a/app/assets/stylesheets/desktop/group.scss
+++ b/app/assets/stylesheets/desktop/group.scss
@@ -1,3 +1,4 @@
+
 .group-nav {
   li {
     float: left;