more UI refactoring

This commit is contained in:
Thibault Duplessis 2019-04-08 17:23:20 +07:00
parent a410c7b905
commit e47bb965cd
26 changed files with 54 additions and 56 deletions

View file

@ -34,7 +34,7 @@ object embed {
),
body(cls := bodyClass ::: List(
"highlight" -> true,
"piece_letter" -> ctx.pref.pieceNotationIsLetter
"piece-letter" -> ctx.pref.pieceNotationIsLetter
))(
div(cls := "is2d")(
div(cls := "embedded_analyse analyse cg-512")(miniBoardContent)

View file

@ -154,12 +154,13 @@ object layout {
),
st.body(
cls := List(
"preload base" -> true,
"base" -> true,
ctx.currentTheme.cssClass -> true,
// ctx.currentTheme.cssClass -> true,
// (if (ctx.currentBg == "transp") "dark transp" else ctx.currentBg) -> true,
ctx.currentTheme3d.cssClass -> true,
ctx.currentPieceSet3d.toString -> true,
"piece_letter" -> ctx.pref.pieceNotationIsLetter,
"piece-letter" -> ctx.pref.pieceNotationIsLetter,
"zen" -> ctx.pref.isZen,
"blind_mode" -> ctx.blind,
"kid" -> ctx.kid,

View file

@ -4,9 +4,9 @@
@base.layout(
title = u.username + " communications",
moreCss = cssTag("mod-communication.css")) {
<div id="communication" class="content_box">
responsive = true,
moreCss = responsiveCssTag("mod.communication")) {
<main id="communication" class="box box-pad">
<h1>
<div class="title">
@userLink(u) communications

View file

@ -3,7 +3,7 @@ simulChats: List[(lila.simul.Simul, lila.chat.UserChat)])(implicit ctx: Context)
@base.layout(
title = "Public Chats",
moreCss = responsiveCssTag("mod.public-chats"),
moreCss = responsiveCssTag("mod.communication"),
moreJs = jsTag("public-chat.js"),
responsive = true) {
<main class="page-menu">

View file

@ -34,7 +34,7 @@ object embed {
),
body(cls := bodyClass ::: List(
"highlight" -> true,
"piece_letter" -> ctx.pref.pieceNotationIsLetter
"piece-letter" -> ctx.pref.pieceNotationIsLetter
))(
div(cls := "is2d")(
div(cls := "embedded_study analyse cg-512")(miniBoardContent)

View file

@ -28,7 +28,7 @@ object shields {
case (categ, awards) => {
section(
h2(
span(cls := "shield_trophy")(categ.iconChar.toString),
span(cls := "shield-trophy")(categ.iconChar.toString),
categ.name
),
ul(

View file

@ -3,7 +3,8 @@ package views.html.user.show
import lila.api.Context
import lila.app.templating.Environment._
import lila.app.ui.ScalatagsTemplate._
import lila.user.Trophy.Kind
import lila.user.Trophy
import Trophy.Kind
import lila.user.User
import controllers.routes
@ -16,8 +17,8 @@ object otherTrophies {
trophies.sorted.map { trophy =>
trophy.kind.icon.map { iconChar =>
a(
awardCls(trophy),
href := trophy.kind.url,
cls := s"trophy award ${trophy.kind.key} ${trophy.kind.klass}",
title := s"${trophy.kind.name}"
)(raw(iconChar))
}
@ -26,17 +27,17 @@ object otherTrophies {
},
info.shields.map { shield =>
a(
cls := "shield_trophy combo_trophy",
cls := "shield-trophy combo-trophy",
title := s"${shield.categ.name} Shield",
href := routes.Tournament.shields
)(shield.categ.iconChar)
)(shield.categ.iconChar.toString)
},
info.revolutions.map { revol =>
a(
cls := "revol_trophy combo_trophy",
cls := "revol_trophy combo-trophy",
title := s"${revol.variant.name} Revolution",
href := routes.Tournament.show(revol.tourId)
)(revol.iconChar)
)(revol.iconChar.toString)
},
info.allTrophies.find(_.kind == Kind.ZugMiracle).map { t =>
frag(
@ -58,7 +59,7 @@ object otherTrophies {
transform: translateY(-9px);
animation: psyche 0.3s ease-in-out infinite alternate;
}"""),
a(href := t.kind.url, cls := s"trophy award ${t.kind.key} ${t.kind.klass}", title := t.kind.name)(
a(awardCls(t), href := t.kind.url, title := t.kind.name)(
img(src := staticUrl("images/trophy/zug-trophy.png"))
)
)
@ -66,7 +67,7 @@ object otherTrophies {
info.allTrophies.filter(t => t.kind == Kind.ZHWC17 || t.kind == Kind.ZHWC18).::: {
info.allTrophies.filter(t => t.kind == Kind.AtomicWC16 || t.kind == Kind.AtomicWC17 || t.kind == Kind.AtomicWC18)
}.map { t =>
a(href := t.kind.url, cls := s"trophy award ${t.kind.key} ${t.kind.klass}", title := t.kind.name,
a(awardCls(t), href := t.kind.url, title := t.kind.name,
style := "width: 65px; height: 80px; margin: 0 3px!important;")(
img(src := staticUrl(s"images/trophy/${t.kind.key}.png"), width := 65, height := 80)
)
@ -74,8 +75,8 @@ object otherTrophies {
info.allTrophies.filter(_.kind.klass.has("icon3d")).sorted.map { trophy =>
trophy.kind.icon.map { iconChar =>
a(
awardCls(trophy),
href := trophy.kind.url,
cls := s"trophy award ${trophy.kind.key} ${trophy.kind.klass}",
title := trophy.kind.name
)(raw(iconChar))
}
@ -95,4 +96,6 @@ object otherTrophies {
title := (if (isStreaming(u.id)) "Live now!" else "Lichess Streamer")
)("")
)
private def awardCls(t: Trophy) = cls := s"trophy award ${t.kind.key} ${~t.kind.klass}"
}

View file

@ -45,14 +45,10 @@
padding-left: 7px;
}
.moves td:first-child {
@extend %chess-font;
@extend %san;
line-height: 30px;
padding-left: 7px;
}
body.piece_letter & .moves td:first-child {
font-family: 'Noto Sans';
font-size: 13px;
}
.moves td:nth-child(2) {
font-size: .75em;
text-align: right;
@ -143,13 +139,10 @@
.tablebase {
width: 100%;
td:first-child {
@extend %chess-font;
@extend %san;
font-size: 14px;
line-height: 30px;
padding-left: 7px;
body.piece_letter & {
@extend %base-font;
}
}
td:last-child {
padding-right: 7px;

View file

@ -8,7 +8,7 @@ $c-fork: $c-primary;
display: block;
}
move {
@extend %chess-font;
@extend %san;
background: mix($c-fork, $c-bg-box, 20%);
flex: 0 0 50%;
line-height: 28px;
@ -21,9 +21,6 @@ $c-fork: $c-primary;
border-right: $border;
}
}
body.piece_letter & move {
@extend %base-font;
}
move:last-child {
border-bottom: none;
}

View file

@ -17,11 +17,8 @@
text-align: center;
}
span {
@extend %chess-font;
@extend %san;
margin-left: 4px;
body.piece_letter & {
@extend %base-font;
}
}
}
}

View file

@ -11,6 +11,12 @@
%chess-font {
font-family: 'ChessSansPiratf', 'Noto Sans';
}
%san {
@extend %chess-font;
.piece-letter & {
@extend %base-font;
}
}
%active {
background: $c-accent;
color: #fff;

View file

@ -1,7 +1,6 @@
@function local-font($path) {
@return url(#{$font-path}/#{$path})
}
@font-face {
font-family: "lichess";
src: local-font("lichess/fonts/lichess.woff") format("woff");
@ -9,7 +8,10 @@
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ChessSansPiratf';
src: local-font("ChessSansPiratf.woff") format("woff");
}
/* cyrillic-ext */
@font-face {
font-family: 'Noto Sans';

View file

@ -40,13 +40,10 @@
background: $c-bg-zebra;
}
move {
@extend %chess-font;
@extend %san;
flex: 0 0 42.5%;
padding-left: .7em;
@include transition();
body.piece_letter & {
@extend %base-font;
}
&:not(.empty) {
cursor: pointer;
&:hover {

View file

@ -1,2 +1,2 @@
@import '../../../common/css/plugin';
@import '../mod/public-chats';
@import '../mod/communication';

View file

@ -1,3 +1,3 @@
@import '../../../common/css/embed';
@import 'component/board';
@import '../../../common/css/component/board';
@import '../tv/embed';

View file

@ -0,0 +1,2 @@
@import '../../../common/css/theme/dark';
@import 'mod.communication';

View file

@ -0,0 +1,2 @@
@import '../../../common/css/theme/light';
@import 'mod.communication';

View file

@ -0,0 +1,2 @@
@import '../../../common/css/theme/transp';
@import 'mod.communication';

View file

@ -1,2 +1,2 @@
@import '../../../common/css/theme/dark';
@import 'mod.public-chats';
@import 'tv.embed';

View file

@ -1,2 +1,2 @@
@import '../../../common/css/theme/light';
@import 'mod.public-chats';
@import 'tv.embed';

View file

@ -1,2 +1,2 @@
@import '../../../common/css/theme/transp';
@import 'mod.public-chats';
@import 'tv.embed';

View file

@ -120,15 +120,15 @@
animation: fire-trophy 1.25s ease-in-out infinite alternate;
}
}
.combo_trophy {
.combo-trophy {
width: 60px;
height: 60px;
background-size: contain;
background-repeat: no-repeat;
font-family: "lichess" !important;
font-family: 'lichess';
text-align: center;
}
.shield_trophy {
.shield-trophy {
width: 50px;
background-image: url(../images/trophy/shield-gold.png);
font-size: 30px;

View file

@ -93,7 +93,7 @@
h1 {
padding-left: 90px;
letter-spacing: 2px;
.shield_trophy {
.shield-trophy {
position: absolute;
top: -8px;
left: 12px;

View file

@ -64,7 +64,7 @@ function title(ctrl: TournamentController) {
d.fullName
]);
if (hasFreq('shield', d)) return h('h1', [
h('a.shield_trophy', {
h('a.shield-trophy', {
attrs: { href: '/tournament/shields' }
}, d.perf.icon),
d.fullName

View file

@ -1,9 +1,5 @@
%move {
@extend %nowrap-hidden;
font-family: 'ChessSansPiratf', sans-serif;
@extend %san, %nowrap-hidden;
display: inline-block;
cursor: pointer;
body.piece_letter & {
@extend %base-font;
}
}