From 6a424cf46951d948185e9941e1fbaa43539e920b Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Tue, 4 Nov 2014 16:30:46 -0500
Subject: [PATCH] UX: Make the user card badge image larger. If present, make
 text have a smaller width to accomodate the larger image.

---
 .../javascripts/discourse/controllers/user-card.js.es6    | 5 +++++
 app/assets/javascripts/discourse/views/user-card.js.es6   | 2 +-
 app/assets/stylesheets/desktop/user-card.scss             | 8 ++++++--
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/discourse/controllers/user-card.js.es6 b/app/assets/javascripts/discourse/controllers/user-card.js.es6
index 02ded4c8d93..e79d159c17b 100644
--- a/app/assets/javascripts/discourse/controllers/user-card.js.es6
+++ b/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, "");
diff --git a/app/assets/javascripts/discourse/views/user-card.js.es6 b/app/assets/javascripts/discourse/views/user-card.js.es6
index a9e05e5855f..9c438fc0bac 100644
--- a/app/assets/javascripts/discourse/views/user-card.js.es6
+++ b/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() {
diff --git a/app/assets/stylesheets/desktop/user-card.scss b/app/assets/stylesheets/desktop/user-card.scss
index acc129a2bb0..13e6c5fad7c 100644
--- a/app/assets/stylesheets/desktop/user-card.scss
+++ b/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;