complete new tournament page

app/controllers/Tournament.scala

@@ -42,7 +42,7 @@ object Tournament extends LilaController {
   }
 
   private def fetchTournaments =
-    env allCreatedSorted true zip repo.publicStarted zip repo.finished(20)
+    env allCreatedSorted true zip repo.publicStarted zip repo.finished(10)
 
   def show(id: String) = Open { implicit ctx =>
     repo byId id flatMap {

app/views/tournament/home.scala.html

@@ -15,7 +15,7 @@
 <ol class="scheduled_tournaments">
   @scheduled.map { tour =>
   @tour.schedule.map { s =>
-  <li data-icon="g" class="is-gold">
+  <li data-icon="@tour.perfType.map(_.iconChar)" class="is-gold">
     <a href="@routes.Tournament.show(tour.id)">@tour.fullName</a>
     @momentFormat(s.at, "calendar")
   </li>

app/views/tournament/homeInner.scala.html

@@ -3,7 +3,7 @@
 @joinButton(tour: lila.tournament.Enterable) = {
 @ctx.me.map { me =>
 @if(tour isActive me) {
-<span class="joined label" data-icon="E">&nbsp;JOINED</span>
+<span class="joined text" data-icon="E">JOINED</span>
 } else {
 <form class="inline" action="@routes.Tournament.join(tour.id)" method="POST">
   <button data-icon="G" type="submit" class="submit button text">@trans.join()</button>
@@ -20,8 +20,10 @@
 
 @tourTd(tour: lila.tournament.Tournament) = {
 <td class="header">
-  <a href="@routes.Tournament.show(tour.id)" class="name">@tour.fullName</a>
+  <a href="@routes.Tournament.show(tour.id)">
-  @setup(tour)
+    <span class="name">@tour.fullName</span>
+    @setup(tour)
+  </a>
 </td>
 }
 
@@ -31,7 +33,7 @@
     <thead>
       <tr>
         <th colspan=2 class="large">@trans.openTournaments()</th>
-        <th>@trans.timeControl()</th>
+        <th>@trans.duration()</th>
         <th colspan="2">@trans.players()</th>
       </tr>
     </thead>
@@ -40,7 +42,7 @@
       <tr class="scheduled">
         @iconTd(tour)
         @tourTd(tour)
-        <td class="text" data-icon="p">@tour.durationString</td>
+        <td>@tour.durationString</td>
         <td class="text" data-icon="r">@tour.nbPlayers</td>
         <td>@joinButton(tour)</td>
       </tr>
@@ -49,7 +51,7 @@
       <tr>
         @iconTd(tour)
         @tourTd(tour)
-        <td class="text" data-icon="p">@tour.durationString</td>
+        <td>@tour.durationString</td>
         <td class="text" data-icon="r">@tour.playerRatio</td>
         <td>@joinButton(tour)</td>
       </tr>
@@ -66,7 +68,7 @@
     <thead>
       <tr>
         <th colspan=2 class="large">@trans.playingRightNow()</th>
-        <th>@trans.timeControl()</th>
+        <th>@trans.duration()</th>
         <th>@trans.players()</th>
         <th></th>
       </tr>
@@ -76,7 +78,7 @@
       <tr>
         @iconTd(tour)
         @tourTd(tour)
-        <td class="text" data-icon="p">@tour.durationString</td>
+        <td>@tour.durationString</td>
         <td class="text" data-icon="r">@tour.nbPlayers</td>
         <td>@joinButton(tour)</td>
       </tr>
@@ -86,7 +88,7 @@
     <thead>
       <tr>
         <th colspan=2 class="large">@trans.finished()</th>
-        <th>@trans.timeControl()</th>
+        <th>@trans.duration()</th>
         <th>@trans.players()</th>
         <th>@trans.winner()</th>
       </tr>
@@ -96,7 +98,7 @@
       <tr>
         @iconTd(tour)
         @tourTd(tour)
-        <td class="text" data-icon="p">@tour.durationString</td>
+        <td>@tour.durationString</td>
         <td class="text" data-icon="r">@tour.nbPlayers</td>
         <td>@tour.winner.map { player =>
           @userInfosLink(player.id, player.rating.some, withOnline = false)

app/views/tournament/setup.scala.html

@@ -1,12 +1,14 @@
-@(tour: lila.tournament.Tournament)(implicit ctx: Context)
+@(tour: lila.tournament.Tournament, variantLink: Boolean = false)(implicit ctx: Context)
 <span class="setup">
   @tour.clock.show •
   @if(tour.variant.exotic) {
+  @if(variantLink) {
   @game.variantLink(tour.variant, (if (tour.variant == chess.variant.KingOfTheHill) tour.variant.shortName else tour.variant.name), cssClass = "hint--top")
   } else {
-  @tour.perfType.map { pt =>
+  @tour.variant.name
-  <span class="hint--top" data-hint="@pt.title">@pt.name</span>
   }
+  } else {
+  @tour.perfType.map(_.name)
   } •
   @tour.schedule.filter(_ => tour.isOpen).map { s =>
   @momentFromNow(s.at)

public/stylesheets/dark.css

@@ -382,6 +382,10 @@ body.dark #puzzle > .right .please_vote {
 body.dark div.game_tournament table.standing tr.me td {
   background: #333;
 }
+body.dark #tournament_list table.slist .icon span {
+  color: rgba(200,200,200,0.5);
+  text-shadow: 2px 2px 2px #000;
+}
 body.dark #top .shown .dropdown {
   border: 1px solid #3d3d3d;
   border-top: 0;

public/stylesheets/tournament.css

@@ -11,12 +11,13 @@ ol.scheduled_tournaments a:hover {
   line-height: 2.3em;
 }
 #tournament_list table.slist .icon {
-  width: 3em;
+  width: 4em;
 }
 #tournament_list table.slist .icon span {
-  font-size: 3em;
+  font-size: 4em;
-  opacity: 0.8;
+  color: rgba(200,200,200,0.5);
-  transition: 0.3s;
+  text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
+  /* color: rgba(216,80,0, 0.9); */
 }
 #tournament_list table.slist td {
   padding-top: 1em;
@@ -24,12 +25,23 @@ ol.scheduled_tournaments a:hover {
 }
 #tournament_list table.slist .header {
   letter-spacing: 2px;
+  cursor: pointer;
+  transition: 0.3s;
+  padding: 0!important;
 }
-#tournament_list table.slist a.name {
+#tournament_list table.slist .header:hover {
+  transform: translateX(3px);
+}
+#tournament_list table.slist .header a {
+  text-decoration: none;
+  padding: 1em;
+  display: block;
+}
+#tournament_list table.slist .name {
   letter-spacing: 3px;
   font-size: 1.7em;
-  text-decoration: none;
   display: block;
+  transition: 0.3s;
 }
 #tournament.scheduled h1,
 #tournament table tr.standing.scheduled:first-child td:first-child {
@@ -40,7 +52,7 @@ ol.scheduled_tournaments a:hover {
   font-size: 20px;
   font-family: monospace;
   font-weight: bold;
-  margin: 21px 25px 0 0;
+  margin: 25px 25px 0 0;
 }
 #tournament div.tournament_show {
   width: 525px;
@@ -223,6 +235,9 @@ ol.scheduled_tournaments a:hover {
 .setup {
   text-transform: uppercase;
 }
+.setup a {
+  text-decoration: none;
+}
 #tournament_side a {
   padding: 0.3em 0.2em;
   display: block;