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 2627c5c354f206601bb6aa4b3a76d288b4c018ea..0c6bc94dd1586c3923cf1915c37252b5a36b346b 100644 (file)
--- 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 dce3d3008d3ad842bb95a1b2ebac95b7c906e44d..adff720804c5231d48debdc293782da35426a500 100644 (file)
--- 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 f0c3c3040a9a2ccae94f61f748860ca8e6f165cc..c8ddc8c090c1251a2969d08eeefda0e70af38c82 100644 (file)
--- 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 094ae38ac680f0402886b02bbfc01a0ade920c3f..f4f4f87c2bd61dc7ab08eb1779b24b56f3d1dbc7 100644 (file)
--- 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 d42820bbe1b57d128d6969689921b1bd2ff080b9..1cafa2d0180f13709bf3a92e897d28aee8477e0b 100644 (file)
--- 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 5264912fc6fe115f0ae914a10cc869b3b7122fd8..ce271328dd5f21a87e5ecfe2cbf2b6b42d3e778e 100644 (file)
--- 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 %}