From 43ba52f31e1544c2878a1867960154fe4183bd72 Mon Sep 17 00:00:00 2001
From: "Edgar P. Burkhart" <git@edgarpierre.fr>
Date: Fri, 13 Jun 2025 23:58:24 +0200
Subject: [PATCH] Refactor group display in home template to use articles for
 better structure and styling

---
 base/static/css/main.css      | 12 ++++++++++++
 game/templates/game/home.html | 26 ++++++++++++++------------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/base/static/css/main.css b/base/static/css/main.css
index a353d2e..372715c 100644
--- a/base/static/css/main.css
+++ b/base/static/css/main.css
@@ -19,3 +19,15 @@ i.owner {
 .template {
     display: none;
 }
+
+a.group {
+    text-decoration: none;
+}
+
+.group-owner, .group i {
+    margin-left: .5rem;
+}
+
+.group-owner {
+    color: var(--pico-color-zinc-500);
+}
diff --git a/game/templates/game/home.html b/game/templates/game/home.html
index b726da8..20c310b 100644
--- a/game/templates/game/home.html
+++ b/game/templates/game/home.html
@@ -7,16 +7,18 @@
     {% endif %}
 </p>
 {% if user.owned_group_set.exists or user.group_set.exists %}
-    <ul>
-        {% for group in user.owned_group_set.all %}
-            <li>
-                <a href="{{ group.get_absolute_url }}">{{ group.name }}</a> <i class="ri-vip-crown-fill owner"></i>
-            </li>
-        {% endfor %}
-        {% for group in user.group_set.all %}
-            <li>
-                <a href="{{ group.get_absolute_url }}">{{ group.name }}</a>
-            </li>
-        {% endfor %}
-    </ul>
+    {% for group in user.owned_group_set.all %}
+        <a class="group" href="{{ group.get_absolute_url }}">
+            <article>
+                {{ group.name }} <i class="ri-vip-crown-fill owner"></i>
+            </article>
+        </a>
+    {% endfor %}
+    {% for group in user.group_set.all %}
+        <a class="group" href="{{ group.get_absolute_url }}">
+            <article>
+                {{ group.name }} <span class="group-owner">{{ group.owner }}</span>
+            </article>
+        </a>
+    {% endfor %}
 {% endif %}