From 506a4a86e557bf1ae0caf078881ddd2dc4406d55 Mon Sep 17 00:00:00 2001
From: ZzMzaw <89450172+ZzMzaw@users.noreply.github.com>
Date: Sun, 4 Aug 2024 08:47:22 +0200
Subject: [PATCH] refactor(posts): make meta column width adaptable

The meta column of the blogposts list was fixed to 13.5rem.
I can be annoying when displaying something else but a date as it was initially planned.

Width set to 13.5rem has been kept when displaying a date to avoid any regression.
Nevertheless, it is possible to get rid of it in the future if needed.

Feed has been adapted accordingly.
---
 sass/parts/_posts_list.scss      | 66 +++++++++++++++++++++-----------
 static/feed_style.xsl            |  8 ++--
 templates/macros/list_posts.html | 13 ++++---
 3 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/sass/parts/_posts_list.scss b/sass/parts/_posts_list.scss
index ce38a83..92cfe46 100644
--- a/sass/parts/_posts_list.scss
+++ b/sass/parts/_posts_list.scss
@@ -1,24 +1,28 @@
 .bloglist-container {
     display: grid;
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr 8fr;
 }
 
-.bloglist-row {
+.bloglist-meta {
     display: flex;
     align-items: flex-start;
     background-color: var(--navbar-color);
     padding-block: 2.5rem;
 
-    .bloglist-meta {
+    ul {
         margin-inline-end: 0.7rem;
         padding: 0;
-        width: 13.5rem;
         color: var(--meta-color);
         font-weight: 300;
         font-size: 0.9rem;
 
         li {
             list-style-type: none;
+            white-space: nowrap;
+        }
+
+        li.date {
+            width: 13.5rem;
         }
 
         li.draft-label {
@@ -26,23 +30,17 @@
             line-height: 1.2rem;
         }
     }
+}
 
-    .bloglist-tags {
-        margin-top: 0.1rem;
+.bloglist-content {
+    display: flex;
+    align-items: flex-start;
+    background-color: var(--navbar-color);
+    padding: 2.5rem 0;
 
-        .tag {
-            display: inline-block;
-            margin-inline-end: 0.7rem;
-            font-weight: 400;
-            font-size: 0.75rem;
-            text-transform: uppercase;
-        }
-    }
-
-    .bloglist-content {
+    div {
         flex: 1;
 
-
         .bloglist-title {
             margin: 0;
             font-weight: bold;
@@ -58,6 +56,18 @@
             }
         }
 
+        .bloglist-tags {
+            margin-top: 0.1rem;
+
+            .tag {
+                display: inline-block;
+                margin-inline-end: 0.7rem;
+                font-weight: 400;
+                font-size: 0.75rem;
+                text-transform: uppercase;
+            }
+        }
+
         .description p {
             margin: 0.5rem 0 1rem;
             color: var(--text-color);
@@ -86,12 +96,15 @@
 }
 
 @media only screen and (max-width: 1100px) {
-    .bloglist-row {
-        flex-direction: column;
-        align-items: flex-start;
-        padding-block: 2rem;
+    .bloglist-container {
+        grid-template-columns: 1fr;
+    }
 
-        .bloglist-meta {
+    .bloglist-meta {
+        padding-block: 2rem;
+        border-bottom: 0;
+
+        ul {
             margin-block-end: 0;
             width: 100%;
 
@@ -100,8 +113,15 @@
                 margin-inline-end: 0.3rem;
             }
         }
+    }
 
-        .bloglist-content {
+    .bloglist-content {
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 0;
+        padding-bottom: 2rem;
+
+        div {
             width: 100%;
         }
     }
diff --git a/static/feed_style.xsl b/static/feed_style.xsl
index 5fa7160..f4f5e98 100644
--- a/static/feed_style.xsl
+++ b/static/feed_style.xsl
@@ -60,8 +60,8 @@
             <xsl:variable name="post_listing_date" select="/atom:feed/tabi:metadata/tabi:post_listing_date"/>
             <div class="bloglist-container">
               <xsl:for-each select="/atom:feed/atom:entry">
-                <section class="bloglist-row bottom-divider">
-                  <ul class="bloglist-meta">
+                <section class="bloglist-meta bottom-divider">
+                  <ul>
                     <xsl:variable name="show_date" select="$post_listing_date = 'date' or $post_listing_date = 'both'"/>
                     <xsl:variable name="show_updated" select="$post_listing_date = 'updated' or $post_listing_date = 'both'"/>
 
@@ -87,7 +87,9 @@
                       </li>
                     </xsl:if>
                   </ul>
-                  <div class="bloglist-content">
+                </section>
+                <section class="bloglist-content bottom-divider">
+                  <div>
                     <div class="bloglist-title">
                       <a>
                         <xsl:attribute name="href">
diff --git a/templates/macros/list_posts.html b/templates/macros/list_posts.html
index 790e1b7..90c70ab 100644
--- a/templates/macros/list_posts.html
+++ b/templates/macros/list_posts.html
@@ -6,14 +6,15 @@
     {% for post in posts %}
         {% if loop.index <= max %}
             {% if loop.index == max %}
-                <section class="bloglist-row">
+                {% set bottom_divider = false %}
             {% elif loop.last %}
-                <section class="bloglist-row">
+                {% set bottom_divider = false %}
             {% else %}
-                <section class="bloglist-row bottom-divider">
+                {% set bottom_divider = true %}
             {% endif %}
 
-            <ul class="bloglist-meta">
+        <section class="bloglist-meta {% if bottom_divider -%}bottom-divider{%- endif -%}">
+            <ul>
                 {%- set allowed_post_listing_dates = ["date", "updated", "both"] -%}
                 {%- set post_listing_date = config.extra.post_listing_date | default(value="date") -%}
                 {%- if post_listing_date not in allowed_post_listing_dates -%}
@@ -42,7 +43,9 @@
                 <li class="draft-label">{{ macros_translate::translate(key="draft", default="DRAFT", language_strings=language_strings) }}</li>
                 {% endif %}
             </ul>
-            <div class="bloglist-content">
+        </section>
+        <section class="bloglist-content {% if bottom_divider -%}bottom-divider{%- endif -%}">
+            <div>
                 <h2 class="bloglist-title">
                     <a href="{{ post.permalink }}">{{ post.title }}</a>
                 </h2>