404 UI
Thibault Duplessis
parent
9177e2de36
commit
5c31ec0dca
|
|
@ -56,6 +56,7 @@ trait ScalatagsPrefix {
|
|||
val section = tag("section")
|
||||
val article = tag("article")
|
||||
val aside = tag("aside")
|
||||
val frameBorder = attr("frameBorder")
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
package views.html
|
||||
package base
|
||||
|
||||
import lila.api.Context
|
||||
import lila.app.templating.Environment._
|
||||
import lila.app.ui.ScalatagsTemplate._
|
||||
|
||||
import controllers.routes
|
||||
|
||||
object notFound {
|
||||
|
||||
def apply()(implicit ctx: Context) = layout(
|
||||
title = "Page not found",
|
||||
moreJs = prismicJs,
|
||||
moreCss = responsiveCssTag("not-found"),
|
||||
responsive = true,
|
||||
csp = isGranted(_.Prismic) option defaultCsp.withPrismic(true)
|
||||
) {
|
||||
main(cls := "not-found page-small box box-pad")(
|
||||
header(
|
||||
h1("404"),
|
||||
div(
|
||||
strong("Page not found!"),
|
||||
p(
|
||||
"Return to ",
|
||||
a(href := routes.Lobby.home)("the homepage"),
|
||||
", or play this mini-game"
|
||||
)
|
||||
)
|
||||
),
|
||||
div(cls := "game")(
|
||||
iframe(
|
||||
src := staticUrl(s"vendor/ChessPursuit/bin-release/index.html"),
|
||||
st.frameBorder := 0,
|
||||
width := 400,
|
||||
height := 500
|
||||
),
|
||||
p(cls := "credits")(
|
||||
a(href := "https://github.com/Saturnyn/ChessPursuit")("ChessPursuit"),
|
||||
" courtesy of ",
|
||||
a(href := "https://github.com/Saturnyn")("Saturnyn")
|
||||
)
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
@()(implicit ctx: Context)
|
||||
|
||||
@base.layout(
|
||||
title = "Page not found",
|
||||
moreJs = prismicJs,
|
||||
moreCss = cssTag("notFound.css"),
|
||||
csp = isGranted(_.Prismic) option defaultCsp.withPrismic(true)) {
|
||||
<div class="content_box small_box">
|
||||
<header>
|
||||
<h1>404</h1>
|
||||
<strong>Page not found!</strong>
|
||||
<p>Return to <a class="underline" href="@routes.Lobby.home">the homepage</a>, or play this mini-game!<p>
|
||||
</header>
|
||||
<div class="game">
|
||||
<iframe
|
||||
src="@staticUrl(s"vendor/ChessPursuit/bin-release/index.html")"
|
||||
frameBorder='0'
|
||||
width="400"
|
||||
height="500">
|
||||
</iframe>
|
||||
<p class="credits">
|
||||
<a class="underline" href="https://github.com/Saturnyn/ChessPursuit">ChessPursuit</a>
|
||||
courtesy of
|
||||
<a class="underline" href="https://github.com/Saturnyn">Saturnyn</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
}.toHtml
|
||||
|
|
@ -20,7 +20,7 @@ moreJs = moreJs) {
|
|||
<div class="picture_wrap">
|
||||
@if(c.coach.hasPicture) {
|
||||
<a class="upload_picture" href="@routes.Coach.picture" title="Change/delete your profile picture">
|
||||
@pic(c, 250)
|
||||
@widget.pic(c, 250).toHtml
|
||||
</a>
|
||||
} else {
|
||||
<div class="upload_picture">
|
||||
|
|
@ -29,9 +29,7 @@ moreJs = moreJs) {
|
|||
}
|
||||
</div>
|
||||
<div class="overview">
|
||||
<h1>
|
||||
@c.user.title.map { t => @t }@c.user.profileOrDefault.nonEmptyRealName.getOrElse(c.user.username)
|
||||
</h1>
|
||||
<h1>@widget.titleName(c).toHtml</h1>
|
||||
<div class="todo" data-profile="@c.user.profileOrDefault.isComplete">
|
||||
<h3>TODO list before publishing your coach profile</h3>
|
||||
<ul></ul>
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
@(c: lila.coach.Coach.WithUser, size: Int)(implicit ctx: Context)
|
||||
@c.coach.picturePath.map { path =>
|
||||
<img width=@size height=@size class="picture" src="@dbImageUrl(path.value)" alt="@c.user.titleUsername lichess coach" />
|
||||
}.getOrElse {
|
||||
<img width=@size height=@size class="default picture" src="@staticUrl("images/coach-nopic.svg")" />
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
package views.html
|
||||
package coach
|
||||
|
||||
import lila.api.Context
|
||||
import lila.app.templating.Environment._
|
||||
import lila.app.ui.ScalatagsTemplate._
|
||||
|
||||
import controllers.routes
|
||||
|
||||
object picture {
|
||||
|
||||
def apply(c: lila.coach.Coach.WithUser, error: Option[String] = None)(implicit ctx: Context) =
|
||||
views.html.base.layout(
|
||||
title = s"${c.user.titleUsername} coach picture",
|
||||
moreJs = jsTag("coach.form.js"),
|
||||
moreCss = responsiveCssTag("coach.editor"),
|
||||
responsive = true
|
||||
) {
|
||||
main(cls := "coach-picture")(
|
||||
st.aside(cls := "coach-side")(
|
||||
a(href := routes.Coach.edit, cls := "text", dataIcon := "I")("Return to coach page form")
|
||||
),
|
||||
div(cls := "coach-main box")(
|
||||
div(cls := "top")(
|
||||
div(cls := "picture_wrap")(
|
||||
widget.pic(c, 250)
|
||||
),
|
||||
h1(widget.titleName(c))
|
||||
),
|
||||
div(cls := "forms")(
|
||||
error.map { e =>
|
||||
p(cls := "error")(e)
|
||||
},
|
||||
st.form(action := routes.Coach.pictureApply, enctype := "multipart/form-data", cls := "upload")(
|
||||
p("Max size: ", lila.db.Photographer.uploadMaxMb, "MB."),
|
||||
form3.file.image("picture"),
|
||||
button(tpe := "submit", cls := "button")("Upload profile picture")
|
||||
),
|
||||
c.coach.hasPicture option
|
||||
st.form(action := routes.Coach.pictureDelete, cls := "delete")(
|
||||
button(tpe := "submit", cls := "confirm button button-empty button-red")("Delete profile picture")
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
@(c: lila.coach.Coach.WithUser, error: Option[String] = None)(implicit ctx: Context)
|
||||
|
||||
@base.layout(title = s"${c.user.titleUsername} coach picture",
|
||||
moreJs = jsTag("coach.form.js"),
|
||||
moreCss = cssTags("form3.css", "coach.form.css")) {
|
||||
<div class="coach_picture content_box small_box no_padding">
|
||||
<h1 class="lichess_title">
|
||||
@userLink(c.user) coach picture
|
||||
</h1>
|
||||
<div class="picture_wrap">
|
||||
@pic(c, 200)
|
||||
</div>
|
||||
<div class="forms">
|
||||
@error.map { e =>
|
||||
<p class="error">@e</p>
|
||||
}
|
||||
@helper.form(action = routes.Coach.pictureApply, 'enctype -> "multipart/form-data", 'class -> "upload") {
|
||||
<p>Max size: @{lila.db.Photographer.uploadMaxMb}MB.</p>
|
||||
@form3.file.image("picture")
|
||||
<button type="submit" class="button">Upload profile picture</button>
|
||||
}
|
||||
@if(c.coach.hasPicture) {
|
||||
@helper.form(action = routes.Coach.pictureDelete, 'enctype -> "multipart/form-data", 'class -> "delete") {
|
||||
<button type="submit" class="button">Delete profile picture</button>
|
||||
}
|
||||
}
|
||||
<div class="cancel">
|
||||
<a href="@routes.Coach.edit" class="text" data-icon="I">Return to coach page form</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}.toHtml
|
||||
|
|
@ -9,16 +9,26 @@ import lila.common.paginator.Paginator
|
|||
import controllers.routes
|
||||
|
||||
object widget {
|
||||
|
||||
def titleName(c: lila.coach.Coach.WithUser) = frag(
|
||||
c.user.title.map { t => s"t " },
|
||||
c.user.realNameOrUsername
|
||||
)
|
||||
|
||||
def pic(c: lila.coach.Coach.WithUser, size: Int)(implicit ctx: Context) =
|
||||
c.coach.picturePath.map { path =>
|
||||
img(width := size, height := size, cls := "picture", src := dbImageUrl(path.value), alt := s"${c.user.titleUsername} lichess coach")
|
||||
}.getOrElse {
|
||||
img(width := size, height := size, cls := "default picture", src := staticUrl("images/coach-nopic.svg"))
|
||||
}
|
||||
|
||||
def apply(c: lila.coach.Coach.WithUser, link: Boolean)(implicit ctx: Context) = {
|
||||
val profile = c.user.profileOrDefault
|
||||
frag(
|
||||
link option a(cls := "overlay", href := routes.Coach.show(c.user.username)),
|
||||
pic(c, if (link) 300 else 350),
|
||||
div(cls := "overview")(
|
||||
(if (link) h2 else h1)(cls := "coach-name")(
|
||||
c.user.title.map { t => s"t " },
|
||||
c.user.realNameOrUsername
|
||||
),
|
||||
(if (link) h2 else h1)(cls := "coach-name")(titleName(c)),
|
||||
c.coach.profile.headline.map { h =>
|
||||
p(cls := s"headline ${if (h.size < 60) "small" else if (h.size < 120) "medium" else "large"}")(h)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,121 +0,0 @@
|
|||
.coach a {
|
||||
color: #3893E8!important;
|
||||
}
|
||||
.coach .top {
|
||||
/* background: #303F9F; */
|
||||
background: #639B24;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
}
|
||||
.coach .top a {
|
||||
color: #fff!important;
|
||||
}
|
||||
.coach .top a:hover {
|
||||
color: #fff!important;
|
||||
border-bottom: 1px dotted #fff;
|
||||
}
|
||||
.coach .top img.picture {
|
||||
flex: 0 0 250px;
|
||||
background: #888;
|
||||
}
|
||||
.coach .top .overview {
|
||||
padding: 15px 25px;
|
||||
box-sizing: border-box;
|
||||
height: 250px;
|
||||
max-height: 250px;
|
||||
}
|
||||
.coach .top h1 {
|
||||
font-family: 'Roboto';
|
||||
font-size: 33px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
padding: 6px 0 9px 0!important;
|
||||
text-shadow: none!important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.coach .top h1.large {
|
||||
letter-spacing: 2px;
|
||||
font-size: 30px;
|
||||
}
|
||||
.coach .top .headline {
|
||||
font-family: 'PT Serif', 'Noto Sans', 'Lucida Grande';
|
||||
font-size: 16px;
|
||||
padding: 0 0 20px 0!important;
|
||||
}
|
||||
.coach .top .headline.medium {
|
||||
font-size: 14px;
|
||||
padding-bottom: 15px!important;
|
||||
}
|
||||
.coach .top .headline.large {
|
||||
font-size: 13.5px;
|
||||
padding-bottom: 10px!important;
|
||||
}
|
||||
.coach .top table {
|
||||
line-height: 1.7;
|
||||
}
|
||||
.coach .top table th {
|
||||
opacity: 0.7;
|
||||
padding-right: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
.coach .top .rating td a > span {
|
||||
margin-left: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
body.dark .coach .studies h1 {
|
||||
color: #aaa;
|
||||
|
||||
.coach-side {
|
||||
margin: 50px 0 0 -35px;
|
||||
width: 226px;
|
||||
}
|
||||
@media (max-width: 1084px) {
|
||||
.coach-side {
|
||||
margin-left: 0!important;
|
||||
width: 196px!important;
|
||||
}
|
||||
}
|
||||
.coach-side .profile {
|
||||
text-align: right;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* review score */
|
||||
.br-widget {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.br-widget a {
|
||||
font: 25px "lichess";
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-decoration: none;
|
||||
margin-right: 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
.br-widget a:after {
|
||||
content: 't';
|
||||
color: #ccc;
|
||||
}
|
||||
body.dark .br-widget a:after {
|
||||
color: #555;
|
||||
}
|
||||
.br-widget a.br-active:after,
|
||||
.br-widget a.br-selected:after {
|
||||
color: #d59120!important;
|
||||
}
|
||||
.br-widget .br-current-rating {
|
||||
display: none;
|
||||
}
|
||||
.br-readonly a {
|
||||
font-size: 10px;
|
||||
margin-right: 0;
|
||||
cursor: default;
|
||||
}
|
||||
.br-readonly a.br-selected:after {
|
||||
margin-right: 0;
|
||||
color: #888!important;
|
||||
}
|
||||
body.dark .reviews .review {
|
||||
border-color: #3d3d3d;
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
.not-found {
|
||||
@extend %flex-column;
|
||||
align-items: center;
|
||||
& header {
|
||||
@extend %flex-center;
|
||||
}
|
||||
& header h1 {
|
||||
font-size: 7em;
|
||||
color: $c-font-dimmer;
|
||||
margin: 0 2rem 0 0;
|
||||
}
|
||||
& header strong {
|
||||
text-transform: uppercase;
|
||||
color: $c-font-dimmer;
|
||||
font-size: 2em;
|
||||
margin: 10px 0;
|
||||
display: block;
|
||||
}
|
||||
& .game {
|
||||
text-align: center;
|
||||
& iframe {
|
||||
margin: 1em 0 2em 0;
|
||||
}
|
||||
}
|
||||
& .credits {
|
||||
font-size: .9em;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
@import '../../../common/css/plugin';
|
||||
@import '../../../common/css/form/form3';
|
||||
@import '../coach/editor';
|
||||
@import '../coach/picture';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import '../../../common/css/plugin';
|
||||
@import '../not-found';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import '../../../common/css/theme/dark';
|
||||
@import 'not-found';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import '../../../common/css/theme/light';
|
||||
@import 'not-found';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import '../../../common/css/theme/transp';
|
||||
@import 'not-found';
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
@import 'layout';
|
||||
@import 'bar-rating';
|
||||
|
||||
.coach-edit {
|
||||
.coach-edit,
|
||||
.coach-picture {
|
||||
& .top {
|
||||
display: flex;
|
||||
line-height: 2;
|
||||
|
|
@ -20,9 +21,9 @@
|
|||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
.coach_picture .picture_wrap {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.coach-edit {
|
||||
|
||||
& .top .upload_picture {
|
||||
text-align: center;
|
||||
|
|
@ -59,22 +60,6 @@
|
|||
height: 12em;
|
||||
}
|
||||
|
||||
.coach_picture form {
|
||||
padding: 30px;
|
||||
border-top: 1px solid #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
.coach_picture form.delete button {
|
||||
color: red;
|
||||
}
|
||||
.coach_picture .cancel {
|
||||
padding: 40px;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
.coach_picture .forms > *:first-child {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
& .tabs {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
.coach-picture {
|
||||
& .picture_wrap {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& form {
|
||||
padding: 30px;
|
||||
border-top: $border;
|
||||
text-align: center;
|
||||
& input[type="file"] {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
& form.delete button {
|
||||
color: red;
|
||||
}
|
||||
& .cancel {
|
||||
padding: 40px;
|
||||
border-top: $border;
|
||||
}
|
||||
& .forms > *:first-child {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue