UX: Make the user card badge image larger. If present, make text have a

smaller width to accomodate the larger image.

app/assets/javascripts/discourse/controllers/user-card.js.es6

@@ -28,6 +28,11 @@ export default ObjectController.extend({
 
   showMoreBadges: Em.computed.gt('moreBadgesCount', 0),
 
+  hasCardBadgeImage: function() {
+    var img = this.get('user.card_badge.image');
+    return img && img.indexOf('fa-') === -1;
+  }.property('user.card_badge.image'),
+
   show: function(username, uploadedAvatarId) {
     // XSS protection (should be encapsulated)
     username = username.replace(/[^A-Za-z0-9_]/g, "");

app/assets/javascripts/discourse/views/user-card.js.es6

@@ -6,7 +6,7 @@ var clickOutsideEventName = "mousedown.outside-user-card",
 
 export default Discourse.View.extend(CleansUp, {
   elementId: 'user-card',
-  classNameBindings: ['controller.visible::hidden', 'controller.showBadges'],
+  classNameBindings: ['controller.visible::hidden', 'controller.showBadges', 'controller.hasCardBadgeImage'],
   allowBackgrounds: Discourse.computed.setting('allow_profile_backgrounds'),
 
   addBackground: function() {

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

@@ -116,9 +116,14 @@
     padding-top: 10px;
   }
 
+  &.has-card-badge-image .bio {
+    width: 75%;
+  }
+
   .bio {
     padding: 15px 0 0 0;
     clear: left;
+
     a {
       color: $secondary;
       text-decoration: underline;
@@ -198,7 +203,6 @@
         background: transparent;
         color: scale-color($primary, $lightness: 50%);
         border-color: scale-color($primary, $lightness: 50%);
-
       }
 
       h3 {
@@ -223,7 +227,7 @@
 
   .card-badge {
     img {
-      max-width: 40px;
+      max-width: 120px;
     }
     position: absolute;
     right: 12px;