Merge pull request #2934 from awesomerobot/master

some small usercard fixes, more to come!

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

@@ -1,7 +1,7 @@
-{{#if username}}
-
 <div class="card-content">
 
+{{#if username}}
+
   {{#link-to 'user' user}}{{bound-avatar avatar "huge"}}{{/link-to}}
 
   <div class="names">
@@ -9,9 +9,19 @@
     <h1 {{bind-attr class="staff new_user"}}>
       {{#link-to 'user' user}}{{username}}{{/link-to}}
     </h1>
+
+    {{#if user.name}}
+      <h2>{{user.name}}</h2>
+    {{/if}}
+
     {{#if user.title}}
+      {{#if user.name}}
+      <h2>/ {{user.title}}</h2>
+      {{else}}
       <h2> {{user.title}}</h2>
       {{/if}}
+    {{/if}}
+
     {{#if showName}}
       <h2>{{#link-to 'user' user}}{{name}}{{/link-to}}</h2>
     {{/if}}

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

@@ -11,11 +11,13 @@
   color: $secondary;
   background-size: cover;
   background-position: center center;
+  min-height: 175px;
 
   .card-content {
     padding: 12px;
     background: rgba($primary, .85);
-    margin-top: 100px;
+    margin-top: 85px;
+
     &:after {
       content: '';
       display: block;
@@ -24,6 +26,8 @@
   }
 
 &.no-bg {
+  min-height: 50px;
+
   .card-content {
     margin-top: 0;
   }
@@ -60,6 +64,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    display: inline;
     a {
       color: $secondary;
     }
@@ -101,8 +106,8 @@
   }
 
   .bio {
-    max-height: 55px;
-    overflow: auto;
+    max-height: 60px;
+    overflow: hidden;
     float: left;
     margin: 10px 0;
     width: 70%;
@@ -161,6 +166,7 @@
         position: absolute;
         bottom: 0;
         display: block;
+        width: 250px;
       }
 
     }
@@ -186,7 +192,6 @@
     .more-user-badges {
       @extend .user-badge;
       padding: 3px 8px;
-      font-size: 13px;
     }
   }
 
@@ -199,7 +204,10 @@
     img {
       max-width: 100px;
     }
-    float: right;
-    margin-right: 5px;
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    font-size: 30px;
+    i {color: $secondary;}
   }
 }