blog: Redesign the post page

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

diff --git a/src/templates/blog/post.html b/src/templates/blog/post.html
index d72caabee5118a8c678ecf4a85762a80d09f9878..2da51deaeacd92c00cfb822221c16b7cab487560 100644 (file)
--- a/src/templates/blog/post.html
+++ b/src/templates/blog/post.html
@@ -28,139 +28,137 @@
 {% block container %}
        {% import ipfire.accounts as accounts %}
 
-       <section class="hero {% if "lightningwirelabs.com" in post.tags %}is-lwl{% elif post.is_published() %}is-primary{% else %}is-light{% end %}">
-               <div class="hero-body">
-                       <div class="container">
-                               <nav class="breadcrumb" aria-label="breadcrumbs">
-                                       <ul>
-                                               <li>
-                                                       <a href="/">{{ _("Home") }}</a>
-                                               </li>
-                                               <li>
-                                                       <a href="/blog">{{ _("Blog") }}</a>
-                                               </li>
-                                               <li class="is-active">
-                                                       <a href="#" aria-current="page">{{ post.title }}</a>
-                                               </li>
-                                       </ul>
-                               </nav>
-
-                               <h1 class="title">{{ post.title }}</h1>
-
-                               <h6 class="subtitle">
-                                       {{ _("by") }}
-
-                                       {% if isinstance(post.author, accounts.Account) %}
-                                               <a href="/users/{{ post.author.uid }}">{{ post.author.name }}</a>,
-                                       {% else %}
-                                               <strong>{{ post.author }}</strong>,
-                                       {% end %}
+       <section class="section">
+               <div class="container">
+                       <nav class="breadcrumb" aria-label="breadcrumbs">
+                               <ul>
+                                       <li>
+                                               <a href="/">{{ _("Home") }}</a>
+                                       </li>
+                                       <li>
+                                               <a href="/blog">{{ _("Blog") }}</a>
+                                       </li>
+                                       <li class="is-active">
+                                               <a href="#" aria-current="page">{{ post.title }}</a>
+                                       </li>
+                               </ul>
+                       </nav>
+
+                       <p class="heading">
+                               {% module BlogTag(post) %}
+                       </p>
+
+                       <h1 class="title is-1">
+                               {{ post.title }}
+                       </h1>
+
+                       <hr>
+
+                       <div class="level">
+                               <div class="level-left">
+                                       <div class="level-item">
+                                               {% if isinstance(post.author, accounts.Account) %}
+                                                       <span class="icon-text">
+                                                               <span class="icon">
+                                                                       {% module Avatar(post.author, size=24) %}
+                                                               </span>
 
-                                       {% 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) }}
+                                                               <a href="/users/{{ post.author.uid }}">
+                                                                       {{ post.author }}
+                                                               </a>
+                                                       </span>
                                                {% else %}
-                                                       {{ locale.format_date(post.published_at, shorter=True, relative=False) }}
+                                                       <strong>
+                                                               {{ post.author }}
+                                                       </strong>
                                                {% end %}
-                                       {% elif post.published_at %}
-                                               {{ _("Scheduled to be published %s") % locale.format_date(post.published_at, relative=False) }}
-                                       {% else %}
-                                               {{ _("Not published, yet") }}
-                                       {% end %}
-                               </h6>
-                       </div>
-               </div>
-       </section>
+                                       </div>
 
-       {# Encourage people to sign up & subscribe... #}
-       {% if not current_user or not current_user.consents_to_promotional_emails %}
-               <section class="has-background-light">
-                       <div class="container">
-                               <p class="has-text-centered px-2 py-1">
-                                       {{ _("Do you like what you are reading?") }}
-                                       {{ _("Subscribe to our newsletter and don't miss out on the latest...") }}
-
-                                       &nbsp;
-
-                                       {% if not current_user %}
-                                               <a class="has-text-weight-bold" href="/join">
-                                                       {{ _("Join Now") }}
-                                               </a>
-                                       {% else %}
-                                               <a class="has-text-weight-bold" href="/subscribe">
-                                                       {{ _("Subscribe Now") }}
-                                               </a>
+                                       {# Date #}
+                                       {% if post.published_at %}
+                                               <div class="level-item">
+                                                       {{ locale.format_date(post.published_at, shorter=True, relative=False) }}
+                                               </div>
                                        {% end %}
-                               </p>
-                       </div>
-               </section>
-       {% end %}
+                               </div>
 
-       <section class="section">
-               <div class="container">
-                       <div class="columns is-justify-content-space-between">
-                               <div class="column is-8">
-                                       <div class="block">
-                                               <div class="content">
-                                                       {% raw post.html %}
-                                               </div>
-                                       </div>
+                               <div class="level-right has-text-centered">
+                                       <div class="buttons are-small">
+                                               {# Author Stuff #}
+                                               {% if post.is_editable(current_user) %}
+                                                       {% if not post.is_published() %}
+                                                               <a class="button is-info" href="/blog/{{ post.slug }}/publish">
+                                                                       <span class="icon">
+                                                                               <i class="fa-solid fa-users"></i>
+                                                                       </span>
 
-                                       <div class="buttons are-medium">
-                                               {% if "lightningwirelabs.com" in post.tags and post.link %}
-                                                       <a class="button is-lwl is-fullwidth" href="{{ post.link }}">
+                                                                       <span>
+                                                                               {{ _("Publish") }}
+                                                                       </span>
+                                                               </a>
+                                                       {% end %}
+
+                                                       <a class="button is-light" href="/blog/{{ post.slug }}/edit">
                                                                <span class="icon">
-                                                                       <i class="fas fa-external-link-alt"></i>
+                                                                       <i class="fas fa-edit"></i>
+                                                               </span>
+
+                                                               <span>
+                                                                       {{ _("Edit") }}
                                                                </span>
-                                                               <span>{{ _("Go to Lightning Wire Labs") }}</span>
                                                        </a>
                                                {% end %}
 
+                                               {# Donate #}
                                                {% if post.release or "donate" in post.tags %}
-                                                       <a class="button is-primary is-fullwidth" href="/donate">
+                                                       <a class="button is-primary" href="/donate">
                                                                <span class="icon">
                                                                        <i class="fas fa-heart"></i>
                                                                </span>
-                                                               <span>{{ _("Donate") }}</span>
+
+                                                               <span>
+                                                                       {{ _("Donate") }}
+                                                               </span>
                                                        </a>
                                                {% end %}
 
+                                               {# Download Release #}
                                                {% if post.release %}
-                                                       <a class="button is-dark is-fullwidth" href="/downloads/{{ post.release.slug }}">
+                                                       <a class="button is-dark" href="/downloads/{{ post.release.slug }}">
                                                                <span class="icon">
                                                                        <i class="fas fa-download"></i>
                                                                </span>
-                                                               <span>{{ _("Download") }} <span class="is-hidden-mobile">{{ post.release }}</span></span>
 
-                                                       </a>
-                                               {% end %}
-                                       </div>
-                               </div>
+                                                               <span>
+                                                                       {{ _("Download") }}
 
-                               {# Author Stuff #}
-
-                               {% if post.is_editable(current_user) %}
-                                       <div class="column is-3">
-                                               <div class="buttons">
-                                                       {% if not post.is_published() %}
-                                                               <a class="button is-primary is-fullwidth" href="/blog/{{ post.slug }}/publish">
-                                                                       <span class="icon">
-                                                                               <i class="fa-solid fa-users"></i>
+                                                                       <span class="is-hidden-mobile">
+                                                                               {{ post.release }}
                                                                        </span>
-                                                                       <span>{{ _("Publish") }}</span>
-                                                               </a>
-                                                       {% end %}
+                                                               </span>
+                                                       </a>
+                                               {% end %}
 
-                                                       <a class="button is-light is-fullwidth" href="/blog/{{ post.slug }}/edit">
+                                               {# LWL #}
+                                               {% if "lightningwirelabs.com" in post.tags and post.link %}
+                                                       <a class="button is-lwl" href="{{ post.link }}">
                                                                <span class="icon">
-                                                                       <i class="fas fa-edit"></i>
+                                                                       <i class="fas fa-external-link-alt"></i>
+                                                               </span>
+
+                                                               <span>
+                                                                       {{ _("Go to Lightning Wire Labs") }}
                                                                </span>
-                                                               <span>{{ _("Edit") }}</span>
                                                        </a>
-                                               </div>
+                                               {% end %}
                                        </div>
-                               {% end %}
+                               </div>
+                       </div>
+
+                       <hr>
+
+                       <div class="content">
+                               {% raw post.html %}
                        </div>
                </div>
        </section>