deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

fix anon dasher, do /mobile

es2016
Thibault Duplessis 2019-02-12 07:53:15 +07:00
parent 6e15806f60
commit 951e5c496b
23 changed files with 385 additions and 367 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/controllers/Main.scala
View File

@ -75,7 +75,7 @@ object Main extends LilaController {
def mobile = Open { implicit ctx =>
pageHit
OptionOk(Prismic getBookmark "mobile-apk") {
case (doc, resolver) => html.mobile.home(doc, resolver)
case (doc, resolver) => html.mobile(doc, resolver)
}
}

4
app/views/base/layout.scala
View File

@ -65,12 +65,12 @@ object layout {
</div>""")
private def anonDasher(playing: Boolean)(implicit ctx: Context) = spaceless(s"""<div class="dasher">
<a class="toggle anon">
<a class="toggle link anon">
<span class="hint--bottom-left" data-hint="${trans.preferences.txt()}"><span data-icon="%"></span></span>
</a>
<div id="dasher_app" class="dropdown" data-playing="$playing"></div>
</div>
<a href="${routes.Auth.login}?referrer=${currentPath}" class="signin button text">${trans.signIn.txt()}</a>""")
<a href="${routes.Auth.login}?referrer=${currentPath}" class="signin button">${trans.signIn.txt()}</a>""")
private val clinputLink = a(cls := "link")(span(dataIcon := "y"))

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

@ -39,8 +39,8 @@ object home {
trans.nbGamesInPlay.pluralFrag(nbRounds, span(nbRounds))
),
ctx.isMobileBrowser option {
if (HTTPRequest isAndroid ctx.req) views.html.mobile.bits.googlePlayButton
else if (HTTPRequest isIOS ctx.req) views.html.mobile.bits.appleStoreButton
if (HTTPRequest isAndroid ctx.req) views.html.mobile.googlePlayButton
else if (HTTPRequest isIOS ctx.req) views.html.mobile.appleStoreButton
else emptyFrag
}
)),

74
app/views/mobile.scala 100644
View File

@ -0,0 +1,74 @@
package views.html
import lila.api.Context
import lila.app.templating.Environment._
import lila.app.ui.ScalatagsTemplate._
import controllers.routes
object mobile {
def apply(apkDoc: io.prismic.Document, resolver: io.prismic.DocumentLinkResolver)(implicit ctx: Context) = base.layout(
title = "Mobile",
moreCss = responsiveCssTag("mobile"),
responsive = true
) {
div(cls := "mobile box box-pad")(
div(cls := "right-side")(
img(cls := "nexus5-playing", width := "268", height := "513", src := staticUrl("images/mobile/nexus5-playing.png"), alt := "Lichess mobile on nexus 5"),
img(cls := "qrcode", width := "200", height := "200", src := staticUrl("images/mobile/dynamic-qrcode.png"), alt := "Download QR code")
),
div(cls := "left-side")(
h1(
trans.playChessEverywhere.frag(),
googlePlayButton,
appleStoreButton,
div(cls := "apk")(
~apkDoc.getHtml("doc.content", resolver)
),
h2(trans.asFreeAsLichess.frag()),
ul(cls := "block")(
li(trans.builtForTheLoveOfChessNotMoney.frag()),
li(trans.everybodyGetsAllFeaturesForFree.frag()),
li(trans.zeroAdvertisement.frag()),
li("Entirely ,", a(href := "https://github.com/veloce/lichobile")("Open Source"))
),
h2(trans.fullFeatured.frag()),
ul(cls := "block")(
li(trans.phoneAndTablet.frag()),
li(trans.bulletBlitzClassical.frag()),
li(trans.correspondenceChess.frag()),
li(trans.onlineAndOfflinePlay.frag()),
li(trans.tournaments.frag()),
li(trans.puzzles.frag()),
li(trans.gameAnalysis.frag()),
li(trans.boardEditor.frag()),
li("Lichess TV"),
li(trans.followAndChallengeFriends.frag()),
li(trans.availableInNbLanguages.pluralSameFrag(80))
)
)
)
)
}
lazy val appleStoreButton = raw("""
<a class="store"
href="https://itunes.apple.com/us/app/lichess-free-online-chess/id968371784">
<img alt="Download on the Apple App Store"
width="172"
height="50"
src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg" />
</a>
""")
lazy val googlePlayButton = raw("""
<a class="store"
href="https://play.google.com/store/apps/details?id=org.lichess.mobileapp">
<img alt="Android app on Google Play"
width="192"
height="74"
src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png" />
</a>
""")
}

30
app/views/mobile/bits.scala
View File

@ -1,30 +0,0 @@
package views.html.mobile
import lila.api.Context
import lila.app.templating.Environment._
import lila.app.ui.ScalatagsTemplate._
import controllers.routes
object bits {
lazy val appleStoreButton = raw("""
<a class="store"
href="https://itunes.apple.com/us/app/lichess-free-online-chess/id968371784">
<img alt="Download on the Apple App Store"
width="172"
height="50"
src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Download_on_the_App_Store_Badge.svg" />
</a>
""")
lazy val googlePlayButton = raw("""
<a class="store"
href="https://play.google.com/store/apps/details?id=org.lichess.mobileapp">
<img alt="Android app on Google Play"
width="192"
height="74"
src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png" />
</a>
""")
}

46
app/views/mobile/home.scala.html
View File

@ -1,46 +0,0 @@
@(apkDoc: io.prismic.Document, resolver: io.prismic.DocumentLinkResolver)(implicit ctx: Context)
@base.layout(
title = "Mobile",
moreCss = cssTag("mobile.css")) {
<div class="mobile content_box small_box clearfix">
<div class="right-side">
<img class="nexus5-playing" width="268" height="513" src="@staticUrl("images/mobile/nexus5-playing.png")" alt="Lichess mobile on nexus 5" />
<img class="qrcode" width="200" height="200" src="@staticUrl("images/mobile/dynamic-qrcode.png")" alt="Download QR code" />
</div>
<div class="left-side">
<h1>@trans.playChessEverywhere()</h1>
@bits.googlePlayButton.toHtml
@bits.appleStoreButton.toHtml
<div class="apk" style="margin-top: 20px">
@Html(~apkDoc.getHtml("doc.content", resolver))
</div>
<h2>@trans.asFreeAsLichess()</h2>
<ul class="block">
<li>@trans.builtForTheLoveOfChessNotMoney()</li>
<li>@trans.everybodyGetsAllFeaturesForFree()</li>
<li>@trans.zeroAdvertisement()</li>
<li>Entirely <a href="https://github.com/veloce/lichobile">Open Source</a></li>
</ul>
<h2>@trans.fullFeatured()</h2>
<ul class="block">
<li>@trans.phoneAndTablet()</li>
<li>@trans.bulletBlitzClassical()</li>
<li>@trans.correspondenceChess()</li>
<li>@trans.onlineAndOfflinePlay()</li>
<li>@trans.tournaments()</li>
<li>@trans.puzzles()</li>
<li>@trans.gameAnalysis()</li>
<li>@trans.boardEditor()</li>
<li>Lichess TV</li>
<li>@trans.followAndChallengeFriends()</li>
<li>@trans.availableInNbLanguages.pluralSame(80)</li>
</ul>
<div class="block">
<a href="https://github.com/veloce/lichobile">Lichess mobile</a> is built upon:
<a href="http://cordova.apache.org/">Cordova platform</a>,
<a href="https://mithril.js.org/">Mithril JS framework</a>.
</div>
</div>
</div>
}.toHtml

50
public/stylesheets/mobile.css
View File

@ -1,50 +0,0 @@
.mobile .right-side {
float: right;
width: 264px;
text-align: center;
}
.mobile .right-side .nexus5-playing {
margin: -40px 0 30px 0;
}
.mobile .right-side .qrcode {
margin-top: 20px;
}
.mobile .left-side {
width: 245px;
text-align: center;
}
.mobile h1 {
font-size: 4em;
display: block!important;
margin-bottom: 0.5em;
}
.mobile .store {
display: inline-block;
margin-top: 1em;
}
.mobile .left-side h2 {
margin-top: 30px;
font-size: 1.5em;
}
.mobile .left-side .block {
text-align: left;
margin: 10px 0 20px 0;
}
.mobile .left-side li {
list-style-type: none;
line-height: 1.5em;
padding-left: 2em;
text-indent: -1em;
}
.mobile .left-side li:before {
vertical-align: middle;
content:'\2713';
display:inline-block;
color: #759900;
font-weight: bold;
font-size: 1.8em;
padding:0 6px 0 0;
}
.left-side a{
color: #3893E8 !important;
}

3
ui/common/css/_lichess.scss
View File

@ -16,7 +16,8 @@
@import 'vendor/chessground/chessground';
@import 'component/header/header';
@import 'header/header';
@import 'component/mini-board';
@import 'component/box';
@import 'component/button';

5
ui/common/css/component/header/_buttons.scss → ui/common/css/header/_buttons.scss
View File

@ -5,7 +5,7 @@
& .link {
color: $c-font;
font-size: 1.1rem;
padding: 0 .6rem;
padding: 0 .7rem;
display: flex;
align-items: center;
&:hover {
@ -52,6 +52,9 @@
display: block;
}
}
& .signin {
margin-right: 1rem;
}
}
#user_tag {
padding-right: 1rem;

0
ui/common/css/component/header/_clinput.scss → ui/common/css/header/_clinput.scss
View File

0
ui/common/css/component/header/_header.scss → ui/common/css/header/_header.scss
View File

0
ui/common/css/component/header/_title.scss → ui/common/css/header/_title.scss
View File

0
ui/common/css/component/header/_topnav-hidden.scss → ui/common/css/header/_topnav-hidden.scss
View File

0
ui/common/css/component/header/_topnav-visible.scss → ui/common/css/header/_topnav-visible.scss
View File

150
ui/dasher/css/_board.scss 100644
View File

@ -0,0 +1,150 @@
#dasher_app .theme {
& .list {
margin: 5px 0;
display: flex;
flex-flow: row wrap;
}
& .list a {
flex: 0 0 50%;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
}
& .list span {
display: block;
width: 64px;
height: 32px;
box-sizing: border-box;
}
&.d3 .list span {
width: 66px;
height: 30px;
transition: transform 0.3s;
}
& .list a:hover {
filter: brightness(1.1);
}
& .list a:hover span {
transform: scale(1.05);
}
& .list a.active {
background-color: $c-font;
}
&.d2 {
.blue {
background-image: url(../images/board/svg/blue.svg);
background-size: 256px;
}
.blue2 {
background-image: url(../images/board/blue2.thumbnail.jpg);
}
.wood2 {
background-image: url(../images/board/wood2.thumbnail.jpg);
}
.wood3 {
background-image: url(../images/board/wood3.thumbnail.jpg);
}
.blue3 {
background-image: url(../images/board/blue3.thumbnail.jpg);
}
.marble {
background-image: url(../images/board/marble.thumbnail.jpg);
}
.brown {
background-image: url(../images/board/svg/brown.svg);
background-size: 256px;
}
.green {
background-image: url(../images/board/svg/green.svg);
background-size: 256px;
}
.olive {
background-image: url(../images/board/olive.thumbnail.jpg);
}
.purple {
background-image: url(../images/board/svg/purple.svg);
background-size: 256px;
}
.grey {
background-image: url(../images/board/grey.thumbnail.jpg);
}
.wood {
background-image: url(../images/board/wood.thumbnail.jpg);
}
.canvas {
background-image: url(../images/board/canvas2.thumbnail.jpg);
}
.leather {
background-image: url(../images/board/leather.thumbnail.jpg);
}
.metal {
background-image: url(../images/board/metal.thumbnail.jpg);
}
.maple {
background-image: url(../images/board/maple.thumbnail.jpg);
}
}
&.d3 {
& .Black-White-Aluminium {
background-image: url(../images/staunton/board/Black-White-Aluminium.thumbnail.png);
}
& .Brushed-Aluminium {
background-image: url(../images/staunton/board/Brushed-Aluminium.thumbnail.png);
}
& .China-Blue {
background-image: url(../images/staunton/board/China-Blue.thumbnail.png);
}
& .China-Green {
background-image: url(../images/staunton/board/China-Green.thumbnail.png);
}
& .China-Grey {
background-image: url(../images/staunton/board/China-Grey.thumbnail.png);
}
& .China-Scarlet {
background-image: url(../images/staunton/board/China-Scarlet.thumbnail.png);
}
& .China-Yellow {
background-image: url(../images/staunton/board/China-Yellow.thumbnail.png);
}
& .Classic-Blue {
background-image: url(../images/staunton/board/Classic-Blue.thumbnail.png);
}
& .Transparent-Glass {
background-image: url(../images/staunton/board/Glass.thumbnail.png);
}
& .Gold-Silver {
background-image: url(../images/staunton/board/Gold-Silver.thumbnail.png);
}
& .Green-Glass {
background-image: url(../images/staunton/board/Green-Glass.thumbnail.png);
}
& .Light-Wood {
background-image: url(../images/staunton/board/Light-Wood.thumbnail.png);
}
& .Power-Coated {
background-image: url(../images/staunton/board/Power-Coated.thumbnail.png);
}
& .Purple-Black {
background-image: url(../images/staunton/board/Purple-Black.thumbnail.png);
}
& .Rosewood {
background-image: url(../images/staunton/board/Rosewood.thumbnail.png);
}
& .Wood-Glass {
background-image: url(../images/staunton/board/Wood-Glass.thumbnail.png);
}
& .Wax {
background-image: url(../images/staunton/board/Wax.thumbnail.png);
}
& .Jade {
background-image: url(../images/staunton/board/Jade.thumbnail.png);
}
& .Marble {
background-image: url(../images/board/3d/marble.thumbnail.png);
}
& .Woodi {
background-image: url(../images/board/3d/woodi.thumbnail.png);
}
}
}

238
ui/dasher/css/_dasher.scss
View File

@ -1,3 +1,7 @@
@import 'link';
@import 'board';
@import 'piece';
#dasher_app {
width: 225px;
border-radius: $box-radius-size 0 0 $box-radius-size;
@ -5,48 +9,6 @@
& .spinner {
margin: 20px auto;
}
& .links,
& .subs {
padding: 5px 0;
}
& .links a,
& .links button,
& .subs .sub {
display: block;
padding: 0.5rem 1rem;
white-space: nowrap;
overflow: hidden;
}
& .links a:hover,
& .links button:hover,
& .subs .sub:hover {
background: $c-dasher;
color: $c-dasher-over;
}
& .logout button:hover {
background: $c-error;
}
& .links button {
width: 100%;
text-align: left;
border: 0;
background: none;
}
& .subs {
border-top: $border;
}
.sub {
&::before {
float: right;
font-size: 80%;
margin-top: 0.25rem;
color: $c-dasher;
}
&:hover::before {
color: $c-dasher-over;
opacity: 0.9;
}
}
& .status {
display: block;
position: relative;
@ -192,196 +154,4 @@
& .board .slider {
margin-top: 1rem;
}
& .theme {
& .list {
margin: 5px 0;
display: flex;
flex-flow: row wrap;
}
& .list a {
flex: 0 0 50%;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
}
& .list span {
display: block;
width: 64px;
height: 32px;
box-sizing: border-box;
}
&.d3 .list span {
width: 66px;
height: 30px;
transition: transform 0.3s;
}
& .list a:hover {
filter: brightness(1.1);
}
& .list a:hover span {
transform: scale(1.05);
}
& .list a.active {
background-color: $c-font;
}
}
& .piece {
piece {
position: absolute;
width: 12.5%;
height: 12.5%;
top: 0;
left: 0;
background-size: cover;
z-index: 2; /* no less than 2 */
pointer-events: none;
}
& .list {
display: flex;
flex-flow: row wrap;
background: url(../images/board/darksquares.jpg);
box-shadow: inset 0 7px 20px 3px #777;
}
& .no-square {
width: 75px;
height: 75px;
position: relative;
}
& .no-square:hover {
background: rgba(250, 250, 250, 0.15);
}
& .no-square.active {
background: fade-out($c-dasher, 0.3);
}
& piece {
width: 100%;
height: 100%;
}
&.d3 piece {
left: 0;
top: 0;
background-size: cover;
background-position: 0 67%;
}
}
& .theme.d2 {
.blue {
background-image: url(../images/board/svg/blue.svg);
background-size: 256px;
}
.blue2 {
background-image: url(../images/board/blue2.thumbnail.jpg);
}
.wood2 {
background-image: url(../images/board/wood2.thumbnail.jpg);
}
.wood3 {
background-image: url(../images/board/wood3.thumbnail.jpg);
}
.blue3 {
background-image: url(../images/board/blue3.thumbnail.jpg);
}
.marble {
background-image: url(../images/board/marble.thumbnail.jpg);
}
.brown {
background-image: url(../images/board/svg/brown.svg);
background-size: 256px;
}
.green {
background-image: url(../images/board/svg/green.svg);
background-size: 256px;
}
.olive {
background-image: url(../images/board/olive.thumbnail.jpg);
}
.purple {
background-image: url(../images/board/svg/purple.svg);
background-size: 256px;
}
.grey {
background-image: url(../images/board/grey.thumbnail.jpg);
}
.wood {
background-image: url(../images/board/wood.thumbnail.jpg);
}
.canvas {
background-image: url(../images/board/canvas2.thumbnail.jpg);
}
.leather {
background-image: url(../images/board/leather.thumbnail.jpg);
}
.metal {
background-image: url(../images/board/metal.thumbnail.jpg);
}
.maple {
background-image: url(../images/board/maple.thumbnail.jpg);
}
}
& .theme.d3 {
& .Black-White-Aluminium {
background-image: url(../images/staunton/board/Black-White-Aluminium.thumbnail.png);
}
& .Brushed-Aluminium {
background-image: url(../images/staunton/board/Brushed-Aluminium.thumbnail.png);
}
& .China-Blue {
background-image: url(../images/staunton/board/China-Blue.thumbnail.png);
}
& .China-Green {
background-image: url(../images/staunton/board/China-Green.thumbnail.png);
}
& .China-Grey {
background-image: url(../images/staunton/board/China-Grey.thumbnail.png);
}
& .China-Scarlet {
background-image: url(../images/staunton/board/China-Scarlet.thumbnail.png);
}
& .China-Yellow {
background-image: url(../images/staunton/board/China-Yellow.thumbnail.png);
}
& .Classic-Blue {
background-image: url(../images/staunton/board/Classic-Blue.thumbnail.png);
}
& .Transparent-Glass {
background-image: url(../images/staunton/board/Glass.thumbnail.png);
}
& .Gold-Silver {
background-image: url(../images/staunton/board/Gold-Silver.thumbnail.png);
}
& .Green-Glass {
background-image: url(../images/staunton/board/Green-Glass.thumbnail.png);
}
& .Light-Wood {
background-image: url(../images/staunton/board/Light-Wood.thumbnail.png);
}
& .Power-Coated {
background-image: url(../images/staunton/board/Power-Coated.thumbnail.png);
}
& .Purple-Black {
background-image: url(../images/staunton/board/Purple-Black.thumbnail.png);
}
& .Rosewood {
background-image: url(../images/staunton/board/Rosewood.thumbnail.png);
}
& .Wood-Glass {
background-image: url(../images/staunton/board/Wood-Glass.thumbnail.png);
}
& .Wax {
background-image: url(../images/staunton/board/Wax.thumbnail.png);
}
& .Jade {
background-image: url(../images/staunton/board/Jade.thumbnail.png);
}
& .Marble {
background-image: url(../images/board/3d/marble.thumbnail.png);
}
& .Woodi {
background-image: url(../images/board/3d/woodi.thumbnail.png);
}
}
}

44
ui/dasher/css/_link.scss 100644
View File

@ -0,0 +1,44 @@
#dasher_app {
& .links,
& .subs {
padding: 5px 0;
}
& .links a,
& .links button,
& .subs .sub {
display: block;
padding: 0.5rem 1rem;
white-space: nowrap;
overflow: hidden;
}
& .links a:hover,
& .links button:hover,
& .subs .sub:hover {
background: $c-dasher;
color: $c-dasher-over;
}
& .logout button:hover {
background: $c-error;
}
& .links button {
width: 100%;
text-align: left;
border: 0;
background: none;
}
& .subs {
border-top: $border;
}
& .sub {
&::before {
float: right;
font-size: 80%;
margin-top: 0.25rem;
color: $c-dasher;
}
&:hover::before {
color: $c-dasher-over;
opacity: 0.9;
}
}
}

41
ui/dasher/css/_piece.scss 100644
View File

@ -0,0 +1,41 @@
#dasher_app {
& .piece {
piece {
position: absolute;
width: 12.5%;
height: 12.5%;
top: 0;
left: 0;
background-size: cover;
z-index: 2; /* no less than 2 */
pointer-events: none;
}
& .list {
display: flex;
flex-flow: row wrap;
background: url(../images/board/darksquares.jpg);
box-shadow: inset 0 7px 20px 3px #777;
}
& .no-square {
width: 75px;
height: 75px;
position: relative;
}
& .no-square:hover {
background: rgba(250, 250, 250, 0.15);
}
& .no-square.active {
background: fade-out($c-dasher, 0.3);
}
& piece {
width: 100%;
height: 100%;
}
&.d3 piece {
left: 0;
top: 0;
background-size: cover;
background-position: 0 67%;
}
}
}

52
ui/site/css/_mobile.scss 100644
View File

@ -0,0 +1,52 @@
.mobile {
& .right-side {
float: right;
width: 264px;
text-align: center;
}
& .right-side .nexus5-playing {
margin: -40px 0 30px 0;
}
& .right-side .qrcode {
margin-top: 20px;
}
& .left-side {
width: 245px;
text-align: center;
}
& h1 {
font-size: 4em;
display: block!important;
margin-bottom: 0.5em;
}
& .store {
display: inline-block;
margin-top: 1em;
}
& .left-side h2 {
margin-top: 30px;
font-size: 1.5em;
}
& .left-side .block {
text-align: left;
margin: 10px 0 20px 0;
}
& .left-side li {
list-style-type: none;
line-height: 1.5em;
padding-left: 2em;
text-indent: -1em;
}
& .left-side li:before {
vertical-align: middle;
content:'\2713';
display:inline-block;
color: #759900;
font-weight: bold;
font-size: 1.8em;
padding:0 6px 0 0;
}
& .left-side a{
color: #3893E8 !important;
}
}

3
ui/site/css/build/_mobile.scss 100644
View File

@ -0,0 +1,3 @@
$main-max-width: 1000px;
@import '../../../common/css/plugin';
@import '../mobile';

2
ui/site/css/build/mobile.dark.scss 100644
View File

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

2
ui/site/css/build/mobile.light.scss 100644
View File

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

2
ui/site/css/build/mobile.transp.scss 100644
View File

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