From a1fa110001f51bcfcabbaba9109c63971be0e4b2 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Thu, 20 Jun 2024 21:02:27 +0200
Subject: [PATCH] feat(archive-letter): improve UI and readability

Refactored layout of letters archive to use Bootstrap list group for a cleaner and more responsive design. Simplified author display to show 'et al.' when multiple authors are present, enhancing readability. Added margin top for consistent spacing.

Implements better UX for browsing letters.
---
 archive-letter.php | 41 +++++++++++++++++++----------------------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/archive-letter.php b/archive-letter.php
index e4a9b8a..a93c0b0 100644
--- a/archive-letter.php
+++ b/archive-letter.php
@@ -3,34 +3,31 @@
 <!-- Archive Content -->
 <section class="container my-5">
     <h1 class="display-4 text-center">Letters to the Editor</h1>
-    <div class="row">
+    <div class="list-group">
         <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
-                <div class="col-md-4">
-                    <div class="card mb-4 shadow-sm">
-                        <?php if (has_post_thumbnail()) : ?>
-                            <img src="<?php the_post_thumbnail_url(); ?>" class="card-img-top" alt="<?php the_title(); ?>">
-                        <?php endif; ?>
-                        <div class="card-body">
-                            <h5 class="card-title"><?php the_title(); ?></h5>
-                            <p class="card-text"> <?php
-                                                    $authors = get_post_meta(get_the_ID(), 'article_authors', true);
-                                                    if (!empty($authors)) {
-                                                        echo implode(', ', array_map('esc_html', $authors));
-                                                    } else {
-                                                        the_author();
-                                                    }
-                                                    ?> | <?php the_date(); ?></p>
-                            <p class="card-text"><?php the_excerpt(); ?></p>
-                            <a href="<?php the_permalink(); ?>" class="btn btn-outline-primary">Read More</a>
-                        </div>
-                    </div>
-                </div>
+                <a href="<?php the_permalink(); ?>" class="list-group-item list-group-item-action">
+                    <h5 class="mb-1"><?php the_title(); ?></h5>
+                    <p class="mb-1">
+                        <?php
+                        $authors = get_post_meta(get_the_ID(), 'article_authors', true);
+                        if (!empty($authors)) {
+                            echo esc_html($authors[0]);
+                            if (count($authors) > 1) {
+                                echo ' et al.';
+                            }
+                        } else {
+                            the_author();
+                        }
+                        ?> | <?php the_date(); ?>
+                    </p>
+                    <p class="mb-1"><?php the_excerpt(); ?></p>
+                </a>
             <?php endwhile;
         else : ?>
             <p><?php _e('Sorry, no letters found.', 'duck-behavior-journal'); ?></p>
         <?php endif; ?>
     </div>
-    <div class="row">
+    <div class="row mt-4">
         <div class="col-md-12">
             <?php
             echo paginate_links(array(