rewrite tournament templates

app/views/blog/index.scala.html

@@ -9,7 +9,7 @@ moreJs = infiniteScrollTag) {
 </h1>
 <div class="list infinitescroll">
   @pager.currentPageResults.map { doc =>
-  <article class="paginated_element">
+  <article class="paginated">
     @doc.getText("blog.title").map { title =>
     <h1 class="blog_title"><a href="@routes.Blog.show(doc.id, doc.slug, prismic.maybeRef)">@title</a></h1>
     }

app/views/coach/index.scala.html

@@ -47,7 +47,7 @@ side = side.some) {
   </div>
   <div class="list infinitescroll">
     @pager.currentPageResults.map { c =>
-    <div class="coach paginated_element" data-dedup="@c.coach.id">
+    <div class="coach paginated" data-dedup="@c.coach.id">
       @widget(c)
     </div>
     }

app/views/forum/search.scala.html

@@ -22,7 +22,7 @@ searchText = text
     <tr></tr>
     }
     @views.currentPageResults.map { view =>
-    <tr class="paginated_element">
+    <tr class="paginated">
       <td>
         <a class="post" href="@routes.ForumPost.redirect(view.post.id)">@view.categ.name - @view.topic.name #@view.post.number</a>
         <p>@nl2br(shorten(view.post.text.replace("\n\n", "\n"), 200))</p>

app/views/game/widgets.scala

@@ -20,7 +20,7 @@ object widgets {
   )(implicit ctx: Context): Frag = games map { g =>
     val fromPlayer = user flatMap g.player
     val firstPlayer = fromPlayer | g.firstPlayer
-    div(cls := "game_row paginated_element")(
+    div(cls := "game_row paginated")(
       gameFen(Pov(g, firstPlayer), ownerLink, withTitle = false),
       a(cls := "game_link_overlay", href := gameLink(g, firstPlayer.color, ownerLink)),
       div(cls := "infos", dataIcon := bits.gameIcon(g))(

app/views/message/inbox.scala.html

@@ -32,7 +32,7 @@ title = trans.inbox.txt()) {
       </th></tr>
       }
       @threads.currentPageResults.map { thread =>
-      <tr class="paginated_element @if(thread.isUnReadBy(me)){ new} @if(thread.asMod){ mod}">
+      <tr class="paginated @if(thread.isUnReadBy(me)){ new} @if(thread.asMod){ mod}">
         <td class="author">
           @userIdLink(thread.visibleOtherUserId(me), none)
         </td>

app/views/qa/questionPreview.scala.html

@@ -1,6 +1,6 @@
 @(q: lila.qa.Question, a: Option[lila.qa.Answer] = None)(implicit ctx: Context)
 
-<tr class="paginated_element">
+<tr class="paginated">
   <td class="meat">
     <div class="tags">@tags(q.tags)</div>
     @a.map { ans =>

app/views/relay/index.scala.html

@@ -36,7 +36,7 @@ moreJs = infiniteScrollTag) {
     <h2>Completed</h2>
     <div class="list infinitescroll">
       @pager.currentPageResults.map { r =>
-      <div class="relay paginated_element">
+      <div class="relay paginated">
         @widget(r)
       </div>
       }

app/views/streamer/index.scala.html

@@ -60,7 +60,7 @@ menu = menu("index", none).some) {
   }
   <div class="list infinitescroll">
     @pager.currentPageResults.map { s =>
-    <div class="streamer paginated_element" data-dedup="@s.streamer.id">@widget(s, none)</div>
+    <div class="streamer paginated" data-dedup="@s.streamer.id">@widget(s, none)</div>
     }
     @pager.nextPage.map { np =>
     <div class="pager none">

app/views/study/list.scala.html

@@ -7,7 +7,7 @@
 } else {
 <div class="list infinitescroll">
   @pager.currentPageResults.map { s =>
-  <div class="study paginated_element">
+  <div class="study paginated">
     @widget(s)
   </div>
   }

app/views/team/showContent.scala.html

@@ -17,7 +17,7 @@
     <div class="pager none"><a rel="next" href="@routes.Team.show(t.id, np)">Next</a></div>
     }
     @members.currentPageResults.map { member =>
-    <div class="paginated_element">@userLink(member.user)</div>
+    <div class="paginated">@userLink(member.user)</div>
     }
   </div>
 </div>

app/views/team/teamTr.scala.html

@@ -1,6 +1,6 @@
 @(t: lila.team.Team)(implicit ctx: Context)
 
-<tr class="paginated_element">
+<tr class="paginated">
   <td class="subject">
     <a class="team-name" href="@routes.Team.show(t.id)">
       <span data-icon="f" class="@{myTeam(t.id).??("is-green")}"></span>

app/views/tournament/crud/index.scala.html

@@ -30,7 +30,7 @@
         <tr></tr>
       }
       @tours.currentPageResults.map { tour =>
-      <tr class="paginated_element">
+      <tr class="paginated">
         <td><a href="@routes.TournamentCrud.edit(tour.id)">@tour.fullName</a></td>
         <td>@tour.variant.name</td>
         <td>@tour.clock</td>

app/views/tournament/finishedPaginator.scala

@@ -0,0 +1,47 @@
+package views.html.tournament
+
+import lila.api.Context
+import lila.app.templating.Environment._
+import lila.app.ui.ScalatagsTemplate._
+import lila.tournament.Tournament
+
+import controllers.routes
+
+object finishedPaginator {
+
+  def apply(finished: lila.common.paginator.Paginator[Tournament])(implicit ctx: Context) =
+    tbody(cls := "infinitescroll")(
+      finished.nextPage.map { np =>
+        tr(th(cls := "pager none")(
+          a(rel := "next", href := routes.Tournament.home(np))("Next")
+        ))
+      },
+      finished.currentPageResults.map { t =>
+        tr(cls := List(
+          "paginated" -> true,
+          "scheduled" -> t.isScheduled
+        ))(
+          td(cls := "icon")(iconTag(tournamentIconChar(t))),
+          td(cls := "header")(
+            a(href := routes.Tournament.show(t.id))(
+              span(cls := "name")(t.fullName),
+              span(cls := "setup")(
+                t.clock.show,
+                " • ",
+                if (t.variant.exotic) t.variant.name else t.perfType.map(_.name),
+                !t.position.initial option frag(" • ", trans.thematic()),
+                " • ",
+                t.mode.fold(trans.casualTournament, trans.ratedTournament)()
+              )
+            )
+          ),
+          td(cls := "duration")(t.durationString),
+          td(cls := "winner")(
+            userIdLink(t.winnerId, withOnline = false),
+            br
+          ),
+          td(cls := "text", dataIcon := "r")(t.nbPlayers.localize)
+        )
+      }
+    )
+}

app/views/tournament/finishedPaginator.scala.html

@@ -1,36 +0,0 @@
-@(finished: Paginator[Tournament])(implicit ctx: Context)
-<tbody class="infinitescroll">
-  @finished.nextPage.map { np =>
-  <tr><th class="pager none">
-      <a rel="next" href="@routes.Tournament.home(np)">Next</a>
-  </th></tr>
-  }
-  @finished.currentPageResults.map { t =>
-  <tr class="paginated_element@if(t.isScheduled) { scheduled }">
-    <td class="icon">
-      <span data-icon="@tournamentIconChar(t)"></span>
-    </td>
-    <td class="header">
-      <a href="@routes.Tournament.show(t.id)">
-        <span class="name">@t.fullName</span>
-        <span class="setup">
-          @t.clock.show •
-          @if(t.variant.exotic) {
-          @t.variant.name
-          } else {
-          @t.perfType.map(_.name)
-          }
-          @if(!t.position.initial) {
-          • @trans.thematic()
-          } • @t.mode.fold(trans.casualTournament, trans.ratedTournament)()
-        </span>
-      </a>
-    </td>
-    <td class="duration">@t.durationString</td>
-    <td class="winner">
-      @userIdLink(t.winnerId, withOnline = false)<br />
-    </td>
-    <td class="text" data-icon="r">@t.nbPlayers.localize</td>
-  </tr>
-  }
-</tbody>

app/views/tournament/home.scala

@@ -0,0 +1,88 @@
+package views.html.tournament
+
+import play.twirl.api.Html
+
+import lila.api.Context
+import lila.app.templating.Environment._
+import lila.app.ui.ScalatagsTemplate._
+import lila.common.String.html.safeJsonValue
+import lila.tournament.Tournament
+
+import controllers.routes
+
+object home {
+
+  def apply(
+    scheduled: List[Tournament],
+    finished: lila.common.paginator.Paginator[Tournament],
+    winners: lila.tournament.AllWinners,
+    json: play.api.libs.json.JsObject
+  )(implicit ctx: Context) =
+    layout(
+      title = trans.tournaments.txt(),
+      moreJs = frag(
+        infiniteScrollTag,
+        jsAt(s"compiled/lichess.tournamentSchedule${isProd ?? (".min")}.js"),
+        embedJs(s"""var app=LichessTournamentSchedule.app(document.getElementById('tournament_schedule'), {
+data: ${safeJsonValue(json)},
+i18n: ${jsI18n()}
+});
+var d=lichess.StrongSocket.defaults;d.params.flag="tournament";d.events.reload=app.update;""")
+      ),
+      side = Some(frag(
+        div(cls := "tournament_home_side")(
+          div(cls := "tournament_links")(
+            a(dataIcon := "", cls := "text", href := routes.Tournament.help("arena".some))(trans.tournamentFAQ())
+          ),
+          h2(cls := "leaderboard_title"),
+          a(href := routes.Tournament.leaderboard)(trans.leaderboard())
+        ),
+        ul(cls := "tournament_leaderboard")(
+          winners.top.map { w =>
+            li(
+              userIdLink(w.userId.some),
+              a(title := w.tourName, href := routes.Tournament.show(w.tourId))(scheduledTournamentNameShortHtml(w.tourName))
+            )
+          }
+        ),
+        h2(cls := "leaderboard_title")(trans.lichessTournaments()),
+        div(cls := "scheduled_tournaments")(
+          scheduled.map { tour =>
+            tour.schedule.filter(s => s.freq != lila.tournament.Schedule.Freq.Hourly) map { s =>
+              a(href := routes.Tournament.show(tour.id), dataIcon := tournamentIconChar(tour), cls := s"is-gold ${s.freq.name}")(
+                strong(tour.name),
+                momentFromNow(s.at)
+              )
+            }
+          }
+        )
+      )),
+      openGraph = lila.app.ui.OpenGraph(
+        url = s"$netBaseUrl${routes.Tournament.home().url}",
+        title = trans.tournamentHomeTitle.txt(),
+        description = trans.tournamentHomeDescription.txt()
+      ).some
+    ) {
+        div(cls := "content_box tournament_box no_padding")(
+          div(cls := "create_tournament")(
+            a(href := "/tournament/calendar", cls := "blue")(trans.tournamentCalendar()),
+            ctx.isAuth option a(href := routes.Tournament.form(), cls := "button")(trans.createANewTournament())
+          ),
+          h1(trans.tournaments()),
+          div(id := "tournament_schedule"),
+          div(id := "tournament_list")(
+            table(cls := "slist finished")(
+              thead(
+                tr(
+                  th(colspan := 2, cls := "large")(trans.finished()),
+                  th(trans.duration()),
+                  th(trans.winner()),
+                  th(trans.players())
+                )
+              ),
+              finishedPaginator(finished)
+            )
+          )
+        )
+      }
+}

app/views/tournament/home.scala.html

@@ -1,79 +0,0 @@
-@(scheduled: List[Tournament], finished: Paginator[Tournament], winners: lila.tournament.AllWinners, json: play.api.libs.json.JsObject)(implicit ctx: Context)
-
-@moreJs = {
-@infiniteScrollTag
-@jsAt(s"compiled/lichess.tournamentSchedule${isProd??(".min")}.js")
-@embedJs {
-var app = LichessTournamentSchedule.app(document.getElementById('tournament_schedule'), {
-data: @safeJson(json),
-i18n: @jsI18n()
-});
-lichess.StrongSocket.defaults.params.flag = "tournament";
-lichess.StrongSocket.defaults.events.reload = app.update;
-}
-}
-
-@side = {
-<div class="tournament_home_side">
-  <div class="tournament_links">
-    <a data-icon="" class="text" href="@routes.Tournament.help("arena".some)">@trans.tournamentFAQ()</a>
-  </div>
-  <h2 class="leaderboard_title">
-    <a href="@routes.Tournament.leaderboard">@trans.leaderboard()</a>
-  </h2>
-  <ul class="tournament_leaderboard">
-    @winners.top.map { w =>
-    <li>
-      @userIdLink(w.userId.some)
-      <a title="@w.tourName" href="@routes.Tournament.show(w.tourId)">@scheduledTournamentNameShortHtml(w.tourName)</a>
-    </li>
-    }
-  </ul>
-  <h2 class="leaderboard_title">@trans.lichessTournaments()</h2>
-  <div class="scheduled_tournaments">
-    @scheduled.map { tour =>
-    @tour.schedule.map { s =>
-    @if(s.freq != lila.tournament.Schedule.Freq.Hourly) {
-    <a href="@routes.Tournament.show(tour.id)" data-icon="@tournamentIconChar(tour)" class="is-gold @s.freq.name">
-      <strong>@tour.name</strong>
-      @momentFromNow(s.at)
-    </a>
-    }
-    }
-    }
-  </div>
-</div>
-}
-
-@tournament.layout(
-title = trans.tournaments.txt(),
-moreJs = moreJs,
-side = side.some,
-openGraph = lila.app.ui.OpenGraph(
-url = s"$netBaseUrl${routes.Tournament.home().url}",
-title = trans.tournamentHomeTitle.txt(),
-description = trans.tournamentHomeDescription.txt()).some) {
-<div class="content_box tournament_box no_padding">
-  <div class="create_tournament">
-    <a href="/tournament/calendar" class="blue">@trans.tournamentCalendar()</a>
-    @if(ctx.isAuth) {
-    <a href="@routes.Tournament.form()" class="button">@trans.createANewTournament()</a>
-    }
-  </div>
-  <h1>@trans.tournaments()</h1>
-  <div id="tournament_schedule"></div>
-  <div id="tournament_list">
-    <table class="slist finished">
-      <thead>
-        <tr>
-          <th colspan=2 class="large">@trans.finished()</th>
-          <th>@trans.duration()</th>
-          <th>@trans.winner()</th>
-          <th>@trans.players()</th>
-        </tr>
-      </thead>
-      @finishedPaginator(finished)
-    </table>
-  </div>
-</div>
-}

app/views/tournament/jsI18n.scala

@@ -0,0 +1,41 @@
+package views.html.tournament
+
+import lila.api.Context
+import lila.app.templating.Environment._
+import lila.common.String.html.safeJsonValue
+import lila.common.String.html.safeJson
+import lila.i18n.{ I18nKeys => trans }
+
+object jsI18n {
+
+  def apply()(implicit ctx: Context) = safeJson(i18nJsObject(translations))
+
+  private val translations = List(
+    trans.standing,
+    trans.starting,
+    trans.tournamentIsStarting,
+    trans.youArePlaying,
+    trans.standByX,
+    trans.tournamentPairingsAreNowClosed,
+    trans.join,
+    trans.withdraw,
+    trans.joinTheGame,
+    trans.signIn,
+    trans.averageElo,
+    trans.gamesPlayed,
+    trans.nbPlayers,
+    trans.winRate,
+    trans.berserkRate,
+    trans.performance,
+    trans.tournamentComplete,
+    trans.movesPlayed,
+    trans.whiteWins,
+    trans.blackWins,
+    trans.draws,
+    trans.nextXTournament,
+    trans.viewMoreTournaments,
+    trans.averageOpponent,
+    trans.ratedTournament,
+    trans.casualTournament
+  )
+}

app/views/tournament/jsI18n.scala.html

@@ -1,29 +0,0 @@
-@()(implicit ctx: Context)
-@safeJson(i18nJsObject(List(
-trans.standing,
-trans.starting,
-trans.tournamentIsStarting,
-trans.youArePlaying,
-trans.standByX,
-trans.tournamentPairingsAreNowClosed,
-trans.join,
-trans.withdraw,
-trans.joinTheGame,
-trans.signIn,
-trans.averageElo,
-trans.gamesPlayed,
-trans.nbPlayers,
-trans.winRate,
-trans.berserkRate,
-trans.performance,
-trans.tournamentComplete,
-trans.movesPlayed,
-trans.whiteWins,
-trans.blackWins,
-trans.draws,
-trans.nextXTournament,
-trans.viewMoreTournaments,
-trans.averageOpponent,
-trans.ratedTournament,
-trans.casualTournament
-)))

app/views/user/show/gamesContent.scala.html

@@ -41,7 +41,7 @@
     }
     @if(filterName == "playing" && pager.nbResults > 2) {
     @pager.currentPageResults.flatMap{ Pov(_, u) }.map { p =>
-    <div class="paginated_element">
+    <div class="paginated">
       @gameFen(p)
       @game.bits.vstext(p)(ctx.some).toHtml
     </div>

app/views/user/simpleTable.scala.html

@@ -9,7 +9,7 @@
     </th></tr>
     }
     @pager.currentPageResults.map { r =>
-    <tr class="paginated_element">
+    <tr class="paginated">
       <td>@userLink(r.user)</td>
       <td>@showBestPerf(r.user)</td>
       <td>@trans.nbGames.pluralSame(r.user.count.game)</td>

app/views/userTournament/list.scala.html

@@ -22,7 +22,7 @@
       </th></tr>
       }
       @pager.currentPageResults.map { e =>
-      <tr class="paginated_element@if(e.tour.isScheduled) { scheduled }">
+      <tr class="paginated@if(e.tour.isScheduled) { scheduled }">
         <td class="icon">
           <span data-icon="@tournamentIconChar(e.tour)"></span>
         </td>

app/views/video/card.scala.html

@@ -1,6 +1,6 @@
 @(vv: lila.video.VideoView, control: lila.video.UserControl)(implicit ctx: Context)
 
-<a class="card paginated_element" href="@routes.Video.show(vv.video.id)?@control.queryStringUnlessBot">
+<a class="card paginated" href="@routes.Video.show(vv.video.id)?@control.queryStringUnlessBot">
   @if(vv.view) {
   <span class="view">watched</span>
   }

public/javascripts/search.js

@@ -70,7 +70,7 @@ $(function() {
     $(this).infinitescroll({
       navSelector: ".pager",
       nextSelector: $next,
-      itemSelector: ".search_infinitescroll .paginated_element",
+      itemSelector: ".search_infinitescroll .paginated",
       loading: {
         msgText: "",
         finishedMsg: "---"

public/stylesheets/team.css

@@ -71,7 +71,7 @@
   margin-bottom: 20px;
 }
 #team .userlist > li,
-#team .userlist > div.paginated_element {
+#team .userlist > div.paginated {
   padding: 5px 0 5px 25px;
 }
 #team .actions {

public/stylesheets/tournament.css

@@ -1066,11 +1066,11 @@ body.dark .scheduled_tournaments a:hover {
   font-size: 1.7em;
   display: block;
 }
-#tournament_list .icon span {
+#tournament_list .icon i {
   font-size: 4em;
   opacity: 0.6;
 }
-#tournament_list .scheduled .icon span {
+#tournament_list .scheduled .icon i {
   color: #d59120;
   opacity: 0.8;
 }

ui/site/src/main.js

@@ -513,7 +513,7 @@ lichess.topMenuIntent = function() {
           var $scroller = $(this).infinitescroll({
             navSelector: ".pager",
             nextSelector: ".pager a",
-            itemSelector: ".infinitescroll .paginated_element",
+            itemSelector: ".infinitescroll .paginated",
             errorCallback: function() {
               $("#infscr-loading").remove();
             },
@@ -524,7 +524,7 @@ lichess.topMenuIntent = function() {
             $("#infscr-loading").remove();
             lichess.pubsub.emit('content_loaded')();
             var ids = [];
-            $(el).find('.paginated_element[data-dedup]').each(function() {
+            $(el).find('.paginated[data-dedup]').each(function() {
               var id = $(this).data('dedup');
               if (id) {
                 if (lichess.fp.contains(ids, id)) $(this).remove();