homepage WIP

app/views/lobby/bits.scala

@@ -94,57 +94,62 @@ object bits {
       )
     )
 
-  def playbanInfo(ban: lila.playban.TempBan)(implicit ctx: Context) =
-    div(cls := "lobby__playban")(
-      h2("Sorry :("),
-      p("We had to time you out for a ", (ban.remainingSeconds < 3600) ?? "little ", "while."),
-      br,
-      p("The timeout expires ", strong(secondsFromNow(ban.remainingSeconds)), "."),
-      h2("Why?"),
-      p(
-        "We aim to provide a pleasant chess experience for everyone.", br,
-        "To that effect, we must ensure that all players follow good practice.", br,
-        "When a potential problem is detected, we display this message."
-      ),
-      h2("How to avoid this?"),
-      ul(
-        li("Play every game you start"),
-        li("Try to win (or at least draw) every game you play"),
-        li("Resign lost games (don't let the clock run down)")
-      ),
-      br,
-      br,
-      p(
-        "We apologize for the temporary inconvenience,", br,
-        "and wish you great games on lichess.org.", br,
-        "Thank you for reading!"
-      )
+  def playbanInfo(ban: lila.playban.TempBan)(implicit ctx: Context) = nopeInfo(
+    h2("Sorry :("),
+    p("We had to time you out for a ", (ban.remainingSeconds < 3600) ?? "little ", "while."),
+    br,
+    p("The timeout expires ", strong(secondsFromNow(ban.remainingSeconds)), "."),
+    h2("Why?"),
+    p(
+      "We aim to provide a pleasant chess experience for everyone.", br,
+      "To that effect, we must ensure that all players follow good practice.", br,
+      "When a potential problem is detected, we display this message."
+    ),
+    h2("How to avoid this?"),
+    ul(
+      li("Play every game you start"),
+      li("Try to win (or at least draw) every game you play"),
+      li("Resign lost games (don't let the clock run down)")
+    ),
+    br,
+    br,
+    p(
+      "We apologize for the temporary inconvenience,", br,
+      "and wish you great games on lichess.org.", br,
+      "Thank you for reading!"
     )
+  )
 
-  def currentGameInfo(current: lila.app.mashup.Preload.CurrentGame)(implicit ctx: Context) =
-    div(id := "lobby_current_game")(
-      h2("Hang on!"),
-      p("You have a game in progress with ", strong(current.opponent), "."),
-      br, br,
-      a(cls := "big text button", dataIcon := "G", href := routes.Round.player(current.pov.fullId))("Join the game"),
-      br, br,
-      "or",
-      br, br,
-      form(action := routes.Round.resign(current.pov.fullId), method := "post")(
-        button(cls := "big text button", dataIcon := "L")(
-          if (current.pov.game.abortable) "Abort" else "Resign", " the game"
-        )
-      ),
-      br,
-      p("You can't start a new game until this one is finished."),
-      br, br,
-      p(
-        "If you want to play several games simultaneously,",
-        br,
-        a(href := routes.Simul.home)("create a simultaneous exhibition event"),
-        "!"
+  def currentGameInfo(current: lila.app.mashup.Preload.CurrentGame)(implicit ctx: Context) = nopeInfo(
+    h2("Hang on!"),
+    p("You have a game in progress with ", strong(current.opponent), "."),
+    br, br,
+    a(cls := "text button button-fat", dataIcon := "G", href := routes.Round.player(current.pov.fullId))("Join the game"),
+    br, br,
+    "or",
+    br, br,
+    form(action := routes.Round.resign(current.pov.fullId), method := "post")(
+      button(cls := "text button button-red", dataIcon := "L")(
+        if (current.pov.game.abortable) "Abort" else "Resign", " the game"
       )
+    ),
+    br,
+    p("You can't start a new game until this one is finished."),
+    br, br,
+    p(
+      "If you want to play several games simultaneously,",
+      br,
+      a(href := routes.Simul.home)("create a simultaneous exhibition event"),
+      "!"
     )
+  )
+
+  def nopeInfo(content: Modifier*) = frag(
+    div(cls := "lobby__app"),
+    div(cls := "lobby__nope")(
+      div(cls := "lobby__app__content")(content)
+    )
+  )
 
   def spotlight(e: lila.event.Event)(implicit ctx: Context) = a(
     href := (if (e.isNow) e.url else routes.Event.show(e.id).url),

app/views/lobby/home.scala

@@ -37,9 +37,8 @@ object home {
       jsAt(s"compiled/lichess.lobby${isProd ?? (".min")}.js", async = true),
       embedJs {
         val playbanJs = playban.fold("null")(pb => safeJsonValue(Json.obj("minutes" -> pb.mins, "remainingSeconds" -> (pb.remainingSeconds + 3))))
-        val gameJs = currentGame.fold("null")(cg => safeJsonValue(cg.json))
         val transJs = safeJsonValue(i18nJsObject(translations))
-        s"""window.lichess=window.lichess||{};window.customWS=true;lichess_lobby={data:${safeJsonValue(data)},playban:$playbanJs,currentGame:$gameJs,i18n:$transJs}"""
+        s"""window.lichess=window.lichess||{};window.customWS=true;lichess_lobby={data:${safeJsonValue(data)},playban:$playbanJs,i18n:$transJs}"""
       }
     ),
     moreCss = responsiveCssTag("lobby"),
@@ -53,7 +52,10 @@ object home {
     ).some,
     asyncJs = true
   ) {
-      main(cls := "lobby")(
+      main(cls := List(
+        "lobby" -> true,
+        "lobby-nope" -> (playban.isDefined || currentGame.isDefined)
+      ))(
         div(cls := "lobby__table")(
           div(cls := "lobby__start")(
             a(href := routes.Setup.hookForm, cls := List(

ui/common/css/abstract/_mixins.scss

@@ -33,3 +33,13 @@
 @mixin transition($prop: all, $dur: $transition-duration) {
   transition: $prop $dur;
 }
+
+@mixin hoverflow {
+  overflow-y: auto;
+  @media (hover: hover) {
+    overflow: hidden;
+    &:hover {
+      overflow-y: auto;
+    }
+  }
+}

ui/common/css/component/_friend-box.scss

@@ -16,9 +16,7 @@
   max-height: 95%;
   /* improve scroll perfs */
   backface-visibility: hidden;
-  &:hover {
-    overflow-y: auto;
-  }
+  @include hoverflow;
   .friend_box_title {
     @extend %metal;
     cursor: pointer;

ui/lobby/css/_box.scss

@@ -16,10 +16,7 @@
       }
     }
     &__content {
-      overflow: hidden;
-      &:hover {
-        overflow-y: auto;
-      }
+      @include hoverflow;
     }
     .user_link {
       font-weight: bold;

ui/lobby/css/_layout.scss

@@ -100,7 +100,8 @@ $app-tabs-height: 30px;
   }
 
   &__side { grid-area: side; }
-  &__app { grid-area: app; }
+  &__app,
+  &__nope { grid-area: app; }
   &__table { grid-area: table; }
   &__tv { grid-area: tv; }
   &__leaderboard { grid-area: leader; }

ui/lobby/css/_lobby.scss

@@ -1,3 +1,8 @@
+@mixin lobby-app-size {
+  height: 700px;
+  max-height: 90vh;
+}
+
 @import 'layout';
 @import 'app/app';
 @import 'puzzle';
@@ -29,3 +34,23 @@
     white-space: nowrap;
   }
 }
+
+.lobby__nope {
+  @include lobby-app-size;
+  text-align: center;
+  .lobby__app__content {
+    @extend %flex-column;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  ul {
+    margin: .6em auto;
+    display: inline-block;
+    text-align: left;
+  }
+  li {
+    list-style: disc outside;
+    font-size: 1.1em;
+  }
+}

ui/lobby/css/_timeline.scss

@@ -2,10 +2,7 @@
   flex: 1 1 auto;
   margin: 1em 0 0 $block-gap;
   color: $c-font-page;
-  overflow: hidden;
-  &:hover {
-    overflow-y: auto;
-  }
+  @include hoverflow;
   .entry {
     @extend %roboto;
     a {

ui/lobby/css/app/_app.scss

@@ -5,10 +5,13 @@
 
 .lobby__app {
   @extend %flex-column;
-  height: 700px;
-  max-height: 90vh;
+  @include lobby-app-size;
   user-select: none;
 
+  .lobby-nope & {
+    display: none;
+  }
+
   &__content {
     @extend %box-neat-force; // need hidden for hooks overflow scroll
     flex: 1 1 100%;
@@ -21,10 +24,7 @@
       background: $c-bg-zebra url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMy41MjkgMzMuNTA0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNS4yNS02LjI0NikiIG9wYWNpdHk9Ii4xIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxnIGZpbGw9IiMwMDAiPjxwYXRoIGQ9Im0yMiAxMGMxMC41IDEgMTYuNSA4IDE2IDI5aC0yM2MwLTkgMTAtNi41IDgtMjEiLz48cGF0aCBkPSJtMjQgMThjLjM4IDIuOTEtNS41NSA3LjM3LTggOS0zIDItMi44MiA0LjM0LTUgNC0xLjA0Mi0uOTQgMS40MS0zLjA0IDAtMy0xIDAgLjE5IDEuMjMtMSAyLTEgMC00IDEtNC00IDAtMiA2LTEyIDYtMTIgMCAwIDEuODktMS45IDItMy41LS43My0uOTk0LS41LTItLjUtMyAxLTEgMyAyLjUgMyAyLjVoMmMwIDAgLjc4LTEuOTkyIDIuNS0zIDEgMCAxIDMgMSAzIi8+PC9nPjxnIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Im05LjUgMjUuNWEuNSAuNSAwIDEgMSAtMSAwIC41IC41IDAgMSAxIDEgMHoiLz48cGF0aCBkPSJtMTUgMTUuNWEuNSAxLjUgMCAxIDEgLTEgMCAuNSAxLjUgMCAxIDEgMSAweiIgdHJhbnNmb3JtPSJtYXRyaXgoLjg2Ni41LS41Ljg2NiA5LjY5My01LjE3MykiLz48L2c+PC9nPjwvc3ZnPg==');
     }
     background-size: 100% 100%;
-    overflow: hidden;
-    &:hover {
-      overflow-y: auto;
-    }
+    @include hoverflow;
   }
 
   .redir {

ui/lobby/src/ctrl.ts

@@ -14,7 +14,6 @@ export default class LobbyController {
   opts: LobbyOpts;
   data: LobbyData;
   playban: any;
-  currentGame: any;
   isBot: boolean;
   socket: LobbySocket;
   stores: Stores;
@@ -40,7 +39,6 @@ export default class LobbyController {
     this.data.hooks = [];
     this.pools = opts.pools;
     this.playban = opts.playban;
-    this.currentGame = opts.currentGame;
     this.isBot = opts.data.me && opts.data.me.isBot;
     this.redraw = redraw;
 

ui/lobby/src/view/main.ts

@@ -10,7 +10,6 @@ import LobbyController from '../ctrl';
 
 export default function(ctrl: LobbyController) {
   let body, data: VNodeData = {};
-  if (ctrl.playban || ctrl.currentGame) return h('div#hooks_wrap');
   if (ctrl.redirecting) body = spinner();
   else switch (ctrl.tab) {
     case 'pools':

ui/round/css/_app-layout.scss

@@ -64,6 +64,7 @@ $controls-height: auto;
       display: block;
       grid-area: 4 / 2 / 10 / 3;
     }
+    .expiration-top { display: flex; }
     .rmoves {
       display: none;
       background: none;

ui/round/css/_moves.scss

@@ -24,16 +24,13 @@
   }
   .moves {
     @extend %flex-wrap, %zen;
+    @include hoverflow;
     align-content: start;
     border: $border;
     border-width: 0 1px;
-    overflow: hidden;
     will-change: scroll-position;
     user-select: none;
     line-height: 1.7;
-    &:hover {
-      overflow-y: auto;
-    }
   }
   index {
     @extend %roboto;