From 98f28e1830b840edf153c7cac71541b3b542f7f9 Mon Sep 17 00:00:00 2001
From: Arpit Jalan <arpit@techapj.com>
Date: Fri, 27 Feb 2015 00:56:00 +0530
Subject: [PATCH] UX: show user name and title on about page

---
 .../templates/components/user-small.hbs       | 16 +++++----
 app/assets/stylesheets/common/base/about.scss | 36 +++++++++++++++++--
 app/serializers/user_name_serializer.rb       |  2 +-
 3 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/components/user-small.hbs b/app/assets/javascripts/discourse/templates/components/user-small.hbs
index 2bf19059d..ac22ea37a 100644
--- a/app/assets/javascripts/discourse/templates/components/user-small.hbs
+++ b/app/assets/javascripts/discourse/templates/components/user-small.hbs
@@ -1,7 +1,9 @@
-{{#link-to 'user' user.username}}
-  {{avatar user imageSize="tiny"}}
-  {{user.username}}
-  {{#if user.name}}
-    ({{user.name}})
-  {{/if}}
-{{/link-to}}
+<div class="user-image">
+  {{#link-to 'user' user.username}}{{avatar user imageSize="large"}}{{/link-to}}
+</div>
+
+<div class="user-detail">
+  <span class="username">{{#link-to 'user' user.username}}{{user.username}}{{/link-to}}</span>
+  <span class="name">{{user.name}}</span>
+  <span class="title">{{user.title}}</span>
+</div>
diff --git a/app/assets/stylesheets/common/base/about.scss b/app/assets/stylesheets/common/base/about.scss
index fdaafacb7..af5d06a5c 100644
--- a/app/assets/stylesheets/common/base/about.scss
+++ b/app/assets/stylesheets/common/base/about.scss
@@ -6,13 +6,43 @@ section.about {
   }
 
   .user-small {
-    padding: 5px;
-    width: 200px;
+    padding: 8px;
+    width: 205px;
+    height: 60px;
     float: left;
 
-    img {
+    .user-image {
+      float: left;
       padding-right: 4px;
     }
+
+    .user-detail {
+      float: left;
+      width: 70%;
+
+      span {
+        float: left;
+        width: 90%;
+        padding-left: 5px;
+      }
+
+      .username a {
+        font-weight: bold;
+        font-size: 16px;
+        color: scale-color($primary, $lightness: 30%);
+      }
+
+      .name {
+        font-size: 13px;
+        color: scale-color($primary, $lightness: 30%);
+      }
+
+      .title {
+        font-size: 13px;
+        color: scale-color($primary, $lightness: 50%);
+      }
+
+    }
   }
   
   p {
diff --git a/app/serializers/user_name_serializer.rb b/app/serializers/user_name_serializer.rb
index b1fa1c2e1..ac7beaa8d 100644
--- a/app/serializers/user_name_serializer.rb
+++ b/app/serializers/user_name_serializer.rb
@@ -1,5 +1,5 @@
 class UserNameSerializer < ApplicationSerializer
-  attributes :id, :username, :name, :uploaded_avatar_id, :avatar_template
+  attributes :id, :username, :name, :title, :uploaded_avatar_id, :avatar_template
 
   def include_name?
     SiteSetting.enable_names?