deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

redesign game table, remove borders, add buttons shadow, 

and make all buttons the same width.
Also align the flip board icon
v2
Thibault Duplessis 2019-05-03 21:00:28 +07:00
parent 58a5f819ca
commit 57e9028f01
10 changed files with 162 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/round/css/_clock.scss
View File

@ -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;

3
ui/round/css/_control.scss
View File

@ -1,9 +1,6 @@
.rcontrols {
text-align: center;
width: 100%;
@include breakpoint($mq-col2) {
border-top: $border;
}
p {
margin: 0;
}

76
ui/round/css/_moves-col1.scss 100644
View 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 100644
View 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;
}
}

158
ui/round/css/_moves.scss
View File

@ -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';
}

1
ui/round/css/_table.scss
View File

@ -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);

4
ui/round/css/_zh.scss
View File

@ -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; }
}
}
}

9
ui/round/src/view/button.ts
View File

@ -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(

2
ui/round/src/view/replay.ts
View File

@ -142,7 +142,7 @@ function renderButtons(ctrl: RoundController) {
'data-icon': 'B'
}
}),
h('nav', [
...([
['W', firstPly],
['Y', ctrl.ply - 1],
['X', ctrl.ply + 1],

2
ui/round/src/view/table.ts
View File

@ -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
];
}