more responsive round and ZH support

lichess-org · Feb 26, 2019 · 8c53fe3 · 8c53fe3
1 parent 7518885
commit 8c53fe3
Show file tree

Hide file tree

Showing 26 changed files with 168 additions and 131 deletions.
diff --git a/app/views/base/layout.scala b/app/views/base/layout.scala
@@ -300,8 +300,8 @@ object layout {
           ),
           topmenu()
         ),
+        reconnecting,
         div(cls := "site-buttons")(
-          reconnecting,
           clinput,
           reports,
           teamRequests,

diff --git a/app/views/board/editor.scala b/app/views/board/editor.scala
@@ -27,7 +27,6 @@ LichessEditor(document.getElementById('board-editor'), data);""")
     chessground = false,
     zoomable = true,
     responsive = true,
-    wrapClass = "full-screen",
     openGraph = lila.app.ui.OpenGraph(
       title = "Chess board editor",
       url = s"$netBaseUrl${routes.Editor.index.url}",

diff --git a/ui/@types/lichess/index.d.ts b/ui/@types/lichess/index.d.ts
@@ -51,7 +51,7 @@ interface Lichess {
     update(data: any, partial: boolean): void;
     (data: any, trans: Trans, el: HTMLElement): void;
   }
-  dispatchEvent(el: HTMLElement, eventName: string): void;
+  dispatchEvent(el: HTMLElement | Window, eventName: string): void;
   RoundNVUI(redraw: () => void): {
     render(ctrl: any): any;
   }

diff --git a/ui/common/css/abstract/_media-queries.scss b/ui/common/css/abstract/_media-queries.scss
@@ -14,6 +14,7 @@ $mq-not-medium: (max-width 999px);
 
 $mq-short: (min-height 500px);
 $mq-tall: (min-height 600px);
+$mq-x-tall: (min-height 700px);
 
 /* Orientations */
 

diff --git a/ui/common/css/abstract/_z-index.scss b/ui/common/css/abstract/_z-index.scss
@@ -12,6 +12,7 @@ $z-indexes: (
   'cg__piece.fading': 1,
 
   'powertip': 120,
+  'zen-toggle': 110,
   'modal': 109,
   'mselect': 109,
   'topnav': 109,

diff --git a/ui/common/css/header/_header.scss b/ui/common/css/header/_header.scss
@@ -27,9 +27,7 @@
   opacity: 0;
 }
 body.offline #reconnecting {
-  &, &::before {
-    font-size: 1rem;
-  }
+  line-height: var(--site-header-height);
   display: inherit;
   opacity: 1;
   color: $c-error;

diff --git a/ui/dasher/src/dasher.ts b/ui/dasher/src/dasher.ts
@@ -44,7 +44,6 @@ export interface DasherCtrl {
     theme: ThemeCtrl;
     piece: PieceCtrl;
   },
-  enableZen(): void;
   opts: DasherOpts;
 }
 
@@ -76,19 +75,13 @@ export function makeCtrl(opts: DasherOpts, data: DasherData, redraw: Redraw): Da
     piece: pieceCtrl(data.piece, trans, () => data.board.is3d ? 'd3' : 'd2', redraw, setMode)
   };
 
-  function enableZen() {
-    $('body').addClass('zen');
-    $.post('/pref/zen', { zen: 1 });
-  }
-
   return {
     mode,
     setMode,
     data,
     trans,
     ping,
     subs,
-    opts,
-    enableZen
+    opts
   };
 };
diff --git a/ui/dasher/src/links.ts b/ui/dasher/src/links.ts
@@ -85,7 +85,7 @@ export default function(ctrl: DasherCtrl): VNode {
         'data-icon': 'K',
         title: 'Keyboard: z'
       },
-      hook: bind('click', ctrl.enableZen)
+      hook: bind('click', window.lichess.pubsub.emit('zen'))
     }, noarg('zenMode'))
   ]) : null;
 

diff --git a/ui/editor/css/_layout.scss b/ui/editor/css/_layout.scss
@@ -1,3 +1,7 @@
+#main-wrap {
+  --main-max-width: auto;
+}
+
 .board-editor {
 
   $board-width: calc((100vh - 4vmin) * var(--board-scale) * 0.8 - #{$site-header-height});

diff --git a/ui/editor/css/build/_editor.scss b/ui/editor/css/build/_editor.scss
@@ -1,4 +1,5 @@
 @import '../../../common/css/plugin';
+@import '../../../common/css/layout/uniboard';
 @import '../../../common/css/component/modal';
 @import '../../../common/css/component/continue-with';
 @import '../editor';
diff --git a/ui/round/css/_app-layout.scss b/ui/round/css/_app-layout.scss
@@ -1,6 +1,5 @@
-$mq-room-for-moves: $mq-x-small $mq-short;
-
-$material-height: 40px;
+$col1-pocket-height: auto;
+$material-height: auto;
 $clock-height: auto;
 $expiration-height: min-content;
 $user-height: auto;
@@ -11,16 +10,24 @@ $controls-height: auto;
   display: grid;
 
   grid-template-columns: auto min-content;
-  grid-template-rows: $col1-player-clock-height auto $expiration-height $col1-player-clock-height;
+  grid-template-rows:
+  $col1-pocket-height
+  $col1-player-clock-height
+  auto
+  $expiration-height
+  $col1-player-clock-height
+  $col1-pocket-height;
   grid-template-areas:
-  "user-top clock-top"
-  "board    board"
-  "expi-bot expi-bot"
-  "user-bot clock-bot"
-  "controls controls"
-  "moves    moves";
+  'mat-top  mat-top'
+  'user-top clock-top'
+  'board    board'
+  'expi-bot expi-bot'
+  'user-bot clock-bot'
+  'mat-bot  mat-bot'
+  'controls controls'
+  'moves    moves';
 
-  &expiration-top { display: none; }
+  .expiration-top { display: none; }
   &__table { display: none; }
 
   @include breakpoint($mq-col2) {
@@ -40,37 +47,40 @@ $controls-height: auto;
     1fr;
 
     grid-template-areas:
-    "board ."
-    "board mat-top"
-    "board clock-top"
-    "board expi-top"
-    "board user-top"
-    "board moves"
-    "board controls"
-    "board user-bot"
-    "board expi-bot"
-    "board clock-bot"
-    "board mat-bot"
-    "board .";
+    'board .'
+    'board mat-top'
+    'board clock-top'
+    'board expi-top'
+    'board user-top'
+    'board moves'
+    'board controls'
+    'board user-bot'
+    'board expi-bot'
+    'board clock-bot'
+    'board mat-bot'
+    'board .';
     grid-column-gap: $block-gap;
     &__table {
       display: block;
       grid-area: 4 / 2 / 10 / 3;
     }
-    .rmoves { display: none; }
-    @include breakpoint($mq-room-for-moves) {
-      .rmoves {
-        display: flex;
-        background: none;
-      }
+    .rmoves {
+      display: none;
+      background: none;
+    }
+    @include breakpoint($mq-tall) {
+      &:not(.variant-crazyhouse) .rmoves { display: flex; }
+    }
+    @include breakpoint($mq-x-tall) {
+      .rmoves { display: flex; }
     }
   }
 
   &__board { grid-area: board; }
 }
 .rcontrols { grid-area: controls; }
-.material-top { grid-area: mat-top; }
-.material-bottom { grid-area: mat-bot; }
+.material-top, .pocket-top { grid-area: mat-top; }
+.material-bottom, .pocket-bottom { grid-area: mat-bot; }
 .expiration-top { grid-area: expi-top; }
 .expiration-bottom { grid-area: expi-bot; }
 .ruser-top { grid-area: user-top; }

diff --git a/ui/round/css/_clock.scss b/ui/round/css/_clock.scss
@@ -63,7 +63,7 @@
       align-items: flex-end;
       line-height: 1.2em;
     }
-    @include breakpoint($mq-xx-small) {
+    @include breakpoint($mq-xx-small $mq-tall) {
       font-size: 3.5em;
       letter-spacing: .12em;
       &.hour {

diff --git a/ui/round/css/_icon.scss b/ui/round/css/_icon.scss
@@ -1,6 +1,11 @@
 .ricons {
   display: flex;
   justify-content: center;
+  @include breakpoint($mq-col1) {
+    .variant-crazyhouse & {
+      justify-content: flex-end;
+    }
+  }
   .fbt {
     font-size: 1.4em;
     padding: .1em 1em;

diff --git a/ui/round/css/_material.scss b/ui/round/css/_material.scss
@@ -1,6 +1,7 @@
 .material {
   align-self: center;
   display: none;
+  height: 40px;
   @include breakpoint($mq-col2) {
     display: block;
     line-height: 0;

diff --git a/ui/round/css/_meta.scss b/ui/round/css/_meta.scss
@@ -1,11 +1,10 @@
 /* shared with analysis */
 .game__meta {
-  @extend %box-neat;
+  @extend %box-neat-force;
   background: $c-bg-box;
   padding: #{$block-gap * 0.6} $block-gap;
   &__infos {
     @extend %flex-center-nowrap;
-    position: relative;
     &::before {
       font-size: 3rem;
       margin-right: 4%;

diff --git a/ui/round/css/_moves.scss b/ui/round/css/_moves.scss
@@ -79,11 +79,11 @@
     border-top: $border;
     font-weight: bold;
     font-size: 1.2em;
-    padding: 5px 0 3px 0;
+    margin: 5px 0 3px 0;
   }
   .status {
     font-size: 1em;
     font-style: italic;
-    padding-bottom: 7px;
+    margin-bottom: 7px;
   }
 }
diff --git a/ui/round/css/_round.scss b/ui/round/css/_round.scss
@@ -1,3 +1,4 @@
+$mq-col1: $mq-col1-uniboard;
 $mq-col2: $mq-col2-uniboard;
 $mq-col3: $mq-col3-uniboard;
 
@@ -15,3 +16,4 @@ $col1-player-clock-height: 50px;
 @import 'moves';
 @import 'control';
 @import 'icon';
+@import 'zh-pocket';
diff --git a/ui/round/css/_zen.scss b/ui/round/css/_zen.scss
@@ -3,19 +3,12 @@
     display: none;
   }
 }
-%zen-hide {
-  body.playing.zen & {
-    visibility: hidden;
-  }
-}
 
 #zentog {
   position: absolute;
-  top: 0;
-  left: 0;
   padding: .5em 1em;
   opacity: 0.5;
-  z-index: 3;
+  z-index: z('zen-toggle');
   display: none;
   border-bottom-right-radius: $box-radius-size;
   body.playing.zen & {
@@ -30,7 +23,12 @@ body.playing.zen {
   .ricons {
     margin: .5em 0 1em 0;
   }
+  #top {
+    justify-content: center;
+  }
 }
-#top {
-  @extend %zen-hide;
+#friend_box,
+.site-title-nav,
+.site-buttons {
+  @extend %zen;
 }
diff --git a/ui/round/css/_zh-pocket.scss b/ui/round/css/_zh-pocket.scss
@@ -0,0 +1,75 @@
+.pocket {
+  @extend %box-radius;
+  display: flex;
+  width: 62.5%;
+  &-top {
+    margin-bottom: -.5em;
+  }
+  &-bottom {
+    margin-top: -.5em;
+  }
+  @include breakpoint($mq-col2) {
+    width: 100%;
+    box-shadow: 0 3px 5px rgba(0,0,0,0.3) inset;
+    background: #888;
+    &-top {
+      margin-bottom: $block-gap;
+    }
+    &-bottom {
+      margin-top: $block-gap;
+    }
+  }
+  &-c1 {
+    flex: 0 0 20%;
+    max-width: 10vmin;
+  }
+  &-c2 {
+    @extend %square;
+    position: relative;
+  }
+  piece {
+    display: block;
+    width: 100%!important;
+    height: 100%!important;
+    @include transition();
+    &::after {
+      @extend %active, %box-radius;
+      content: attr(data-nb);
+      bottom: 0;
+      right: 0;
+      position: absolute;
+      line-height: .9em;
+      padding: 3px .3em;
+      font-weight: bold;
+      font-size: 1.1em;
+    }
+    &[data-nb='0'] {
+      cursor: auto;
+      opacity: 0.1;
+      &::after {
+        content: none;
+      }
+    }
+    &.premove {
+      background: #555;
+      &:hover {
+        background: #666;
+      }
+    }
+  }
+  &.usable {
+    piece {
+      cursor: pointer;
+      pointer-events: auto;
+      &:hover {
+        background-color: #aaa;
+      }
+      &:first-child:hover {
+        @extend %box-radius-left;
+      }
+    }
+  }
+  .blindfold &:not(.usable) {
+    opacity: 0;
+  }
+}
diff --git a/ui/round/src/boot.ts b/ui/round/src/boot.ts
@@ -89,5 +89,5 @@ export default function(opts: RoundOpts): void {
   if (location.pathname.lastIndexOf('/round-next/', 0) === 0)
   history.replaceState(null, '', '/' + data.game.id);
   if (!data.player.spectator && data.game.status.id < 25) li.topMenuIntent();
-  $('#zentog').click(round.toggleZen);
+  $('#zentog').click(li.pubsub.emit('zen'));
 }