From d54edc7c0e905073c65c9545162ef22d3eb9c39a Mon Sep 17 00:00:00 2001
From: Vikhyat Korrapati <vikhyatk@gmail.com>
Date: Tue, 22 Apr 2014 11:49:31 +0530
Subject: [PATCH] Display username and granted at on badge page.

---
 .../templates/badges/show.js.handlebars       | 10 +++++++--
 .../stylesheets/desktop/user-badges.scss      | 21 +++++++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/badges/show.js.handlebars b/app/assets/javascripts/discourse/templates/badges/show.js.handlebars
index 3c0a0d84f4e..123ef0c3606 100644
--- a/app/assets/javascripts/discourse/templates/badges/show.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/badges/show.js.handlebars
@@ -1,4 +1,4 @@
-<div class='container badges'>
+<div class='container show-badge'>
   <h1>
     {{#link-to 'badges.index'}}{{i18n badges.title}}{{/link-to}}
     <i class='fa fa-angle-right'></i>
@@ -18,7 +18,13 @@
     <br>
     {{#each userBadges}}
       {{#link-to 'userActivity' user}}
-        {{avatar user imageSize="large"}}
+        <div class="badge-user">
+          {{avatar user imageSize="large"}}
+          <div class="details">
+            <span class="username">{{user.username}}</span>
+            {{unboundDate granted_at}}
+          </div>
+        </div>
       {{/link-to}}
     {{/each}}
   {{else}}
diff --git a/app/assets/stylesheets/desktop/user-badges.scss b/app/assets/stylesheets/desktop/user-badges.scss
index 632ccf6502c..f45d973c51a 100644
--- a/app/assets/stylesheets/desktop/user-badges.scss
+++ b/app/assets/stylesheets/desktop/user-badges.scss
@@ -74,3 +74,24 @@ table.badges-listing {
     border-top: 1px solid $primary-border-color;
   }
 }
+
+/* /badges/:id/:slug page styling. */
+.show-badge {
+  .badge-user {
+    display: inline-block;
+    padding: 5px 10px;
+    border: 1px solid $secondary_border_color;
+    margin-bottom: 3px;
+
+    .details {
+      float: right;
+      margin: 0 10px;
+      padding-top: 3px;
+      color: $primary_text_color;
+    }
+    .date {
+      display: block;
+      color: $secondary_text_color;
+    }
+  }
+}