1 files changed, 51 insertions, 26 deletions
diff --git a/src/main/webapp/apps/frontPageApp/person.html b/src/main/webapp/apps/frontPageApp/person.html
index 3544221..8573afe 100755
--- a/src/main/webapp/apps/frontPageApp/person.html
+++ b/src/main/webapp/apps/frontPageApp/person.html
@@ -3,7 +3,7 @@
   <navbar/>
 
   <div class="page-header">
-    <h1>{{person.name}}</h1>
+    <h1>{{person.person.name}}</h1>
   </div>
 
   <ul class="nav nav-tabs">
@@ -12,35 +12,60 @@
   </ul>
 
   <div id="overview" ng-show="mode == 'overview'">
-    <h3>Badges</h3>
+    <div class="row">
+      <div class="span6">
+        <h3>Upcoming</h3>
+        <table>
+          <tr ng-repeat="badge in person.badgesInProgress">
+            <td style="padding-right: 1em">{{badge.name}}</td>
+            <td style="width: 100%">
+              <div class="progress" style="margin-bottom: 0;" title="Progress: {{badge.progress}} of {{badge.goal}}">
+                <div class="bar" style="width: {{badge.progress / badge.goal * 100}}%;"></div>
+              </div>
+            </td>
+          </tr>
+        </table>
 
-    <p ng-repeat="badge in person.badges">
-      <span class="badge-level-{{badge.level}} badge">{{badge.name}}</span><span ng-show="badge.count > 1"> x {{badge.count}}</span>
-    </p>
+        <h3>Badges</h3>
+        <ul class="unstyled">
+          <li ng-repeat="badge in person.badges">
+<!--
+            <span class="badge-level-{{badge.level}} badge">{{badge.name}}</span>
+-->
+            <strong>{{badge.name}}</strong>
+<!--
+            <i class="icon-user ng-class: {{{1: 'badge-level-1', 2: 'badge-level-2', 3: 'badge-level-3'}[badge.level]}}"></i>
+-->
+            <span class="badge-level-{{badge.level}} badge">
+                <i class="icon-user"></i>
+            </span>
 
-    <div ng-repeat="badge in person.badgesInProgress">
-      <div class="progress">
-        <div class="bar" style="width: {{badge.progress / badge.goal * 100}}%;">{{badge.name}}</div>
+            {{badge.createdDate | date:'medium'}}
+          </li>
+        </ul>
+      </div>
+      <div class="span6">
+        <h3>Recent builds</h3>
+        <table class="table">
+          <thead>
+<!--
+          <tr>
+            <th>Date</th>
+            <th>Success</th>
+            <th></th>
+          </tr>
+-->
+          </thead>
+          <tbody>
+          <tr ng-repeat="build in recentBuilds" class="{{{true: 'success', false: 'error'}[build.success]}}">
+            <td>{{build.timestamp | date:'medium'}}</td>
+            <td>{{{true: 'Success', false: 'Failure'}[build.success]}}</td>
+            <td><a href="/build/{{build.uuid}}">Details</a></td>
+          </tr>
+          </tbody>
+        </table>
       </div>
     </div>
-
-    <h3>Recent builds</h3>
-    <table class="table">
-      <thead>
-      <tr>
-        <th>Date</th>
-        <th>Success</th>
-        <th></th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr ng-repeat="build in recentBuilds" class="{{{true: 'success', false: 'error'}[build.success]}}">
-        <td>{{build.timestamp | date:'medium'}}</td>
-        <td>{{build.success}}</td>
-        <td><a href="/build/{{build.uuid}}">Details</a></td>
-      </tr>
-      </tbody>
-    </table>
   </div>
 
   <div id="builds" ng-show="mode == 'builds'">