deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

homepage UI

more-scalatags
Thibault Duplessis 2019-02-28 19:22:45 +07:00
parent 6328cc9577
commit bb0c4e846f
8 changed files with 54 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
app/views/lobby/home.scala
View File

@ -54,6 +54,31 @@ object home {
asyncJs = true
) {
main(cls := "lobby")(
div(cls := "lobby__table")(
div(cls := "lobby__start")(
a(href := routes.Setup.hookForm, cls := List(
"button button-metal config_hook" -> true,
"disabled" -> (playban.isDefined || currentGame.isDefined || ctx.isBot)
), trans.createAGame.frag()),
a(href := routes.Setup.friendForm(none), cls := List(
"button button-metal config_friend" -> true,
"disabled" -> currentGame.isDefined
), trans.playWithAFriend.frag()),
a(href := routes.Setup.aiForm, cls := List(
"button button-metal config_ai" -> true,
"disabled" -> currentGame.isDefined
), trans.playWithTheMachine.frag())
),
div(cls := "lobby__counters")(
a(id := "nb_connected_players", href := ctx.noBlind.option(routes.User.list.toString))(trans.nbPlayers.frag(nbPlayersPlaceholder)),
a(id := "nb_games_in_play", href := ctx.noBlind.option(routes.Tv.games.toString))(
trans.nbGamesInPlay.pluralFrag(nbRounds, span(nbRounds))
)
)
),
currentGame.map(bits.currentGameInfo) orElse
playban.map(bits.playbanInfo) getOrElse
bits.lobbyApp,
div(cls := "lobby__side")(
ctx.noKid option st.section(cls := "lobby__streams")(views.html.streamer.bits liveStreams streams),
div(cls := "lobby__spotlights")(
@ -77,31 +102,6 @@ object home {
)
}
),
currentGame.map(bits.currentGameInfo) orElse
playban.map(bits.playbanInfo) getOrElse
bits.lobbyApp,
div(cls := "lobby__table")(
div(cls := "lobby__start")(
a(href := routes.Setup.hookForm, cls := List(
"button button-metal config_hook" -> true,
"disabled" -> (playban.isDefined || currentGame.isDefined || ctx.isBot)
), trans.createAGame.frag()),
a(href := routes.Setup.friendForm(none), cls := List(
"button button-metal config_friend" -> true,
"disabled" -> currentGame.isDefined
), trans.playWithAFriend.frag()),
a(href := routes.Setup.aiForm, cls := List(
"button button-metal config_ai" -> true,
"disabled" -> currentGame.isDefined
), trans.playWithTheMachine.frag())
),
div(cls := "lobby__counters")(
a(id := "nb_connected_players", href := ctx.noBlind.option(routes.User.list.toString))(trans.nbPlayers.frag(nbPlayersPlaceholder)),
a(id := "nb_games_in_play", href := ctx.noBlind.option(routes.Tv.games.toString))(
trans.nbGamesInPlay.pluralFrag(nbRounds, span(nbRounds))
)
)
),
featured map { g =>
div(cls := "lobby__tv")(
gameFen(Pov first g, tv = true),

5
ui/common/css/form/_ui-slider.scss
View File

@ -27,10 +27,9 @@ $slider-width: 5px;
margin: 0 0 -10px -5.5px;
border-radius: 50%;
&:hover,
&:active {
box-shadow: 0 0 0 9px fade-out($c-slider, .85);
}
&:active,
&:focus {
box-shadow: 0 0 0 9px fade-out($c-slider, .85);
outline: 0;
}
}

2
ui/common/css/theme/_default.scss
View File

@ -78,7 +78,7 @@ $c-bg-input: c-light($c-bg-page, 98%);
$c-border: hsl(0, 0%, 85%);
$c-page-mask: hsla(0, 0, 0%, 0.5);
$c-page-mask: hsla(0, 0, 0%, 0.6);
$c-bg-popup: $c-bg-high;
$c-popup: $c-font;

21
ui/common/css/theme/_transp.scss
View File

@ -2,6 +2,9 @@
$theme: 'transp';
$c-bg-high: hsla(0, 0%, 0%, .6);
$c-bg-low: hsla(0, 0%, 0%, .5);
$c-font: hsl(0, 0%, 77%);
$c-font-dim: c-light($c-font, 66%);
$c-font-dimmer: c-light($c-font, 45%);
@ -9,10 +12,19 @@ $c-font-clear: c-light($c-font, 86%);
$c-font-clearer: c-light($c-font, 94%);
$c-font-page: $c-font-clear;
$c-bg-box: hsla(0, 0%, 0%, .6);
$c-bg-box: $c-bg-high;
$c-bg-zebra: hsla(0, 0%, 100%, .05);
$c-bg-input: $c-bg-zebra;
$c-bg-popup: $c-bg-high;
@mixin metal {
background: linear-gradient(to bottom, hsla(0, 0, 0, .5), hsla(0, 0, 0, .6) 100%);
}
@mixin metal-hover {
background: linear-gradient(to bottom, hsla(0, 0, 0, .45), hsla(0, 0, 0, .55) 100%);
}
@mixin theme-style {
body.transp {
&::before {
@ -30,3 +42,10 @@ $c-bg-input: $c-bg-zebra;
}
}
}
%metal {
@include metal;
}
%metal-hover {
@include metal-hover;
}

1
ui/lobby/css/app/_hook-filter.scss
View File

@ -14,7 +14,6 @@
}
.checkable {
padding: 4.3px 0;
color: #444;
}
.checkable {
overflow: hidden;

2
ui/lobby/css/app/_hook-list.scss
View File

@ -13,7 +13,7 @@
background: fade-out($c-secondary, .6);
}
&.join:hover td {
background: fade-out($c-primary, .2);
background: fade-out($c-accent, .2);
color: #fff;
transition: none;
}

15
ui/lobby/css/app/_pool.scss
View File

@ -4,28 +4,21 @@
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 9px;
// padding: 12px 12px 0 12px;
// display: flex;
// flex-flow: row wrap;
// justify-content: space-between;
> div {
@extend %flex-column, %box-radius;
// @extend %box-radius, %box-shadow, %flex-column;
justify-content: center;
align-items: center;
// margin-bottom: 12px;
// flex: 0 0 31%;
// height: 31%;
cursor: pointer;
background: fade-out($c-bg-box, .5);
color: $c-font-page;
transition: background .15s, opacity 0.7s;
@include transition();
&:hover {
background: fade-out($c-accent, .8);
opacity: 1;
}
&.active {
@extend %box-shadow;
background: #fff;
@extend %popup-shadow;
background: $c-bg-popup;
}
}
.transp {

2
ui/lobby/src/view/pools.ts
View File

@ -11,7 +11,7 @@ export function hooks(ctrl: LobbyController): Hooks {
return bind('click', e => {
const id = (e.target as HTMLElement).getAttribute('data-id') ||
((e.target as HTMLElement).parentNode as HTMLElement).getAttribute('data-id');
if (id === 'custom') $('#start_buttons .config_hook').mousedown();
if (id === 'custom') $('.config_hook').mousedown();
else if (id) ctrl.clickPool(id);
}, ctrl.redraw);
}