Display article covers

This commit is contained in:
Baptiste Gelez 2018-10-31 11:43:56 +01:00
parent 95326c09e0
commit 4a2f5aeeeb
4 changed files with 32 additions and 3 deletions

View File

@ -526,7 +526,8 @@ impl Post {
"url": format!("/~/{}/{}/", blog.get_fqn(conn), self.slug),
"date": self.creation_date.timestamp(),
"blog": blog.to_json(conn),
"tags": Tag::for_post(&*conn, self.id)
"tags": Tag::for_post(&*conn, self.id),
"cover": self.cover_id.and_then(|i| Media::get(conn, i).map(|m| m.to_json(conn))),
})
}

View File

@ -193,6 +193,18 @@ header nav a.title p {
main .article-info .author { font-weight: 600; }
main .article-info .author a { font-weight: 600; }
/* Cover */
main > .cover {
padding: 0px;
margin: 0px;
width: auto;
min-height: 50vh;
background-position: center;
background-size: cover;
overflow: hidden;
}
/* Article */
main article {
@ -624,13 +636,15 @@ form.inline input[type="submit"]:not(.button) {
min-width: 17.5em;
min-height: 17.5em;
margin: 1em;
padding: 1em;
box-sizing: border-box;
background: #E3E3E3;
text-overflow: ellipsis;
}
.card > * {
margin: 20px;
}
.list .card {
/* TODO */
background: 0;
@ -641,10 +655,18 @@ form.inline input[type="submit"]:not(.button) {
/* ~ Card content ~ */
/* Cover */
.card .cover {
min-height: 10em;
background-position: center;
background-size: cover;
margin: 0px;
}
/* Title */
.card h3 {
margin: 0.75em 0;
margin: 0.75em 20px;
font-family: "Playfair Display", serif;
font-size: 1.75em;
font-weight: normal;

View File

@ -1,5 +1,8 @@
{% macro post_card(article) %}
<div class="card">
{% if article.cover %}
<div class="cover" style="background-image: url('{{ article.cover.url }}')"></div>
{% endif %}
<h3><a href="{{ article.url }}">{{ article.post.title }}</a></h3>
<main>
<p>

View File

@ -35,6 +35,9 @@
<span class="badge">{{ "Draft" }}</span>
{% endif %}
</div>
{% if article.cover %}
<div class="cover" style="background-image: url('{{ article.cover.url }}')"></div>
{% endif %}
<article>
{{ article.post.content | safe }}
</article>