UX: Convert Group Posts to Flexbox

app/assets/javascripts/discourse/templates/components/group-post.hbs

@@ -1,19 +1,28 @@
-<div class="user-stream-item item">{{!-- DEPRECATED: 'item' class --}}
+<div class='group-post-header'>
-  <div class='clearfix info'>
+  <div class='group-post-avatar'>
-    <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>
+    <a href="{{unbound post.user.userUrl}}" data-user-card="{{unbound post.user.username}}" class='avatar-link'>
-    <span class='time'>{{format-date post.created_at leaveAgo="true"}}</span>
+      {{avatar post.user imageSize="large" extraClasses="actor" ignoreTitle="true"}}
-    {{expand-post item=post}}
+    </a>
-    <span class="title">
+  </div>
+  <div class='group-post-info'>
+    <div class="group-post-topic">
+      <div class='group-post-title'>
         <a href={{post.url}}>{{{post.topic.fancyTitle}}}</a>
-    </span>
+      </div>
-    <span class="category">{{category-link post.category}}</span>
+      <div class="group-post-category">{{category-link post.category}}</div>
-    <div class="group-member-info">
       {{#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'>
+</div>
-  {{{post.excerpt}}}
+<div class='group-post-excerpt'>
-  </p>
+  {{{post.excerpt}}}
 </div>

app/assets/javascripts/discourse/templates/group-activity-posts.hbs

@@ -1,7 +1,7 @@
-{{#load-more selector=".user-stream .user-stream-item" action=(action "loadMore")}}
+{{#load-more selector=".group-post" action=(action "loadMore")}}
-  <div class='user-stream'>
+  <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}}

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%;
 

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

app/assets/stylesheets/desktop/group.scss

@@ -1,3 +1,4 @@
+
 .group-nav {
   li {
     float: left;