FIX: show user card on group page and fix styles

app/assets/javascripts/discourse/controllers/group.js.es6

@@ -3,6 +3,7 @@ import ObjectController from 'discourse/controllers/object';
 // The basic controller for a group
 export default ObjectController.extend({
   counts: null,
+  showing: null,
 
   // It would be nice if bootstrap marked action lists as selected when their links
   // were 'active' not the `li` tags.

app/assets/javascripts/discourse/controllers/group/post.js.es6

@@ -1,21 +0,0 @@
-export default Em.ObjectController.extend({
-
-  byName: function() {
-    var result = "",
-        longName = this.get('user_long_name'),
-        title = this.get('user_title');
-
-    if (!Em.isEmpty(longName)) {
-      result += longName;
-    }
-    if (!Em.isEmpty(title)) {
-      if (result.length > 0) {
-        result += ", ";
-      }
-      result += title;
-    }
-    return result;
-  }.property()
-
-});
-

app/assets/javascripts/discourse/templates/group.hbs

@@ -19,7 +19,7 @@
       <section class='user-right groups'>
         <section class='about group'>
           <div class='details'>
-            <h1>{{name}}</h1>
+            <h1>{{model.name}}</h1>
           </div>
         </section>
         {{outlet}}

app/assets/javascripts/discourse/templates/group/index.hbs

@@ -1,18 +1,18 @@
 <div class='user-stream'>
-  {{#each p in model itemController="group/post"}}
+  {{#each p in controller}}
     <div class='item'>
       <div class='clearfix info'>
-        {{#link-to 'user' p.user class="avatar-link"}}<div class='avatar-wrapper'>{{avatar p.user imageSize="large" extraClasses="actor" ignoreTitle="true"}}</div>{{/link-to}}
+        <a href="{{unbound p.user.userUrl}}" data-user-card="{{unbound p.user.username}}" class='avatar-link'><div class='avatar-wrapper'>{{avatar p.user imageSize="large" extraClasses="actor" ignoreTitle="true"}}</div></a>
         <span class='time'>{{format-date p.created_at leaveAgo="true"}}</span>
         <span class="title">
           <a href="{{unbound p.url}}">{{unbound p.title}}</a>
         </span>
         <span class="category">{{category-link p.category}}</span>
-        {{#if p.byName}}
-          <span class="name">
-            {{unbound p.byName}}
-          </span>
-        {{/if}}
+        <div class="user-info">
+          {{#if p.user_long_name}}
+            {{p.user_long_name}}{{#if p.user_title}}, {{p.user_title}}{{/if}}
+          {{/if}}
+        </div>
       </div>
       <p class='excerpt'>
       {{{unbound p.cooked}}}

app/assets/stylesheets/desktop/user.scss

@@ -448,21 +448,17 @@
       margin-right: 4px;
     }
     .title {
-      display: block;
       font-size: 1em;
-      max-width: 80%;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
     .name {
-      display: inline-block;
       font-size: 1em;
       max-width: 400px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      vertical-align: middle;
     }
     .edit-reason {
       background-color: scale-color($highlight, $lightness: 25%);

app/assets/stylesheets/mobile/user.scss

@@ -442,15 +442,12 @@
       margin-right: 4px;
     }
     .title {
-      display: block;
       font-size: 1em;
-      max-width: 80%;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
     .name {
-      display: inline-block;
       font-size: 1em;
       max-width: 400px;
       white-space: nowrap;