diff --git a/ui/round/css/_clock.scss b/ui/round/css/_clock.scss index 0d8c3e0c4a..231b2e9551 100644 --- a/ui/round/css/_clock.scss +++ b/ui/round/css/_clock.scss @@ -60,7 +60,6 @@ .time { @extend %roboto, %box-shadow; background: $c-bg-box; - border: $border; min-width: 3em; font-size: 2.8em; line-height: $col1-player-clock-height; @@ -75,7 +74,6 @@ font-size: 2.3em; } @include breakpoint($mq-col1) { - border-right: 0; border-radius: 0; box-shadow: none; } @@ -94,11 +92,9 @@ } &-top .time { @extend %box-radius-top; - border-bottom: 0; } &-bottom .time { @extend %box-radius-bottom; - border-top: 0; } &-correspondence .time { font-size: 1.6em; diff --git a/ui/round/css/_control.scss b/ui/round/css/_control.scss index 894cbf1eaf..664d99808a 100644 --- a/ui/round/css/_control.scss +++ b/ui/round/css/_control.scss @@ -1,9 +1,6 @@ .rcontrols { text-align: center; width: 100%; - @include breakpoint($mq-col2) { - border-top: $border; - } p { margin: 0; } diff --git a/ui/round/css/_moves-col1.scss b/ui/round/css/_moves-col1.scss new file mode 100644 index 0000000000..0ae19a88ba --- /dev/null +++ b/ui/round/css/_moves-col1.scss @@ -0,0 +1,76 @@ +/* context: .rmoves */ +@include breakpoint($mq-col1) { + overflow: hidden; + .moves { + flex: 0 0 $col1-moves-height; + display: flex; + align-items: stretch; + white-space: nowrap; + overflow-x: scroll; + color: $c-font-page; + @if $theme-light { + box-shadow: 0 4px 4px c-light($c-bg-page, 78%) inset; + } @else { + box-shadow: 0 4px 12px #000 inset; + } + &::-webkit-scrollbar { + height: 0px; + } + + > :first-child { + margin-left: auto !important; + } + } + index, + move, + .result-wrap { + display: flex; + align-items: center; + justify-content: center; + padding: 0 .3rem; + } + index { + padding-right: .15em; + } + move { + font-size: 1.1em; + cursor: pointer; + &.active, + &:hover { + @if $theme-light { + background: hsl($c-site-hue, 20%, 85%); + } @else { + background: $c-bg-zebra; + } + } + &.active { + color: $c-font-clearer; + } + &.empty { + display: none; + } + } + .buttons { + display: none; + } + .result { + margin: 0; + font-weight: bold; + font-size: 1.1em; + } + .message { + flex: 0 0 $col1-moves-height; + display: flex; + align-items: center; + justify-content: center; + line-height: 1.2; + br { display: none; } + strong { margin-left: .5em; } + &::before { + margin-right: .3em; + } + } + .status { + display: none; + } +} diff --git a/ui/round/css/_moves-col2.scss b/ui/round/css/_moves-col2.scss new file mode 100644 index 0000000000..d0e5dde7b1 --- /dev/null +++ b/ui/round/css/_moves-col2.scss @@ -0,0 +1,66 @@ +/* context: .rmoves */ +@include breakpoint($mq-col2) { + background: $c-bg-box; + .moves { + display: flex; + flex-flow: row wrap; + align-items: center; + position: relative; /* required by autoScroll */ + overflow-y: auto; + align-content: flex-start; + will-change: scroll-position; + user-select: none; + line-height: 1.7; + font-size: 1.1em; + &::-webkit-scrollbar { + width: 0px; + } + } + index { + flex: 0 0 calc(100% / 6); + display: flex; + justify-content: center; + align-items: flex-end; + background: $c-bg-zebra; + } + move { + flex: 0 0 calc(100% * 5 / 12); + padding-left: .7em; + &:not(.empty) { + cursor: pointer; + &:hover { + background: $c-primary; + color: #fff; + } + } + &.active { + font-weight: bold; + background: mix($c-primary, $c-bg-box, 20%); + } + } + .message { + display: flex; + align-items: center; + margin: 1em; + &::before { + color: $c-font-dim; + font-size: 3em; + margin-right: 12px; + } + } + .result-wrap { + width: 100%; + text-align: center; + } + .result { + border-top: $border; + font-weight: bold; + font-size: 1.2em; + padding: 5px 0 3px 0; + margin: 0; + } + .status { + font-style: italic; + margin-bottom: .5em; + } +} diff --git a/ui/round/css/_moves.scss b/ui/round/css/_moves.scss index f01af78e10..905a3ebbbb 100644 --- a/ui/round/css/_moves.scss +++ b/ui/round/css/_moves.scss @@ -1,9 +1,10 @@ .rmoves { @extend %flex-column; .buttons { - @extend %flex-between; + @extend %box-shadow; flex: 0 0 auto; - border: $border; + display: flex; + justify-content: stretch; background: $c-bg-zebra; font-size: .9em; order: 2; @@ -12,10 +13,13 @@ } } .fbt { - padding: 5px 10px; + padding: 5px 0; + flex: 1 1 auto; + text-align: center; } - .noop { - width: 30px; + .moves, + .message { + flex: 0 0 auto; } .moves, .message { @@ -30,147 +34,7 @@ move { @extend %san; } - @include breakpoint($mq-col2) { - background: $c-bg-box; - .moves { - display: flex; - flex-flow: row wrap; - align-items: center; - position: relative; /* required by autoScroll */ - overflow-y: auto; - align-content: flex-start; - border: $border; - border-width: 0 1px; - will-change: scroll-position; - user-select: none; - line-height: 1.7; - font-size: 1.1em; - } - index { - flex: 0 0 15%; - display: flex; - justify-content: center; - align-items: flex-end; - background: $c-bg-zebra; - } - move { - flex: 0 0 42.5%; - padding-left: .7em; - @include transition(); - &:not(.empty) { - cursor: pointer; - &:hover { - background: $c-primary; - color: #fff; - } - } - &.active { - font-weight: bold; - background: mix($c-primary, $c-bg-box, 20%); - } - } - .message { - display: flex; - align-items: center; - margin: 1em; - &::before { - color: $c-font-dim; - font-size: 3em; - margin-right: 12px; - } - } - .result-wrap { - width: 100%; - text-align: center; - } - .result { - border-top: $border; - font-weight: bold; - font-size: 1.2em; - padding: 5px 0 3px 0; - margin: 0; - } - .status { - font-style: italic; - margin-bottom: .5em; - } - } - @include breakpoint($mq-col1) { - overflow: hidden; - .moves { - flex: 0 0 $col1-moves-height; - display: flex; - align-items: stretch; - white-space: nowrap; - overflow-x: scroll; - color: $c-font-page; - @if $theme-light { - box-shadow: 0 4px 4px c-light($c-bg-page, 78%) inset; - } @else { - box-shadow: 0 4px 12px #000 inset; - } - &::-webkit-scrollbar { - height: 0px; - } - > :first-child { - margin-left: auto !important; - } - } - index, - move, - .result-wrap { - display: flex; - align-items: center; - justify-content: center; - padding: 0 .3rem; - } - index { - padding-right: .15em; - } - move { - font-size: 1.1em; - cursor: pointer; - @include transition(); - &.active, - &:hover { - @if $theme-light { - background: hsl($c-site-hue, 20%, 85%); - } @else { - background: $c-bg-zebra; - } - } - &.active { - color: $c-font-clearer; - } - &.empty { - display: none; - } - } - .buttons { - display: none; - } - .result { - margin: 0; - font-weight: bold; - font-size: 1.1em; - } - .message { - flex: 0 0 $col1-moves-height; - display: flex; - align-items: center; - justify-content: center; - line-height: 1.2; - br { display: none; } - strong { margin-left: .5em; } - &::before { - margin-right: .3em; - } - } - .status { - display: none; - } - .result-wrap { - } - } + @import 'moves-col1'; + @import 'moves-col2'; } diff --git a/ui/round/css/_table.scss b/ui/round/css/_table.scss index ec019ea1de..ab4d4a22dc 100644 --- a/ui/round/css/_table.scss +++ b/ui/round/css/_table.scss @@ -2,7 +2,6 @@ &__table { @extend %box-radius-right, %box-shadow; background: $c-bg-box; - border: $border; } .draw-yes span::before { transform: translateY(-1px) rotate(-90deg); diff --git a/ui/round/css/_zh.scss b/ui/round/css/_zh.scss index 3ac2a94c98..044ed5b32c 100644 --- a/ui/round/css/_zh.scss +++ b/ui/round/css/_zh.scss @@ -20,10 +20,10 @@ .round__app { @include breakpoint($mq-col2) { @include breakpoint($mq-tall) { - .rmoves { display: none; } + .rmoves .moves { display: none; } } @include breakpoint($mq-x-tall) { - .rmoves { display: flex; } + .rmoves .moves { display: flex; } } } } diff --git a/ui/round/src/view/button.ts b/ui/round/src/view/button.ts index 90c79d5a97..db45a58d74 100644 --- a/ui/round/src/view/button.ts +++ b/ui/round/src/view/button.ts @@ -265,9 +265,9 @@ export function followUp(ctrl: RoundController): VNode { ]); } -export function watcherFollowUp(ctrl: RoundController): VNode { - const d = ctrl.data; - return h('div.follow-up', [ +export function watcherFollowUp(ctrl: RoundController): VNode | null { + const d = ctrl.data, + content = [ d.game.rematch ? h('a.fbt.text', { attrs: { 'data-icon': 'v', @@ -278,7 +278,8 @@ export function watcherFollowUp(ctrl: RoundController): VNode { attrs: {href: '/tournament/' + d.tournament.id} }, ctrl.trans.noarg('viewTournament')) : null, analysisButton(ctrl) - ]); + ]; + return content.find(x => !!x) ? h('div.follow-up', content) : null; } const onSuggestionHook: Hooks = util.onInsert( diff --git a/ui/round/src/view/replay.ts b/ui/round/src/view/replay.ts index d426be60e3..0ee1244b6b 100644 --- a/ui/round/src/view/replay.ts +++ b/ui/round/src/view/replay.ts @@ -142,7 +142,7 @@ function renderButtons(ctrl: RoundController) { 'data-icon': 'B' } }), - h('nav', [ + ...([ ['W', firstPly], ['Y', ctrl.ply - 1], ['X', ctrl.ply + 1], diff --git a/ui/round/src/view/table.ts b/ui/round/src/view/table.ts index 1c2420602b..8f3e30ca30 100644 --- a/ui/round/src/view/table.ts +++ b/ui/round/src/view/table.ts @@ -30,7 +30,7 @@ function loader() { return h('i.ddloader'); } function renderTableWith(ctrl: RoundController, buttons: MaybeVNodes) { return [ renderReplay(ctrl), - h('div.rcontrols', buttons) + buttons.find(x => !!x) ? h('div.rcontrols', buttons) : null ]; }