user perfs UI tweaks

app/views/user/side.scala.html

@@ -14,7 +14,7 @@
   <span class="rating">
     <strong>@perf.glicko.intRating@if(perf.provisional){?}</strong>
     <span>@perf.nb.localize @if(perfType.key == "puzzle") {@trans.puzzles()} else {@trans.games()}</span>
-    @showProgress(perf.progress)
+    @showProgress(perf.progress, withTitle = false)
   </span>
   <span class="rank" title="Rank is updated every 15 minutes">
     @rankMap.get(perfType.key).map { rank =>

ui/perfStat/src/glicko.js

@@ -18,13 +18,18 @@ function percentile(d) {
   ];
 }
 
+function progress(p) {
+  if (p > 0) return m('span.positive[data-icon=N]', p);
+  else if (p < 0) return m('span.negative[data-icon=M]', -p);
+}
+
 module.exports = function(d) {
   return [
     m('h2', [
       m('span', {
         title: 'Yes, ratings have decimal accuracy.'
       }, [
-        'Exact Glicko2 rating: ',
+        'Glicko2 rating: ',
         m('strong', d.perf.glicko.rating),
         '.'
       ]),
@@ -33,7 +38,7 @@ module.exports = function(d) {
     ]),
     m('p', [
       'Progression over the last twelve games: ',
-      m('strong', (d.perf.progress > 0 ? '+' : '') + d.perf.progress),
+      m('span.progress', progress(d.perf.progress) || 'none'),
       '. ',
       m('span', {
         title: 'Lower value means the rating is more stable. Above 110, the rating is considered provisional.'

ui/perfStat/src/highlow.js

@@ -5,7 +5,7 @@ function ratingAt(title, opt) {
   return util.fMap(opt, function(r) {
     return [
       m('h2', [title + ': ', m('strong', r.int)]),
-      util.gameLink(r.gameId, ['reached the ', util.date(r.at)])
+      util.gameLink(r.gameId, ['reached ', util.date(r.at)])
     ];
   }, [
     m('h2', title + ': '),