From e47bb965cd58c6920f2f30f65b6d2c3d99cf9292 Mon Sep 17 00:00:00 2001 From: Thibault Duplessis Date: Mon, 8 Apr 2019 17:23:20 +0700 Subject: [PATCH] more UI refactoring --- app/views/analyse/embed.scala | 2 +- app/views/base/layout.scala | 5 +++-- app/views/mod/communication.scala.html | 6 +++--- app/views/mod/publicChat.scala.html | 2 +- app/views/study/embed.scala | 2 +- app/views/tournament/shields.scala | 2 +- app/views/user/show/otherTrophies.scala | 21 +++++++++++-------- ui/analyse/css/_explorer.scss | 11 ++-------- ui/analyse/css/_fork.scss | 5 +---- ui/ceval/css/_pv.scss | 5 +---- ui/common/css/abstract/_extends.scss | 6 ++++++ ui/common/css/base/_fonts.scss | 6 ++++-- ui/round/css/_moves.scss | 5 +---- ...lic-chats.scss => _mod.communication.scss} | 2 +- ui/site/css/build/_tv.embed.scss | 2 +- ui/site/css/build/mod.communication.dark.scss | 2 ++ .../css/build/mod.communication.light.scss | 2 ++ .../css/build/mod.communication.transp.scss | 2 ++ ...lic-chats.dark.scss => tv.embed.dark.scss} | 2 +- ...c-chats.light.scss => tv.embed.light.scss} | 2 +- ...chats.transp.scss => tv.embed.transp.scss} | 2 +- ..._public-chats.scss => _communication.scss} | 0 ui/site/css/user/_header.scss | 6 +++--- ui/tournament/css/_app-header.scss | 2 +- ui/tournament/src/view/header.ts | 2 +- ui/tree/css/_extend.scss | 6 +----- 26 files changed, 54 insertions(+), 56 deletions(-) rename ui/site/css/build/{_mod.public-chats.scss => _mod.communication.scss} (54%) create mode 100644 ui/site/css/build/mod.communication.dark.scss create mode 100644 ui/site/css/build/mod.communication.light.scss create mode 100644 ui/site/css/build/mod.communication.transp.scss rename ui/site/css/build/{mod.public-chats.dark.scss => tv.embed.dark.scss} (60%) rename ui/site/css/build/{mod.public-chats.light.scss => tv.embed.light.scss} (60%) rename ui/site/css/build/{mod.public-chats.transp.scss => tv.embed.transp.scss} (61%) rename ui/site/css/mod/{_public-chats.scss => _communication.scss} (100%) diff --git a/app/views/analyse/embed.scala b/app/views/analyse/embed.scala index 46bbf1e71e..48012f304d 100644 --- a/app/views/analyse/embed.scala +++ b/app/views/analyse/embed.scala @@ -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) diff --git a/app/views/base/layout.scala b/app/views/base/layout.scala index 8e5f698268..70a823c138 100644 --- a/app/views/base/layout.scala +++ b/app/views/base/layout.scala @@ -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, diff --git a/app/views/mod/communication.scala.html b/app/views/mod/communication.scala.html index a01b3acca8..7ed0d58648 100644 --- a/app/views/mod/communication.scala.html +++ b/app/views/mod/communication.scala.html @@ -4,9 +4,9 @@ @base.layout( title = u.username + " communications", -moreCss = cssTag("mod-communication.css")) { - -
+responsive = true, +moreCss = responsiveCssTag("mod.communication")) { +

@userLink(u) communications diff --git a/app/views/mod/publicChat.scala.html b/app/views/mod/publicChat.scala.html index 92e663d9d2..177fb5045d 100644 --- a/app/views/mod/publicChat.scala.html +++ b/app/views/mod/publicChat.scala.html @@ -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) {
diff --git a/app/views/study/embed.scala b/app/views/study/embed.scala index 9953690e8a..44b38e11ae 100644 --- a/app/views/study/embed.scala +++ b/app/views/study/embed.scala @@ -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) diff --git a/app/views/tournament/shields.scala b/app/views/tournament/shields.scala index bfc277ade3..7341b107fa 100644 --- a/app/views/tournament/shields.scala +++ b/app/views/tournament/shields.scala @@ -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( diff --git a/app/views/user/show/otherTrophies.scala b/app/views/user/show/otherTrophies.scala index 7e77b18647..42c8ce76f7 100644 --- a/app/views/user/show/otherTrophies.scala +++ b/app/views/user/show/otherTrophies.scala @@ -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}" } diff --git a/ui/analyse/css/_explorer.scss b/ui/analyse/css/_explorer.scss index b714cc4edd..46a9e6686f 100644 --- a/ui/analyse/css/_explorer.scss +++ b/ui/analyse/css/_explorer.scss @@ -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; diff --git a/ui/analyse/css/_fork.scss b/ui/analyse/css/_fork.scss index 3ac39306e4..0e1f7df6a9 100644 --- a/ui/analyse/css/_fork.scss +++ b/ui/analyse/css/_fork.scss @@ -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; } diff --git a/ui/ceval/css/_pv.scss b/ui/ceval/css/_pv.scss index b03f0889bf..d8dc15e049 100644 --- a/ui/ceval/css/_pv.scss +++ b/ui/ceval/css/_pv.scss @@ -17,11 +17,8 @@ text-align: center; } span { - @extend %chess-font; + @extend %san; margin-left: 4px; - body.piece_letter & { - @extend %base-font; - } } } } diff --git a/ui/common/css/abstract/_extends.scss b/ui/common/css/abstract/_extends.scss index 0a7531b355..1d98656391 100644 --- a/ui/common/css/abstract/_extends.scss +++ b/ui/common/css/abstract/_extends.scss @@ -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; diff --git a/ui/common/css/base/_fonts.scss b/ui/common/css/base/_fonts.scss index 6eacfea810..3b33b68bb1 100644 --- a/ui/common/css/base/_fonts.scss +++ b/ui/common/css/base/_fonts.scss @@ -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'; diff --git a/ui/round/css/_moves.scss b/ui/round/css/_moves.scss index a0de4e853f..ed76a52fdd 100644 --- a/ui/round/css/_moves.scss +++ b/ui/round/css/_moves.scss @@ -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 { diff --git a/ui/site/css/build/_mod.public-chats.scss b/ui/site/css/build/_mod.communication.scss similarity index 54% rename from ui/site/css/build/_mod.public-chats.scss rename to ui/site/css/build/_mod.communication.scss index 2aec8cb052..3785cd8319 100644 --- a/ui/site/css/build/_mod.public-chats.scss +++ b/ui/site/css/build/_mod.communication.scss @@ -1,2 +1,2 @@ @import '../../../common/css/plugin'; -@import '../mod/public-chats'; +@import '../mod/communication'; diff --git a/ui/site/css/build/_tv.embed.scss b/ui/site/css/build/_tv.embed.scss index 89a52ca0c2..488f65d78f 100644 --- a/ui/site/css/build/_tv.embed.scss +++ b/ui/site/css/build/_tv.embed.scss @@ -1,3 +1,3 @@ @import '../../../common/css/embed'; -@import 'component/board'; +@import '../../../common/css/component/board'; @import '../tv/embed'; diff --git a/ui/site/css/build/mod.communication.dark.scss b/ui/site/css/build/mod.communication.dark.scss new file mode 100644 index 0000000000..1d8bddfad8 --- /dev/null +++ b/ui/site/css/build/mod.communication.dark.scss @@ -0,0 +1,2 @@ +@import '../../../common/css/theme/dark'; +@import 'mod.communication'; diff --git a/ui/site/css/build/mod.communication.light.scss b/ui/site/css/build/mod.communication.light.scss new file mode 100644 index 0000000000..393a47ab9d --- /dev/null +++ b/ui/site/css/build/mod.communication.light.scss @@ -0,0 +1,2 @@ +@import '../../../common/css/theme/light'; +@import 'mod.communication'; diff --git a/ui/site/css/build/mod.communication.transp.scss b/ui/site/css/build/mod.communication.transp.scss new file mode 100644 index 0000000000..1d96836a4a --- /dev/null +++ b/ui/site/css/build/mod.communication.transp.scss @@ -0,0 +1,2 @@ +@import '../../../common/css/theme/transp'; +@import 'mod.communication'; diff --git a/ui/site/css/build/mod.public-chats.dark.scss b/ui/site/css/build/tv.embed.dark.scss similarity index 60% rename from ui/site/css/build/mod.public-chats.dark.scss rename to ui/site/css/build/tv.embed.dark.scss index 593d2fce9b..c1c80df7ac 100644 --- a/ui/site/css/build/mod.public-chats.dark.scss +++ b/ui/site/css/build/tv.embed.dark.scss @@ -1,2 +1,2 @@ @import '../../../common/css/theme/dark'; -@import 'mod.public-chats'; +@import 'tv.embed'; diff --git a/ui/site/css/build/mod.public-chats.light.scss b/ui/site/css/build/tv.embed.light.scss similarity index 60% rename from ui/site/css/build/mod.public-chats.light.scss rename to ui/site/css/build/tv.embed.light.scss index fd1ad136bd..fa25182d7d 100644 --- a/ui/site/css/build/mod.public-chats.light.scss +++ b/ui/site/css/build/tv.embed.light.scss @@ -1,2 +1,2 @@ @import '../../../common/css/theme/light'; -@import 'mod.public-chats'; +@import 'tv.embed'; diff --git a/ui/site/css/build/mod.public-chats.transp.scss b/ui/site/css/build/tv.embed.transp.scss similarity index 61% rename from ui/site/css/build/mod.public-chats.transp.scss rename to ui/site/css/build/tv.embed.transp.scss index 211de493ab..ba32fb39f1 100644 --- a/ui/site/css/build/mod.public-chats.transp.scss +++ b/ui/site/css/build/tv.embed.transp.scss @@ -1,2 +1,2 @@ @import '../../../common/css/theme/transp'; -@import 'mod.public-chats'; +@import 'tv.embed'; diff --git a/ui/site/css/mod/_public-chats.scss b/ui/site/css/mod/_communication.scss similarity index 100% rename from ui/site/css/mod/_public-chats.scss rename to ui/site/css/mod/_communication.scss diff --git a/ui/site/css/user/_header.scss b/ui/site/css/user/_header.scss index 3a2c6c0063..278a8f06c1 100644 --- a/ui/site/css/user/_header.scss +++ b/ui/site/css/user/_header.scss @@ -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; diff --git a/ui/tournament/css/_app-header.scss b/ui/tournament/css/_app-header.scss index 97aaf9444f..6c9a3aca29 100644 --- a/ui/tournament/css/_app-header.scss +++ b/ui/tournament/css/_app-header.scss @@ -93,7 +93,7 @@ h1 { padding-left: 90px; letter-spacing: 2px; - .shield_trophy { + .shield-trophy { position: absolute; top: -8px; left: 12px; diff --git a/ui/tournament/src/view/header.ts b/ui/tournament/src/view/header.ts index 34320c8ec5..1581c65111 100644 --- a/ui/tournament/src/view/header.ts +++ b/ui/tournament/src/view/header.ts @@ -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 diff --git a/ui/tree/css/_extend.scss b/ui/tree/css/_extend.scss index 6f939ebb14..427fde8650 100644 --- a/ui/tree/css/_extend.scss +++ b/ui/tree/css/_extend.scss @@ -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; - } }