adding last post/joined to usercard

app/assets/javascripts/discourse/templates/user-card.hbs

@@ -7,7 +7,7 @@
   <div class="names">
     <span>
     <h1 {{bind-attr class="staff new_user"}}>
-      {{#link-to 'user' user}}{{username}}{{/link-to}}
+      {{#link-to 'user' user}}{{username}}{{{user.statusIcon}}}{{/link-to}}
     </h1>
 
     {{#if user.name}}
@@ -15,11 +15,7 @@
     {{/if}}
 
     {{#if user.title}}
-      {{#if user.name}}
+      <h2>{{user.title}}</h2>
-      <h2>/ {{user.title}}</h2>
-      {{else}}
-      <h2> {{user.title}}</h2>
-      {{/if}}
     {{/if}}
 
     {{#if showName}}
@@ -30,29 +26,6 @@
 
   {{#if user}}
 
-      {{#if isSuspended}}
-        <div class='suspended'>
-          {{fa-icon "ban"}}
-          <b>{{i18n user.suspended_notice date="user.suspendedTillDate"}}</b><br/>
-          <b>{{i18n user.suspended_reason}}</b> {{user.suspend_reason}}
-        </div>
-      {{else}}
-        {{#if user.bio_cooked}}<div class='bio'>{{{user.bio_cooked}}}</div>{{/if}}
-      {{/if}}
-
-{{#if showBadges}}
-  <div class="badge-section">
-    {{#each user.featured_user_badges}}
-      {{user-badge badge=badge}}
-    {{/each}}
-    {{#if showMoreBadges}}
-      {{#link-to 'user.badges' user class="btn more-user-badges"}}
-        {{i18n badges.more_badges count=moreBadgesCount}}
-      {{/link-to}}
-    {{/if}}
-  </div>
-{{/if}}
-
       <ul class="usercard-controls">
         {{#if user.can_send_private_message_to_user}}
           <li><a class='btn btn-primary' {{action "composePrivateMessage" user}}>{{fa-icon "envelope"}}{{i18n user.private_message}}</a></li>
@@ -69,13 +42,47 @@
         {{/if}}
       </ul>
 
+      {{#if isSuspended}}
+        <div class='suspended'>
+          {{fa-icon "ban"}}
+          <b>{{i18n user.suspended_notice date="user.suspendedTillDate"}}</b><br/>
+          <b>{{i18n user.suspended_reason}}</b> {{user.suspend_reason}}
+        </div>
+      {{else}}
+        {{#if user.bio_cooked}}<div class='bio'><div class="overflow">{{{user.bio_cooked}}}</div></div>{{/if}}
+      {{/if}}
+
       {{#if user.card_badge}}
         {{#link-to 'badges.show' user.card_badge class="card-badge"}}
           {{icon-or-image user.card_badge.image}}
         {{/link-to}}
       {{/if}}
 
+      <div class="metadata">
+        <h3><i class="fa fa-comment"></i> {{i18n last_post}} {{format-date path="user.last_posted_at" leaveAgo="true"}} </h3>
+        <h3><i class="fa fa-user"></i> {{i18n joined}} {{format-date path="user.created_at" leaveAgo="true"}}</h3>
+        {{#if user.custom_groups}}
+
+        <h3> <i class="fa fa-group"></i> {{groups-list groups=user.custom_groups}}</h3>
+
+        {{/if}}
+
+      </div>
+
+      {{#if showBadges}}
+        <div class="badge-section">
+          {{#each user.featured_user_badges}}
+            {{user-badge badge=badge}}
+          {{/each}}
+          {{#if showMoreBadges}}
+            {{#link-to 'user.badges' user class="btn more-user-badges"}}
+              {{i18n badges.more_badges count=moreBadgesCount}}
+            {{/link-to}}
+          {{/if}}
+        </div>
+      {{/if}}
   </div>
+
   {{else}}
     <p class='loading'>{{i18n loading}}</p>
   {{/if}}

app/assets/stylesheets/desktop/user-card.scss

@@ -14,9 +14,9 @@
   min-height: 175px;
 
   .card-content {
-    padding: 12px;
+    padding: 12px 12px 0 12px;
     background: rgba($primary, .85);
-    margin-top: 85px;
+    margin-top: 80px;
 
     &:after {
       content: '';
@@ -53,6 +53,10 @@
     a {
       color: $secondary;
     }
+    i {
+      font-size: 18px;
+      color: $secondary;
+    }
   }
 
   h2 {
@@ -64,7 +68,6 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: inline;
     a {
       color: $secondary;
     }
@@ -93,11 +96,12 @@
   }
 
   .metadata {
-    position: absolute;
+    width: 100%;
-    right: 20px;
+    clear: both;
-    top: 10px;
+    h3 {display: inline; margin-right: 5px; }
-    max-width: 180px;
+    div {display: inline; color: scale-color($primary, $lightness: 50%);
-    text-align: right;
+    .group-link {color: scale-color($primary, $lightness: 50%);}
+    }
   }
 
   .bottom {
@@ -106,11 +110,8 @@
   }
 
   .bio {
-    max-height: 60px;
+    padding: 15px 0 0 0;
-    overflow: hidden;
+    clear: left;
-    float: left;
-    margin: 10px 0;
-    width: 70%;
     a {
       color: $secondary;
       text-decoration: underline;
@@ -118,12 +119,17 @@
     img {
       max-width: 100%;
     }
+
+    .overflow {
+      max-height: 60px;
+      overflow: hidden;
+      }
   }
 
   img.avatar {
     float: left;
     padding-right: 10px;
-    margin-top: -60px;
+    margin-top: -53px;
   }
 
   p {
@@ -142,9 +148,14 @@
 
   .usercard-controls {
     list-style-type: none;
-    margin: 0;
+    float: right;
-    position: absolute;
+
-    right: 12px;
+    &:after {
+      content: '';
+      display: block;
+      clear: both;
+
+    }
 
     a {width: 100%; min-width: 150px;}
   }
@@ -161,6 +172,7 @@
       height: 60px;
       position: relative;
       width: 45%;
+      margin-top: 11px;
 
       span {
         position: absolute;
@@ -172,13 +184,15 @@
     }
 
     .badge-section {
-      margin-top: 10px;
       float: left;
-      width: 390px;
+      width: 500px;
+      padding-bottom: 10px;
+      margin-top: 5px;
 
       .user-badge {
         background: transparent;
-        color: $secondary;
+        color: scale-color($primary, $lightness: 50%);
+        border-color: scale-color($primary, $lightness: 50%);
 
       }