redesign game table, remove borders, add buttons shadow,
and make all buttons the same width. Also align the flip board icon
This commit is contained in:
parent
58a5f819ca
commit
57e9028f01
|
@ -60,7 +60,6 @@
|
||||||
.time {
|
.time {
|
||||||
@extend %roboto, %box-shadow;
|
@extend %roboto, %box-shadow;
|
||||||
background: $c-bg-box;
|
background: $c-bg-box;
|
||||||
border: $border;
|
|
||||||
min-width: 3em;
|
min-width: 3em;
|
||||||
font-size: 2.8em;
|
font-size: 2.8em;
|
||||||
line-height: $col1-player-clock-height;
|
line-height: $col1-player-clock-height;
|
||||||
|
@ -75,7 +74,6 @@
|
||||||
font-size: 2.3em;
|
font-size: 2.3em;
|
||||||
}
|
}
|
||||||
@include breakpoint($mq-col1) {
|
@include breakpoint($mq-col1) {
|
||||||
border-right: 0;
|
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
@ -94,11 +92,9 @@
|
||||||
}
|
}
|
||||||
&-top .time {
|
&-top .time {
|
||||||
@extend %box-radius-top;
|
@extend %box-radius-top;
|
||||||
border-bottom: 0;
|
|
||||||
}
|
}
|
||||||
&-bottom .time {
|
&-bottom .time {
|
||||||
@extend %box-radius-bottom;
|
@extend %box-radius-bottom;
|
||||||
border-top: 0;
|
|
||||||
}
|
}
|
||||||
&-correspondence .time {
|
&-correspondence .time {
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
|
|
|
@ -1,9 +1,6 @@
|
||||||
.rcontrols {
|
.rcontrols {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@include breakpoint($mq-col2) {
|
|
||||||
border-top: $border;
|
|
||||||
}
|
|
||||||
p {
|
p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
76
ui/round/css/_moves-col1.scss
Normal file
76
ui/round/css/_moves-col1.scss
Normal file
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
66
ui/round/css/_moves-col2.scss
Normal file
66
ui/round/css/_moves-col2.scss
Normal file
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,9 +1,10 @@
|
||||||
.rmoves {
|
.rmoves {
|
||||||
@extend %flex-column;
|
@extend %flex-column;
|
||||||
.buttons {
|
.buttons {
|
||||||
@extend %flex-between;
|
@extend %box-shadow;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
border: $border;
|
display: flex;
|
||||||
|
justify-content: stretch;
|
||||||
background: $c-bg-zebra;
|
background: $c-bg-zebra;
|
||||||
font-size: .9em;
|
font-size: .9em;
|
||||||
order: 2;
|
order: 2;
|
||||||
|
@ -12,10 +13,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.fbt {
|
.fbt {
|
||||||
padding: 5px 10px;
|
padding: 5px 0;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
.noop {
|
.moves,
|
||||||
width: 30px;
|
.message {
|
||||||
|
flex: 0 0 auto;
|
||||||
}
|
}
|
||||||
.moves,
|
.moves,
|
||||||
.message {
|
.message {
|
||||||
|
@ -30,147 +34,7 @@
|
||||||
move {
|
move {
|
||||||
@extend %san;
|
@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 {
|
@import 'moves-col1';
|
||||||
margin-left: auto !important;
|
@import 'moves-col2';
|
||||||
}
|
|
||||||
}
|
|
||||||
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 {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
&__table {
|
&__table {
|
||||||
@extend %box-radius-right, %box-shadow;
|
@extend %box-radius-right, %box-shadow;
|
||||||
background: $c-bg-box;
|
background: $c-bg-box;
|
||||||
border: $border;
|
|
||||||
}
|
}
|
||||||
.draw-yes span::before {
|
.draw-yes span::before {
|
||||||
transform: translateY(-1px) rotate(-90deg);
|
transform: translateY(-1px) rotate(-90deg);
|
||||||
|
|
|
@ -20,10 +20,10 @@
|
||||||
.round__app {
|
.round__app {
|
||||||
@include breakpoint($mq-col2) {
|
@include breakpoint($mq-col2) {
|
||||||
@include breakpoint($mq-tall) {
|
@include breakpoint($mq-tall) {
|
||||||
.rmoves { display: none; }
|
.rmoves .moves { display: none; }
|
||||||
}
|
}
|
||||||
@include breakpoint($mq-x-tall) {
|
@include breakpoint($mq-x-tall) {
|
||||||
.rmoves { display: flex; }
|
.rmoves .moves { display: flex; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -265,9 +265,9 @@ export function followUp(ctrl: RoundController): VNode {
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function watcherFollowUp(ctrl: RoundController): VNode {
|
export function watcherFollowUp(ctrl: RoundController): VNode | null {
|
||||||
const d = ctrl.data;
|
const d = ctrl.data,
|
||||||
return h('div.follow-up', [
|
content = [
|
||||||
d.game.rematch ? h('a.fbt.text', {
|
d.game.rematch ? h('a.fbt.text', {
|
||||||
attrs: {
|
attrs: {
|
||||||
'data-icon': 'v',
|
'data-icon': 'v',
|
||||||
|
@ -278,7 +278,8 @@ export function watcherFollowUp(ctrl: RoundController): VNode {
|
||||||
attrs: {href: '/tournament/' + d.tournament.id}
|
attrs: {href: '/tournament/' + d.tournament.id}
|
||||||
}, ctrl.trans.noarg('viewTournament')) : null,
|
}, ctrl.trans.noarg('viewTournament')) : null,
|
||||||
analysisButton(ctrl)
|
analysisButton(ctrl)
|
||||||
]);
|
];
|
||||||
|
return content.find(x => !!x) ? h('div.follow-up', content) : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSuggestionHook: Hooks = util.onInsert(
|
const onSuggestionHook: Hooks = util.onInsert(
|
||||||
|
|
|
@ -142,7 +142,7 @@ function renderButtons(ctrl: RoundController) {
|
||||||
'data-icon': 'B'
|
'data-icon': 'B'
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
h('nav', [
|
...([
|
||||||
['W', firstPly],
|
['W', firstPly],
|
||||||
['Y', ctrl.ply - 1],
|
['Y', ctrl.ply - 1],
|
||||||
['X', ctrl.ply + 1],
|
['X', ctrl.ply + 1],
|
||||||
|
|
|
@ -30,7 +30,7 @@ function loader() { return h('i.ddloader'); }
|
||||||
function renderTableWith(ctrl: RoundController, buttons: MaybeVNodes) {
|
function renderTableWith(ctrl: RoundController, buttons: MaybeVNodes) {
|
||||||
return [
|
return [
|
||||||
renderReplay(ctrl),
|
renderReplay(ctrl),
|
||||||
h('div.rcontrols', buttons)
|
buttons.find(x => !!x) ? h('div.rcontrols', buttons) : null
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue