From fbd97bdc4c2e832666046b11914ccfc6d957fc82 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Sat, 14 Jan 2017 15:01:18 +0100
Subject: [PATCH] frontend: improve rank rendering

---
 frontend/static/js/challenge.js |  2 +-
 frontend/static/views/rank.html | 40 ++++++++++++++++++---------------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/frontend/static/js/challenge.js b/frontend/static/js/challenge.js
index 1b7e9b00..6b5d21ee 100644
--- a/frontend/static/js/challenge.js
+++ b/frontend/static/js/challenge.js
@@ -325,7 +325,7 @@ angular.module("FICApp", ["ngRoute", "ngSanitize"])
 		$scope.reverse = !$scope.reverse;
 	    } else {
 		$scope.rankOrder = fld;
-		$scope.reverse = false;
+		$scope.reverse = (fld == "score");
 	    }
 	};
     })
diff --git a/frontend/static/views/rank.html b/frontend/static/views/rank.html
index 2f1c23e6..a632f473 100644
--- a/frontend/static/views/rank.html
+++ b/frontend/static/views/rank.html
@@ -1,18 +1,22 @@
-<p><input type="search" class="form-control" placeholder="Rechercher" ng-model="query"></p>
-<table class="table table-hover table-bordered table-striped">
-  <thead>
-    <tr>
-      <th ng-repeat="field in fields" ng-click="order(field)">
-	{{ field }}
-	<span class="glyphicon" ng-show="rankOrder === field" ng-class="{'glyphicon-up': !reverse, 'glyphicon-down': reverse}"></span>
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr ng-repeat="team in rank | filter: query | orderBy:rankOrder:reverse" ng-click="show(team.id)" ng-show="team.rank">
-      <td ng-repeat="field in fields" ng-class="{info: my.team_id == team.id}">
-	{{ team[field] }}
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div class="panel panel-success">
+  <div class="panel-body">
+    <input type="search" class="form-control" placeholder="Rechercher" ng-model="query">
+  </div>
+  <table class="table table-hover table-striped">
+    <thead>
+      <tr>
+	<th ng-repeat="field in fields" ng-click="order(field)" width="33%">
+	  {{ field | rankTitle }}
+	  <span class="glyphicon" ng-show="rankOrder === field" ng-class="{'glyphicon-chevron-up': reverse, 'glyphicon-chevron-down': !reverse}"></span>
+	</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr ng-repeat="team in rank | filter: query | orderBy:rankOrder:reverse" ng-click="show(team.id)" ng-show="team.rank">
+	<td ng-repeat="field in fields" ng-class="{info: my.team_id == team.id}">
+	  {{ team[field] }}
+	</td>
+      </tr>
+    </tbody>
+  </table>
+</div>