lila/app/views/base/layout.scala.html

208 lines
8.3 KiB
HTML

@(
title: String,
fullTitle: Option[String] = None,
baseline: Option[Html] = None,
side: Option[Html] = None,
menu: Option[Html] = None,
chat: Option[Html] = None,
underchat: Option[Html] = None,
robots: Boolean = isGloballyCrawlable,
moreCss: Html = Html(""),
moreJs: Html = Html(""),
zen: Boolean = false,
playing: Boolean = false,
openGraph: Option[lila.app.ui.OpenGraph] = None,
atom: Option[Html] = None,
chessground: Boolean = true,
zoomable: Boolean = false,
asyncJs: Boolean = false)(body: Html)(implicit ctx: Context)
<!doctype html>
<html lang="@lang.language">
<!-- lichess.org is open source! Checkout the github repo: https://github.com/ornicar/lila -->
<head>
<meta charset="utf-8">
<title>@if(!isProd){ [dev] }@fullTitle.getOrElse{@title • lichess.org}</title>
<link href='//fonts.googleapis.com/css?family=Noto+Sans:400,700|Roboto:300' rel='stylesheet'>
<link href="//fonts.googleapis.com/css?family=Roboto+Mono:500&text=0123456789:." rel="stylesheet">
@ctx.currentBg match {
case "dark" => { @cssTag("dark.css") }
case "transp" => { @cssTag("dark.css")@cssTag("transp.css") }
case _ => {}
}
@cssTag("common.css")
@cssTag("board.css")
@if(zoomable) {
@ctx.zoom.map { z =>
@zoomStyle(z / 100f, ctx.pref.is3d) }
}
@if(ctx.pref.is3d) { @cssTag("board-3d.css") }
@if(ctx.pref.coords == 1) { @cssTag("board.coords.inner.css") }
@if(ctx.pageData.inquiry.isDefined) { @cssTag("inquiry.css") }
@moreCss
<link id="piece-sprite" href="@staticUrl(s"stylesheets/piece/${ctx.currentPieceSet}.css?v=${ctx.pageData.assetVersion}")" type="text/css" rel="stylesheet"/>
<meta content="@openGraph.fold(trans.siteDescription())(o => escapeHtml(o.description))" name="description">
<link id="favicon" rel="shortcut icon" href="@staticUrl("images/favicon-32-white.png")" type="image/x-icon" />
@if(!robots) {
<meta content="noindex, nofollow" name="robots">
}
<meta name="google" content="notranslate" />
@openGraph.map(_.html)
@atom.getOrElse {
<link href="@routes.Blog.atom()" type="application/atom+xml" rel="alternate" title="Latest blog posts" />
}
<link rel="mask-icon" href="@staticUrl("favicon.svg")" color="black">
@ctx.transpBgImg.map { img =>
<style type="text/css" id="bg-data">body.transp::before{background-image:url('@img');}</style>
}
<link rel="preload" href="@staticUrl("font74/fonts/lichess.woff")" as="font" type="font/woff" crossorigin/>
<meta name="twitter:site" content="@@lichessorg" />
</head>
<body class="preload base @List(
ctx.currentTheme.cssClass,
ctx.currentTheme3d.cssClass,
if (ctx.currentBg == "transp") "dark transp" else ctx.currentBg,
ctx.currentPieceSet3d,
ctx.pref.pieceNotationIsLetter ?? "piece_letter",
ctx.pref.isZen ?? "zen",
ctx.blindMode ?? "blind_mode",
ctx.kid ?? "kid",
ctx.isMobileBrowser ?? "mobile",
playing ?? "playing fixed-scroll").mkString(" ")"
@if(!isProd){data-dev="true"}
@ctx.userId.map {id => data-user="@id"}
data-sound-set="@ctx.currentSoundSet"
data-asset-url="@assetBaseUrl"
data-asset-version="@ctx.pageData.assetVersion"
@ctx.zoom.map { zoom => data-zoom="@zoom" }>
<form id="blind_mode" action="@routes.Main.toggleBlindMode" method="POST">
<input type="hidden" name="enable" value="@ctx.blindMode.fold(0,1)" />
<input type="hidden" name="redirect" value="@ctx.req.path" />
<button type="submit">Accessibility: @ctx.blindMode.fold("Disable", "Enable") blind mode</button>
</form>
<div id="site_description">@trans.siteDescription()</div>
@ctx.pageData.inquiry.map { inquiry =>
@mod.inquiry(inquiry)
}
<div id="top" class="@ctx.pref.is3d.fold("is3d", "is2d")">
@topmenu()
<div id="ham-plate" class="link hint--bottom" data-hint="@trans.menu()">
<div id="hamburger" data-icon="["></div>
</div>
@ctx.me.map { me =>
<div class="dasher">
<a id="user_tag" class="toggle link">@me.username</a>
<div id="dasher_app" class="dropdown"></div>
</div>
<div class="challenge_notifications">
<a id="challenge_notifications_tag" class="toggle link data-count" data-count="@ctx.nbChallenges">
<span class="hint--bottom-left" data-hint="@trans.challenges()">
<span data-icon="U"></span>
</span>
</a>
<div id="challenge_app" class="dropdown"></div>
</div>
<div class="site_notifications">
<a id="site_notifications_tag" class="toggle link data-count" data-count="@ctx.nbNotifications">
<span class="hint--bottom-left" data-hint="@trans.notifications()">
<span data-icon=""></span>
</span>
</a>
<div id="notify_app" class="dropdown"></div>
</div>
}.getOrElse {
<div class="dasher">
<a class="toggle anon">
<span class="hint--bottom-left" data-hint="@trans.preferences()">
<span data-icon="%"></span>
</span>
</a>
<div id="dasher_app" class="dropdown"@if(playing){ data-playing="true"}></div>
</div>
<a href="@routes.Auth.login?referrer=@currentPath" class="signin button text">@trans.signIn()</a>
}
@if(!zen) {
@if(ctx.teamNbRequests > 0) {
<a class="link data-count" href="@routes.Team.requests()" data-count="@ctx.teamNbRequests">
<span class="hint--bottom-left" data-hint="@trans.teams()">
<span data-icon="f"></span>
</span>
</a>
}
@if(isGranted(_.SeeReport)) {
<a class="link text data-count" href="@routes.Report.list" data-count="@reportNbUnprocessed" data-icon=""></a>
}
}
<a id="reconnecting" class="link" onclick="window.location.reload()" data-icon="B">&nbsp;@trans.reconnecting()</a>
</div>
<div class="content @ctx.pref.is3d.fold("is3d", "is2d")">
<div id="site_header">
<div id="notifications"></div>
<div class="board_left">
<h1>
<a id="site_title" href="@routes.Lobby.home">@if(ctx.kid){<span title="@trans.kidMode()" class="kiddo">😊</span>}lichess<span class="extension">.org</span></a>
</h1>
@baseline
@menu.map { side =>
<div class="side_menu">@side</div>
}
@side
@chat
</div>
@underchat.map { g =>
<div class="under_chat">@g</div>
}
</div>
<div id="lichess">
@body
</div>
</div>
@ctx.me.map { me =>
<div id="friend_box" data-preload="@ctx.onlineFriends.users.map(_.titleName).mkString(",")"
data-playing="@ctx.onlineFriends.playing.mkString(",")"
data-patrons="@ctx.onlineFriends.patrons.mkString(",")"
data-studying="@ctx.onlineFriends.studying.mkString(",")">
<div class="title"><strong class="online"> </strong> @trans.onlineFriends()</div>
<div class="content_wrap">
<div class="content list"></div>
<div class="nobody@if(ctx.onlineFriends.users.nonEmpty){ none}">
<span>@trans.noFriendsOnline()</span>
<a class="find button" href="@routes.User.opponents">
<span class="is3 text" data-icon="h">@trans.findFriends()</span>
</a>
</div>
</div>
</div>
}
@if(chessground) {@jsTag("vendor/chessground.min.js")}
@if(ctx.requiresFingerprint) { @fingerprintTag }
@jsAt(s"compiled/lichess.site${isProd??".min"}.js", async = asyncJs)
@moreJs
@embedJs {
lichess.quantity = @i18nJsQuantityFunction();
lichess.timeagoLocale = function(number, index) {
return [
['à l\'instant', 'dans un instant'],
['il y a %s secondes', 'dans %s secondes'],
['il y a 1 minute', 'dans 1 minute'],
['il y a %s minutes', 'dans %s minutes'],
['il y a 1 heure', 'dans 1 heure'],
['il y a %s heures', 'dans %s heures'],
['il y a 1 jour', 'dans 1 jour'],
['il y a %s jours', 'dans %s jours'],
['il y a 1 semaine', 'dans 1 semaine'],
['il y a %s semaines', 'dans %s semaines'],
['il y a 1 mois', 'dans 1 mois'],
['il y a %s mois', 'dans %s mois'],
['il y a 1 an', 'dans 1 an'],
['il y a %s ans', 'dans %s ans']
][index];
};
@if(lang.language != "en") {
@timeagoLangUrl.map { url =>
window.timeagoLocaleUrl = "@url";
}
}
}
</body>
</html>