blog design
This commit is contained in:
parent
57e9028f01
commit
a4dd188eee
|
@ -9,27 +9,21 @@ import controllers.routes
|
||||||
|
|
||||||
object bits {
|
object bits {
|
||||||
|
|
||||||
def layout(title: String, openGraph: Option[lila.app.ui.OpenGraph] = None, moreJs: Frag = emptyFrag)(body: Modifier*)(implicit ctx: Context) =
|
private[blog] def metas(doc: io.prismic.Document)(implicit ctx: Context, prismic: lila.blog.BlogApi.Context) =
|
||||||
views.html.base.layout(
|
div(cls := "meta-headline")(
|
||||||
title = title,
|
div(cls := "meta")(
|
||||||
moreCss = cssTag("blog"),
|
doc.getDate("blog.date").map { date =>
|
||||||
moreJs = frag(prismicJs, moreJs),
|
span(cls := "text", dataIcon := "p")(semanticDate(date.value.toDateTimeAtStartOfDay))
|
||||||
openGraph = openGraph,
|
},
|
||||||
csp = defaultCsp.withPrismic(isGranted(_.Prismic)).some
|
doc.getText("blog.author").map { author =>
|
||||||
) {
|
span(cls := "text", dataIcon := "r")(richText(author))
|
||||||
main(cls := "blog page-small box box-pad")(body)
|
},
|
||||||
}
|
doc.getText("blog.category").map { categ =>
|
||||||
|
span(cls := "text", dataIcon := "t")(categ)
|
||||||
def metas(doc: io.prismic.Document)(implicit ctx: Context, prismic: lila.blog.BlogApi.Context) =
|
}
|
||||||
div(cls := "meta")(
|
),
|
||||||
doc.getDate("blog.date").map { date =>
|
strong(cls := "headline")(doc.getHtml("blog.shortlede", prismic.linkResolver).map(raw))
|
||||||
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 csp(implicit ctx: Context) = defaultCsp.withPrismic(isGranted(_.Prismic)).some
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,37 +10,43 @@ import controllers.routes
|
||||||
object index {
|
object index {
|
||||||
|
|
||||||
def apply(pager: Paginator[io.prismic.Document])(implicit ctx: Context, prismic: lila.blog.BlogApi.Context) =
|
def apply(pager: Paginator[io.prismic.Document])(implicit ctx: Context, prismic: lila.blog.BlogApi.Context) =
|
||||||
bits.layout(title = "Blog", moreJs = infiniteScrollTag)(
|
views.html.base.layout(
|
||||||
div(cls := "box__top")(
|
title = "Blog",
|
||||||
h1("Lichess Official Blog"),
|
moreCss = cssTag("blog"),
|
||||||
a(cls := "atom", href := routes.Blog.atom, dataIcon := "3")
|
csp = bits.csp,
|
||||||
),
|
moreJs = infiniteScrollTag
|
||||||
div(cls := "list infinitescroll")(
|
)(
|
||||||
pager.currentPageResults.map { doc =>
|
main(cls := "blog list page-small box")(
|
||||||
st.article(cls := "paginated")(
|
div(cls := "box__top")(
|
||||||
doc.getText("blog.title").map { title =>
|
h1("Lichess Official Blog"),
|
||||||
h2(a(href := routes.Blog.show(doc.id, doc.slug, prismic.maybeRef))(title))
|
a(cls := "atom", href := routes.Blog.atom, dataIcon := "3")
|
||||||
},
|
),
|
||||||
bits.metas(doc),
|
div(cls := "list infinitescroll")(
|
||||||
strong(cls := "shortlede")(doc.getHtml("blog.shortlede", prismic.linkResolver).map(raw)),
|
pager.currentPageResults.map { doc =>
|
||||||
doc.getImage("blog.image", "main").map { img =>
|
st.article(cls := "paginated")(
|
||||||
div(cls := "illustration")(
|
doc.getText("blog.title").map { title =>
|
||||||
a(href := routes.Blog.show(doc.id, doc.slug, ref = prismic.maybeRef))(st.img(src := img.url))
|
h2(a(href := routes.Blog.show(doc.id, doc.slug, prismic.maybeRef))(title))
|
||||||
)
|
},
|
||||||
},
|
bits.metas(doc),
|
||||||
div(cls := "body")(
|
doc.getImage("blog.image", "main").map { img =>
|
||||||
doc.getStructuredText("blog.body").map { body =>
|
div(cls := "illustration")(
|
||||||
raw(lila.blog.BlogApi.extract(body))
|
a(href := routes.Blog.show(doc.id, doc.slug, ref = prismic.maybeRef))(st.img(src := img.url))
|
||||||
},
|
)
|
||||||
p(cls := "more")(
|
},
|
||||||
a(cls := "button", href := routes.Blog.show(doc.id, doc.slug, ref = prismic.maybeRef), dataIcon := "G")(
|
div(cls := "body")(
|
||||||
" Continue reading this post"
|
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,7 +9,7 @@ import controllers.routes
|
||||||
object show {
|
object show {
|
||||||
|
|
||||||
def apply(doc: io.prismic.Document)(implicit ctx: Context, prismic: lila.blog.BlogApi.Context) =
|
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",
|
title = s"${~doc.getText("blog.title")} | Blog",
|
||||||
moreJs = jsAt("compiled/embed-analyse.js"),
|
moreJs = jsAt("compiled/embed-analyse.js"),
|
||||||
openGraph = lila.app.ui.OpenGraph(
|
openGraph = lila.app.ui.OpenGraph(
|
||||||
|
@ -18,15 +18,16 @@ object show {
|
||||||
title = ~doc.getText("blog.title"),
|
title = ~doc.getText("blog.title"),
|
||||||
url = s"$netBaseUrl${routes.Blog.show(doc.id, doc.slug).url}",
|
url = s"$netBaseUrl${routes.Blog.show(doc.id, doc.slug).url}",
|
||||||
description = ~doc.getText("blog.shortlede")
|
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(
|
h1(
|
||||||
a(href := routes.Blog.index(), dataIcon := "I", cls := "text"),
|
a(href := routes.Blog.index(), dataIcon := "I", cls := "text"),
|
||||||
doc.getText("blog.title")
|
doc.getText("blog.title")
|
||||||
),
|
),
|
||||||
bits.metas(doc),
|
bits.metas(doc),
|
||||||
strong(cls := "shortlede")(doc.getHtml("blog.shortlede", prismic.linkResolver).map(raw)),
|
|
||||||
doc.getImage("blog.image", "main").map { img =>
|
doc.getImage("blog.image", "main").map { img =>
|
||||||
div(cls := "illustration")(st.img(src := img.url))
|
div(cls := "illustration")(st.img(src := img.url))
|
||||||
},
|
},
|
||||||
|
|
|
@ -3,20 +3,32 @@
|
||||||
font-size: 2.6em;
|
font-size: 2.6em;
|
||||||
color: $c-accent;
|
color: $c-accent;
|
||||||
}
|
}
|
||||||
.meta {
|
.meta-headline {
|
||||||
|
@extend %box-shadow;
|
||||||
|
background: $c-bg-zebra;
|
||||||
|
padding: 1.4rem 0 .4rem 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 20px 0;
|
|
||||||
}
|
}
|
||||||
.meta span {
|
.meta {
|
||||||
display:inline-block;
|
span {
|
||||||
margin-right: 10px;
|
display:inline-block;
|
||||||
|
margin-right: 2em;
|
||||||
|
}
|
||||||
|
margin-bottom: 1.4rem;
|
||||||
|
}
|
||||||
|
.headline {
|
||||||
|
display: block;
|
||||||
|
font-size: 1.3em;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
.illustration,
|
.illustration,
|
||||||
[data-oembed] {
|
[data-oembed] {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.illustration img {
|
.illustration img {
|
||||||
max-height: 300px;
|
max-height: 24em;
|
||||||
|
margin: 3em 0;
|
||||||
}
|
}
|
||||||
img,
|
img,
|
||||||
.block-img {
|
.block-img {
|
||||||
|
@ -29,20 +41,18 @@
|
||||||
twitter-widget {
|
twitter-widget {
|
||||||
margin: 30px auto!important;
|
margin: 30px auto!important;
|
||||||
}
|
}
|
||||||
.post.no-icon .illustration {
|
&.post.no-icon .illustration {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.shortlede {
|
&.post h1 {
|
||||||
display: block;
|
a {
|
||||||
text-align: center;
|
font-size: .6em;
|
||||||
font-size: 1.4em;
|
vertical-align: middle;
|
||||||
font-weight: normal;
|
}
|
||||||
font-style: italic;
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
}
|
||||||
.body {
|
.body {
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
margin: 20px 0 60px 0;
|
margin: 0 var(--box-padding) 4em var(--box-padding);
|
||||||
cursor: initial;
|
cursor: initial;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
strong {
|
strong {
|
||||||
|
@ -88,18 +98,19 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.list {
|
&.list {
|
||||||
article {
|
article {
|
||||||
margin: 1em 0 5em 0;
|
margin: 3em 0 7em 0;
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-bottom: $border;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
.meta {
|
.meta {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.more {
|
.more {
|
||||||
|
margin-top: 2em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue