From 40df48fd875db61e9096301825da7ee447fd22fb Mon Sep 17 00:00:00 2001
From: Xavier Vello <xavier.vello@gmail.com>
Date: Sat, 14 Oct 2023 00:55:00 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(list=5Fposts.html):=20display?=
 =?UTF-8?q?=20draft=20status=20in=20post=20list=20(#203)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: welpo <welpo@users.noreply.github.com>
---
 sass/parts/_posts_list.scss      | 31 +++++++++++++++++++++++--------
 templates/macros/list_posts.html | 14 ++++++++------
 2 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/sass/parts/_posts_list.scss b/sass/parts/_posts_list.scss
index fe40b9b..e826b52 100644
--- a/sass/parts/_posts_list.scss
+++ b/sass/parts/_posts_list.scss
@@ -9,11 +9,21 @@
     background-color: var(--navbar-color);
     padding: 2.5rem 0;
 
-    .date {
+    .bloglist-meta {
+        padding: 0;
         width: 13.5rem;
         color: var(--meta-color);
         font-weight: 300;
         font-size: 0.9rem;
+
+        li {
+            list-style-type: none;
+        }
+
+        li.draft-label {
+            width: fit-content;
+            line-height: 1.2rem;
+        }
     }
 
     .bloglist-tags {
@@ -66,14 +76,19 @@
         flex-direction: column;
         align-items: flex-start;
         padding: 2rem 0;
-    }
 
-    .date {
-        margin-bottom: 0;
-        width: 100%;
-    }
+        .bloglist-meta {
+            margin-bottom: 0;
+            width: 100%;
 
-    .bloglist-content {
-        width: 100%;
+            li {
+                display: inline;
+                margin-right: 0.3rem;
+            }
+        }
+
+        .bloglist-content {
+            width: 100%;
+        }
     }
 }
diff --git a/templates/macros/list_posts.html b/templates/macros/list_posts.html
index ce54d06..65ce400 100644
--- a/templates/macros/list_posts.html
+++ b/templates/macros/list_posts.html
@@ -11,12 +11,14 @@
                 <section class="bloglist-row bottom-divider">
             {% endif %}
 
-            {% if post.date %}
-                <div class="date">
-                    {{ macros_format_date::format_date(date=post.date, short=false, language_strings=language_strings) }}
-                </div>
-            {% endif %}
-
+            <ul class="bloglist-meta">
+                {% if post.date %}
+                <li class="date">{{ macros_format_date::format_date(date=post.date, short=false, language_strings=language_strings) }}</li>
+                {% endif %}
+                {% if post.draft %}
+                <li class="draft-label">{{ macros_translate::translate(key="draft", default="DRAFT", language_strings=language_strings) }}</li>
+                {% endif %}
+            </ul>
             <div class="bloglist-content">
                 <h2 class="bloglist-title">
                     <a href="{{ post.permalink }}">{{ post.title }}</a>