From: Michael Tremer <michael.tremer@ipfire.org>
Date: Tue, 10 Nov 2020 13:39:56 +0000 (+0000)
Subject: blog: Update design of posts
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=80b26795ea4ebb6d2b6c4b73bcfe0c3af10b1e38;p=ipfire.org.git

blog: Update design of posts

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 2627c5c3..0c6bc94d 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -62,6 +62,11 @@ body {
 	}
 }
 
+.header {
+	padding-top: 5rem;
+	background-color: $light;
+}
+
 // Buttons
 .btn {
 	text-transform: uppercase;
diff --git a/src/templates/blog/index.html b/src/templates/blog/index.html
index dce3d300..adff7208 100644
--- a/src/templates/blog/index.html
+++ b/src/templates/blog/index.html
@@ -7,9 +7,5 @@
 {% end %}
 
 {% block main %}
-	<div class="card">
-		<div class="card-body">
-			{% module BlogPosts(posts) %}
-		</div>
-	</div>
+	{% module BlogPosts(posts) %}
 {% end block %}
diff --git a/src/templates/blog/modules/post.html b/src/templates/blog/modules/post.html
index f0c3c304..c8ddc8c0 100644
--- a/src/templates/blog/modules/post.html
+++ b/src/templates/blog/modules/post.html
@@ -1,6 +1,6 @@
 {% import ipfire.accounts as accounts %}
 
-<div class="blog-post {% if "lightningwirelabs.com" in post.tags %}lightning-wire-labs{% end %}">
+<section class="blog-post {% if "lightningwirelabs.com" in post.tags %}lightning-wire-labs{% end %}">
 	<div class="blog-header">
 		<h4 class="card-title">
 			<a href="/blog/{{ post.slug }}">
@@ -71,4 +71,4 @@
 			</a>
 		{% end %}
 	</div>
-</div>
+</section>
diff --git a/src/templates/blog/modules/posts.html b/src/templates/blog/modules/posts.html
index 094ae38a..f4f4f87c 100644
--- a/src/templates/blog/modules/posts.html
+++ b/src/templates/blog/modules/posts.html
@@ -1,7 +1,3 @@
 {% for i, post in enumerate(posts) %}
     {% module BlogPost(post) %}
-
-    {% if i < (len(posts) - 1) %}
-        <hr class="divider">
-    {% end %}
 {% end %}
diff --git a/src/templates/blog/post.html b/src/templates/blog/post.html
index d42820bb..1cafa2d0 100644
--- a/src/templates/blog/post.html
+++ b/src/templates/blog/post.html
@@ -34,10 +34,65 @@
 	<meta property="twitter:image" content="{{ static_url("img/ipfire-tux.png") }}" />
 {% end block %}
 
-{% block main %}
-	<div class="card">
-		<div class="card-body">
-			{% module BlogPost(post) %}
+{% block container %}
+	<div class="header">
+		<div class="container">
+			<h1>{{ post.title }}</h1>
+
+			<p class="text-muted">
+				{{ _("by") }}
+
+				{% if isinstance(post.author, accounts.Account) %}
+					<a href="/blog/authors/{{ post.author.uid }}">{{ post.author.name }}</a>,
+				{% else %}
+					<strong>{{ post.author }}</strong>,
+				{% end %}
+
+				{% if post.is_published() %}
+					{% if post.updated_at and post.updated_at > post.published_at %}
+						{{ locale.format_date(post.published_at, shorter=True, relative=False) }},
+						{{ _("Updated %s") % locale.format_date(post.updated_at, shorter=True) }}
+					{% else %}
+						{{ locale.format_date(post.published_at, shorter=True, relative=False) }}
+					{% end %}
+				{% elif post.published_at %}
+					<span class="text-danger">{{ _("Scheduled to be published %s") % locale.format_date(post.published_at, relative=False) }}</span>
+				{% else %}
+					{{ _("Not published") }}
+				{% end %}
+			</p>
 		</div>
 	</div>
+
+	<div class="container">
+		<section class="blog-post {% if "lightningwirelabs.com" in post.tags %}lightning-wire-labs{% end %}">
+			<div class="row">
+				<div class="col-12 col-lg-9">
+					<div class="blog-content">
+						{% raw post.html %}
+					</div>
+
+					<div class="btn-toolbar justify-content-center my-5">
+						{% if "lightningwirelabs.com" in post.tags and post.link %}
+							<a class="btn btn-lwl" href="{{ post.link }}">
+								Go to Lightning Wire Labs <span class="fas fa-external-link-alt ml-2"></span>
+							</a>
+						{% end %}
+
+						{% if post.release %}
+							<a class="btn btn-primary" href="/download/{{ post.release.slug }}">
+								{{ _("Download") }}
+							</a>
+						{% end %}
+
+						{% if post.release or "donate" in post.tags %}
+							<a class="btn btn-outline-primary ml-2" href="/donate">
+								{{ _("Donate") }}
+							</a>
+						{% end %}
+					</div>
+				</div>
+			</div>
+		</section>
+	</div>
 {% end block %}
diff --git a/src/templates/blog/search-results.html b/src/templates/blog/search-results.html
index 5264912f..ce271328 100644
--- a/src/templates/blog/search-results.html
+++ b/src/templates/blog/search-results.html
@@ -3,11 +3,7 @@
 {% block title %}{{ _("Search results for '%s'") % q }}{% end block %}
 
 {% block main %}
-	<div class="card">
-		<div class="card-body">
-			<h5>{{ _("Search results for '%s'") % q }}</h5>
+	<h5>{{ _("Search results for '%s'") % q }}</h5>
 
-			{% module BlogPosts(posts) %}
-		</div>
-	</div>
+	{% module BlogPosts(posts) %}
 {% end block %}