From 4a2f5aeeeb1e62ae6d355048132a1969f24bd1d8 Mon Sep 17 00:00:00 2001
From: Baptiste Gelez <baptiste@gelez.xyz>
Date: Wed, 31 Oct 2018 11:43:56 +0100
Subject: [PATCH] Display article covers

---
 plume-models/src/posts.rs         |  3 ++-
 static/css/main.css               | 26 ++++++++++++++++++++++++--
 templates/macros.html.tera        |  3 +++
 templates/posts/details.html.tera |  3 +++
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/plume-models/src/posts.rs b/plume-models/src/posts.rs
index 6dba6bb2..e40563ff 100644
--- a/plume-models/src/posts.rs
+++ b/plume-models/src/posts.rs
@@ -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))),
         })
     }
 
diff --git a/static/css/main.css b/static/css/main.css
index 4602df3f..3f95bebe 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -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;
diff --git a/templates/macros.html.tera b/templates/macros.html.tera
index b419bf0a..f7065a7f 100644
--- a/templates/macros.html.tera
+++ b/templates/macros.html.tera
@@ -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>
diff --git a/templates/posts/details.html.tera b/templates/posts/details.html.tera
index 0a96869e..732ea4ad 100644
--- a/templates/posts/details.html.tera
+++ b/templates/posts/details.html.tera
@@ -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>