deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

blog design

v2
Thibault Duplessis 2019-05-03 22:11:52 +07:00
parent 57e9028f01
commit a4dd188eee
4 changed files with 85 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/views/blog/bits.scala
View File

@ -9,27 +9,21 @@ import controllers.routes
object bits {
def layout(title: String, openGraph: Option[lila.app.ui.OpenGraph] = None, moreJs: Frag = emptyFrag)(body: Modifier*)(implicit ctx: Context) =
views.html.base.layout(
title = title,
moreCss = cssTag("blog"),
moreJs = frag(prismicJs, moreJs),
openGraph = openGraph,
csp = defaultCsp.withPrismic(isGranted(_.Prismic)).some
) {
main(cls := "blog page-small box box-pad")(body)
}
def metas(doc: io.prismic.Document)(implicit ctx: Context, prismic: lila.blog.BlogApi.Context) =
div(cls := "meta")(
doc.getDate("blog.date").map { date =>
span(cls := "text", dataIcon := "p")(semanticDate(date.value.toDateTimeAtStartOfDay))
},
doc.getText("blog.author").map { author =>
span(cls := "text", dataIcon := "r")(richText(author))
},
doc.getText("blog.category").map { categ =>
span(cls := "text", dataIcon := "t")(categ)
}
private[blog] def metas(doc: io.prismic.Document)(implicit ctx: Context, prismic: lila.blog.BlogApi.Context) =
div(cls := "meta-headline")(
div(cls := "meta")(
doc.getDate("blog.date").map { date =>
span(cls := "text", dataIcon := "p")(semanticDate(date.value.toDateTimeAtStartOfDay))
},
doc.getText("blog.author").map { author =>
span(cls := "text", dataIcon := "r")(richText(author))
},
doc.getText("blog.category").map { categ =>
span(cls := "text", dataIcon := "t")(categ)
}
),
strong(cls := "headline")(doc.getHtml("blog.shortlede", prismic.linkResolver).map(raw))
)
private[blog] def csp(implicit ctx: Context) = defaultCsp.withPrismic(isGranted(_.Prismic)).some
}

64
app/views/blog/index.scala
View File

@ -10,37 +10,43 @@ import controllers.routes
object index {
def apply(pager: Paginator[io.prismic.Document])(implicit ctx: Context, prismic: lila.blog.BlogApi.Context) =
bits.layout(title = "Blog", moreJs = infiniteScrollTag)(
div(cls := "box__top")(
h1("Lichess Official Blog"),
a(cls := "atom", href := routes.Blog.atom, dataIcon := "3")
),
div(cls := "list infinitescroll")(
pager.currentPageResults.map { doc =>
st.article(cls := "paginated")(
doc.getText("blog.title").map { title =>
h2(a(href := routes.Blog.show(doc.id, doc.slug, prismic.maybeRef))(title))
},
bits.metas(doc),
strong(cls := "shortlede")(doc.getHtml("blog.shortlede", prismic.linkResolver).map(raw)),
doc.getImage("blog.image", "main").map { img =>
div(cls := "illustration")(
a(href := routes.Blog.show(doc.id, doc.slug, ref = prismic.maybeRef))(st.img(src := img.url))
)
},
div(cls := "body")(
doc.getStructuredText("blog.body").map { body =>
raw(lila.blog.BlogApi.extract(body))
},
p(cls := "more")(
a(cls := "button", href := routes.Blog.show(doc.id, doc.slug, ref = prismic.maybeRef), dataIcon := "G")(
" Continue reading this post"
views.html.base.layout(
title = "Blog",
moreCss = cssTag("blog"),
csp = bits.csp,
moreJs = infiniteScrollTag
)(
main(cls := "blog list page-small box")(
div(cls := "box__top")(
h1("Lichess Official Blog"),
a(cls := "atom", href := routes.Blog.atom, dataIcon := "3")
),
div(cls := "list infinitescroll")(
pager.currentPageResults.map { doc =>
st.article(cls := "paginated")(
doc.getText("blog.title").map { title =>
h2(a(href := routes.Blog.show(doc.id, doc.slug, prismic.maybeRef))(title))
},
bits.metas(doc),
doc.getImage("blog.image", "main").map { img =>
div(cls := "illustration")(
a(href := routes.Blog.show(doc.id, doc.slug, ref = prismic.maybeRef))(st.img(src := img.url))
)
},
div(cls := "body")(
doc.getStructuredText("blog.body").map { body =>
raw(lila.blog.BlogApi.extract(body))
},
p(cls := "more")(
a(cls := "button", href := routes.Blog.show(doc.id, doc.slug, ref = prismic.maybeRef), dataIcon := "G")(
" Continue reading this post"
)
)
)
)
)
},
pagerNext(pager, np => routes.Blog.index(np, none).url)
)
},
pagerNext(pager, np => routes.Blog.index(np, none).url)
)
)
)
}

9
app/views/blog/show.scala
View File

@ -9,7 +9,7 @@ import controllers.routes
object show {
def apply(doc: io.prismic.Document)(implicit ctx: Context, prismic: lila.blog.BlogApi.Context) =
bits.layout(
views.html.base.layout(
title = s"${~doc.getText("blog.title")} | Blog",
moreJs = jsAt("compiled/embed-analyse.js"),
openGraph = lila.app.ui.OpenGraph(
@ -18,15 +18,16 @@ object show {
title = ~doc.getText("blog.title"),
url = s"$netBaseUrl${routes.Blog.show(doc.id, doc.slug).url}",
description = ~doc.getText("blog.shortlede")
).some
).some,
moreCss = cssTag("blog"),
csp = bits.csp
)(
div(id := doc.id, cls := s"post ${doc.getText("blog.cssClasses")}")(
main(cls := s"blog page-small box post ${~doc.getText("blog.cssClasses")}")(
h1(
a(href := routes.Blog.index(), dataIcon := "I", cls := "text"),
doc.getText("blog.title")
),
bits.metas(doc),
strong(cls := "shortlede")(doc.getHtml("blog.shortlede", prismic.linkResolver).map(raw)),
doc.getImage("blog.image", "main").map { img =>
div(cls := "illustration")(st.img(src := img.url))
},

47
ui/site/css/_blog.scss
View File

@ -3,20 +3,32 @@
font-size: 2.6em;
color: $c-accent;
}
.meta {
.meta-headline {
@extend %box-shadow;
background: $c-bg-zebra;
padding: 1.4rem 0 .4rem 0;
text-align: center;
margin: 20px 0;
}
.meta span {
display:inline-block;
margin-right: 10px;
.meta {
span {
display:inline-block;
margin-right: 2em;
}
margin-bottom: 1.4rem;
}
.headline {
display: block;
font-size: 1.3em;
font-style: italic;
font-weight: normal;
}
.illustration,
[data-oembed] {
text-align: center;
}
.illustration img {
max-height: 300px;
max-height: 24em;
margin: 3em 0;
}
img,
.block-img {
@ -29,20 +41,18 @@
twitter-widget {
margin: 30px auto!important;
}
.post.no-icon .illustration {
&.post.no-icon .illustration {
display: none;
}
.shortlede {
display: block;
text-align: center;
font-size: 1.4em;
font-weight: normal;
font-style: italic;
margin: 20px 0;
&.post h1 {
a {
font-size: .6em;
vertical-align: middle;
}
}
.body {
font-size: 1.2em;
margin: 20px 0 60px 0;
margin: 0 var(--box-padding) 4em var(--box-padding);
cursor: initial;
line-height: 1.8;
strong {
@ -88,18 +98,19 @@
}
}
.list {
&.list {
article {
margin: 1em 0 5em 0;
margin: 3em 0 7em 0;
}
h2 {
text-align: center;
border-bottom: $border;
margin-bottom: 1rem;
}
.meta {
text-align: center;
}
.more {
margin-top: 2em;
text-align: center;
}
}