improve profile page

app/controllers/Analyse.scala

@@ -21,7 +21,6 @@ object Analyse extends LilaController {
 
   private def env = Env.analyse
   private def bookmarkApi = Env.bookmark.api
-  private lazy val timeChart = TimeChart(Env.user.usernameOrAnonymous) _
 
   def computer(id: String, color: String) = Auth { implicit ctx =>
     me =>
@@ -39,8 +38,8 @@ object Analyse extends LilaController {
       (pov.game.tournamentId ?? TournamentRepo.byId) zip
       (ctx.isAuth ?? {
         Env.chat.api.userChat find s"${pov.gameId}/w" map (_.forUser(ctx.me).some)
-      }) zip timeChart(pov.game) map {
-        case (((((version, pgn), analysis), tour), chat), times) =>
+      })  map {
+        case ((((version, pgn), analysis), tour), chat) =>
           Ok(html.analyse.replay(
             pov,
             analysis.fold(pgn)(a => Env.analyse.annotator(pgn, a)).toString,
@@ -50,7 +49,7 @@ object Analyse extends LilaController {
             version,
             chat,
             tour,
-            times))
+            new TimeChart(pov.game)))
       }
 
   def pgn(id: String) = Open { implicit ctx =>

app/templating/GameHelper.scala

@@ -31,10 +31,10 @@ trait GameHelper { self: I18nHelper with UserHelper with AiHelper with StringHel
   def clockNameNoCtx(clock: Clock): String =
     trans.nbMinutesPerSidePlusNbSecondsPerMove.en(clock.limitInMinutes, clock.increment)
 
-  def shortClockName(clock: Option[Clock])(implicit ctx: UserContext): String =
-    clock.fold(trans.unlimited.str())(Namer.shortClock)
+  def shortClockName(clock: Option[Clock])(implicit ctx: UserContext): Html =
+    clock.fold(trans.unlimited())(Namer.shortClock)
 
-  def shortClockName(clock: Clock): String = Namer shortClock clock
+  def shortClockName(clock: Clock): Html = Namer shortClock clock
 
   def modeName(mode: Mode)(implicit ctx: UserContext): String = mode match {
     case Mode.Casual => trans.casual.str()

app/views/lobby/home.scala.html

@@ -1,8 +1,7 @@
 @(preload: String, userTimeline: List[lila.timeline.Entry], forumRecent: List[lila.forum.PostLiteView], tours: List[lila.tournament.Created], featured: Option[Game], leaderboard: List[User], progress: List[User])(implicit ctx: Context)
 
 @underchat = {
-<a class="watchtv revert-underline" href="@routes.Tv.index">@trans.watchLichessTV()</a>
-<div id="featured_game">
+<div id="featured_game" title="@trans.watchLichessTV()">
   @featured.map { g =>
   @gameFen(g, g.firstPlayer.color, tv = true)
   @game.vstext(g)

app/views/relation/actions.scala.html

@@ -8,16 +8,19 @@
 }
 <a title="@trans.composeMessage()" href="@routes.Message.form()?username=@userId" class="icon button" href="#"><span data-icon="c"></span></a>
 }
+<form id="exportform" action="@routes.User.export(userId)" method="POST">
+  <a class="icon button" onclick="document.getElementById('exportform').submit();" title="@trans.exportGames()"><span data-icon="x"></span></a>
+</form>
 @relationWith(userId) match {
 case None => {
-<a
-  class="icon button relation"
-  href="@routes.Relation.block(userId)"
-  title="@trans.block()"><span data-icon="k"></span></a>
 <a
   class="icon button relation"
   href="@routes.Relation.follow(userId)"
   title="@trans.follow()"><span data-icon="h"></span></a>
+<a
+  class="icon button relation"
+  href="@routes.Relation.block(userId)"
+  title="@trans.block()"><span data-icon="k"></span></a>
 }
 case Some(true) => {
 <a class="button relation hover_text" href="@routes.Relation.unfollow(userId)">

app/views/user/show.scala.html

@@ -67,12 +67,12 @@ themepicker = true) {
       @if(isGranted(_.UserSpy)) {
       <a class="icon button mod_zone_toggle" href="@routes.User.mod(u.username)" title="Mod zone"><span data-icon="y"></span></a>
       }
-      <form id="exportform" action="@routes.User.export(u.username)" method="POST">
-        <a class="icon button" onclick="document.getElementById('exportform').submit();" title="@trans.exportGames()"><span data-icon="x"></span></a>
-      </form>
       @if(ctx.isAuth && !ctx.is(u)) {
       @relation.actions(u.id)
       }
+      @if(ctx.isAuth && !(ctx is u)) {
+      <a data-icon="!" title="@trans.reportXToModerators(u.username)" class="button" href="@routes.Report.form?username=@u.username"></a>
+      }
     </div>
   </div>
   <div class="mod_zone"></div>
@@ -117,10 +117,6 @@ themepicker = true) {
         <p class="thin">@trans.lastLogin() @timeago(seen)</p>
         }
         <a href="@routes.User.opponents(u.username)">@trans.favoriteOpponents()</a>
-        @if(ctx.isAuth && !(ctx is u)) {
-        <br />
-        <a href="@routes.Report.form?username=@u.username">@trans.reportXToModerators(u.username)</a>
-        }
         <div class="teams">
           @teamIds(u.id).sortBy(t => !myTeam(t)).map { teamId =>
           @teamLink(teamId, ("revert-underline" + myTeam(teamId).fold(" mine", "")).some)

modules/analyse/src/main/Env.scala

@@ -28,8 +28,6 @@ final class Env(
 
   lazy val annotator = new Annotator(NetDomain)
 
-  lazy val timeChart = TimeChart(nameUser) _
-
   lazy val cached = new {
     private val cache: Cache[Int] = LruCache(timeToLive = CachedNbTtl)
     def nbAnalysis: Fu[Int] = cache(true)(AnalysisRepo.count)

modules/analyse/src/main/TimeChart.scala

@@ -7,7 +7,7 @@ import play.api.libs.json.Json
 
 import lila.game.{ Game, Namer }
 
-final class TimeChart(game: Game, usernames: Map[Color, String]) {
+final class TimeChart(game: Game) {
 
   def series = Json stringify {
     Json.obj(
@@ -26,11 +26,3 @@ final class TimeChart(game: Game, usernames: Map[Color, String]) {
     case (x, y) => if (y > x) y else x
   }
 }
-
-object TimeChart {
-
-  def apply(nameUser: String => Fu[String])(game: Game): Fu[TimeChart] =
-    Future.traverse(game.players) { p =>
-      Namer.player(p)(nameUser) map (p.color -> _)
-    } map { named => new TimeChart(game, named.toMap) }
-}

modules/game/src/main/Namer.scala

@@ -3,22 +3,26 @@ package lila.game
 import chess.Clock
 
 import lila.user.User
+import play.api.templates.Html
 
 object Namer {
 
-  def players(game: Game, withRatings: Boolean = true)(implicit getUsername: String => Fu[String]): Fu[(String, String)] =
+  def players(game: Game, withRatings: Boolean = true)(implicit getUsername: String => Fu[String]): Fu[(Html, Html)] =
     player(game.firstPlayer, withRatings) zip player(game.secondPlayer, withRatings)
 
-  def player(player: Player, withRating: Boolean = true)(implicit getUsername: String => Fu[String]): Fu[String] =
+  def player(player: Player, withRating: Boolean = true)(implicit getUsername: String => Fu[String]): Fu[Html] =
     player.aiLevel.fold(
       player.userId.fold(fuccess(User.anonymous)) { id =>
         getUsername(id) map { username =>
           withRating.fold(
-            s"$username (${player.rating getOrElse "?"})",
+            s"$username (${player.rating getOrElse "?"})",
             username)
         }
-      }) { level => fuccess("A.I. level " + level) }
+      }) { level =>
+        fuccess("A.I. level " + level)
+      } map Html.apply
 
-  def shortClock(clock: Clock): String = "%d + %d ".format(
-    clock.limitInMinutes, clock.increment)
+  def shortClock(clock: Clock): Html = Html {
+    s"${clock.limitInMinutes} + ${clock.increment}"
+  }
 }

public/font5/fonts/lichess.svg

@@ -63,4 +63,5 @@
 <glyph unicode="&#88;" d="M123 40c-4-3-7-5-10-3c-2 1-3 4-3 9l0 420c0 5 1 8 3 9c3 2 6 0 10-3l202-203c2-2 3-3 4-6l0 194c0 5 2 9 6 13c3 4 7 5 12 5l37 0c5 0 9-1 13-5c3-4 5-8 5-13l0-402c0-5-2-9-5-13c-4-4-8-5-13-5l-37 0c-5 0-9 1-12 5c-4 4-6 8-6 13l0 194c-1-2-2-4-4-6z"/>
 <glyph unicode="&#89;" d="M389 472c4 3 7 5 10 3c2-1 3-4 3-9l0-420c0-5-1-8-3-9c-3-2-6 0-10 3l-202 203c-2 2-3 4-4 6l0-194c0-5-2-9-6-13c-3-4-7-5-12-5l-37 0c-5 0-9 1-13 5c-3 4-5 8-5 13l0 402c0 5 2 9 5 13c4 4 8 5 13 5l37 0c5 0 9-1 12-5c4-4 6-8 6-13l0-194c1 3 2 4 4 6z"/>
 <glyph unicode="&#90;" d="M475 457l0-402c0-5-1-9-5-13c-4-4-8-5-13-5l-146 0c-5 0-9 1-13 5c-4 4-5 8-5 13l0 402c0 5 1 9 5 13c4 4 8 5 13 5l146 0c5 0 9-1 13-5c4-4 5-8 5-13z m-256 0l0-402c0-5-1-9-5-13c-4-4-8-5-13-5l-146 0c-5 0-9 1-13 5c-4 4-5 8-5 13l0 402c0 5 1 9 5 13c4 4 8 5 13 5l146 0c5 0 9-1 13-5c4-4 5-8 5-13z"/>
+<glyph unicode="&#33;" d="M293 119l0 54c0 3-1 5-3 7c-2 2-4 3-7 3l-54 0c-3 0-5-1-7-3c-2-2-3-4-3-7l0-54c0-3 1-5 3-7c2-1 4-2 7-2l54 0c3 0 5 1 7 2c2 2 3 4 3 7z m-1 107l5 131c0 2-1 4-3 6c-2 2-4 3-7 3l-62 0c-3 0-5-1-7-3c-2-2-3-4-3-6l5-131c0-2 1-3 3-5c1-1 4-2 6-2l53 0c3 0 5 1 7 2c2 2 3 3 3 5z m-4 267l219-402c7-12 7-24 0-36c-3-6-8-10-13-14c-6-3-12-4-19-4l-438 0c-7 0-13 1-19 4c-5 4-10 8-13 14c-7 12-7 24 0 36l219 402c3 6 8 10 13 14c6 3 12 5 19 5c7 0 13-2 19-5c5-4 10-8 13-14z"/>
 </font></defs></svg>

public/font5/icons-reference.html

@@ -269,6 +269,10 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
           <div data-icon="Z" class="icon"></div>
           <input type="text" readonly="readonly" value="Z">
         </li>
+        <li>
+          <div data-icon="!" class="icon"></div>
+          <input type="text" readonly="readonly" value="!">
+        </li>
       </ul>
       <h2>CSS mapping</h2>
       <ul class="glyphs css-mapping">
@@ -496,6 +500,10 @@ h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercas
           <div class="icon icon-fontawesome-webfont-39"></div>
           <input type="text" readonly="readonly" value="fontawesome-webfont-39">
         </li>
+        <li>
+          <div class="icon icon-fontawesome-webfont-40"></div>
+          <input type="text" readonly="readonly" value="fontawesome-webfont-40">
+        </li>
       </ul>
     </div><script type="text/javascript">
 (function() {

public/font5/styles.css

@@ -206,3 +206,6 @@
 .icon-fontawesome-webfont-39:before {
   content: "Z";
 }
+.icon-fontawesome-webfont-40:before {
+  content: "!";
+}

public/javascripts/big.js

@@ -2191,10 +2191,10 @@ var storage = {
     });
 
     function resizeTimeline() {
-      var max = $('#lichess').offset().top + 516;
       if ($timeline.length) {
-        var pos = $timeline.offset().top;
+        var pos = $timeline.offset().top, max = $('#lichess').offset().top + 536;
         while (pos + $timeline.outerHeight() > max) {
+          console.debug($timeline.outerHeight());
           $timeline.find('div.entry:last').remove();
         }
       }

public/javascripts/chart2.js

@@ -73,6 +73,7 @@ $(function() {
       yAxis: {
         gridLineWidth: 0,
         labels: {
+          enabled: false,
           x: 0,
           style: {
             font: Highcharts.makeFont(10),

public/stylesheets/common.css

@@ -74,8 +74,8 @@ time::first-letter {
 }
 @font-face {
   font-family: "lichess";
-  src: url("../font4/fonts/lichess.eot");
-  src: url("../font4/fonts/lichess.eot?#iefix") format("embedded-opentype"), url("../font4/fonts/lichess.woff") format("woff"), url("../font4/fonts/lichess.ttf") format("truetype"), url("../font4/fonts/lichess.svg#lichess") format("svg");
+  src: url("../font5/fonts/lichess.eot");
+  src: url("../font5/fonts/lichess.eot?#iefix") format("embedded-opentype"), url("../font5/fonts/lichess.woff") format("woff"), url("../font5/fonts/lichess.ttf") format("truetype"), url("../font5/fonts/lichess.svg#lichess") format("svg");
   font-weight: normal;
   font-style: normal;
 }
@@ -625,7 +625,9 @@ div.content_box_inter .intertab {
   border: 1px solid transparent;
 }
 div.content_box_inter.tabs .intertab {
+  margin-top: 7px;
   border-bottom: none;
+  padding-bottom: 0.8em;
 }
 div.content_box_inter .intertab strong {
   font-weight: normal;
@@ -633,7 +635,8 @@ div.content_box_inter .intertab strong {
 div.content_box_inter a.intertab:hover,
 div.content_box_inter a.intertab.active {
   border-color: #ccc;
-  text-decoration: none;
+}
+div.content_box_inter a.intertab.active {
   background: #fff;
 }
 div.content_box .lichess_title {
@@ -1040,7 +1043,7 @@ a.button,
 #translation_call,
 #notifications > div,
 div.vstext,
-div.content_box_inter a.intertab:hover,
+div.user_show div.content_box_inter.tabs,
 table.slist thead {
   background: rgb(250, 250, 250);
   background: -moz-linear-gradient(top, rgba(250, 250, 250, 1) 0%, rgba(245, 245, 245, 1) 100%);
@@ -1852,19 +1855,19 @@ div.lichess_overboard.joining .mini_board {
 }
 #timeline {
   margin-top: 2em;
-  border-top: 1px solid #e0e0e0;
-  padding-top: 1em;
+  border-top: 1px solid #e4e4e4;
+  padding-top: 8px;
   margin-left: -30px;
   width: 230px;
 }
 #timeline > .entry {
-  padding-bottom: 1em;
-  border-bottom: 1px solid #e0e0e0;
-  margin-bottom: 1em;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e4e4e4;
+  margin-bottom: 8px;
   font-weight: lighter;
 }
 #timeline time {
-  font-size: 0.8em;
+  font-size: 0.9em;
 }
 #timeline a {
   font-weight: normal;

public/stylesheets/dark.css

@@ -94,12 +94,13 @@ body.dark #hooks_wrap > div.tabs > a,
 body.dark #hooks_chart > div.grid,
 body.dark div.analysis_menu,
 body.dark div.vstext,
+body.dark div.user_show div.content_box_inter.tabs,
 body.dark div.analysis_menu > a {
   border-color: #3d3d3d;
 }
 body.dark #timeline,
 body.dark #timeline > .entry {
-  border-color: #303030;
+  border-color: #2b2b2b;
 }
 body.dark #hooks_wrap > div.tabs > a.active {
   border-bottom-color: #303030;
@@ -314,7 +315,7 @@ body.dark .ui-state-default,
 body.dark #translation_call,
 body.dark #notifications > div,
 body.dark div.vstext,
-body.dark div.content_box_inter a.intertab:hover,
+body.dark div.user_show div.content_box_inter.tabs,
 body.dark table.slist thead {
   background: rgb(40, 40, 40);
   background: -moz-linear-gradient(top, rgba(40, 40, 40, 1) 0%, rgba(34, 34, 34, 1) 100%);

public/stylesheets/user-show.css

@@ -32,6 +32,7 @@ div.user_show .relation_actions {
   position: absolute;
   top: 22px;
   right: 8px;
+  font-size: 1.2em;
 }
 div.user_show .relation_actions form {
   display: inline;
@@ -61,9 +62,9 @@ div.sub_ratings h3 {
 div.user_show .rating_history {
   position: absolute;
   top: -10px;
-  left: -41px;
+  left: -15px;
   display: block;
-  width: 505px;
+  width: 479px;
   height: 350px;
 }
 div.user_show .rating_history span {
@@ -160,3 +161,9 @@ div.user_show .evaluation strong {
   display: inline;
   text-transform: uppercase;
 }
+div.user_show div.content_box_inter.tabs {
+  margin-left: -8px;
+  padding-left: 30px;
+  width: 775px;
+  border: 1px solid #ccc;
+}