From 8cd0b8ca1f79cdcb5f81c8256939d8935280f4d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20Hells=C3=A9n?= <tlovinator@gmail.com>
Date: Sat, 30 Aug 2025 00:17:14 +0200
Subject: [PATCH] Refactor game list layout to enhance usability and improve
 visual presentation

---
 templates/twitch/game_list.html | 73 ++++++++++++++++++++++++---------
 1 file changed, 54 insertions(+), 19 deletions(-)

diff --git a/templates/twitch/game_list.html b/templates/twitch/game_list.html
index 4f8fa55..95607c8 100644
--- a/templates/twitch/game_list.html
+++ b/templates/twitch/game_list.html
@@ -3,23 +3,58 @@
     Games
 {% endblock title %}
 {% block content %}
-    <h1>Games</h1>
-    {% if games_by_org %}
-        {% for organization, games in games_by_org.items %}
-            <h2>{{ organization.name }}</h2>
-            <table>
-                <tbody>
-                    {% for item in games %}
-                        <tr>
-                            <td>
-                                <a href="{% url 'twitch:game_detail' item.game.id %}">{{ item.game.display_name }}</a>
-                            </td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        {% endfor %}
-    {% else %}
-        No games found.
-    {% endif %}
+    <main>
+        <header>
+            <h1>Games</h1>
+            <p>Browse all available games</p>
+        </header>
+        {% if games_by_org %}
+            {% for organization, games in games_by_org.items %}
+                <section style="margin-bottom: 3rem;">
+                    <h2 style="margin-bottom: 1rem;">{{ organization.name }}</h2>
+                    <div style="display: flex; flex-direction: column; gap: 1rem;">
+                        {% for item in games %}
+                            <article style="display: flex; gap: 1rem; align-items: center;">
+                                <div style="flex-shrink: 0;">
+                                    {% if item.game.box_art_base_url %}
+                                        <img src="{{ item.game.box_art_base_url }}"
+                                             alt="Box art for {{ item.game.display_name }}"
+                                             width="120"
+                                             height="160"
+                                             style="border-radius: 8px">
+                                    {% else %}
+                                        <div style="width: 120px;
+                                                    height: 160px;
+                                                    border: 1px solid;
+                                                    border-radius: 8px;
+                                                    display: flex;
+                                                    align-items: center;
+                                                    justify-content: center;
+                                                    font-size: 1rem">
+                                            🎮
+                                            <br>
+                                            No Image
+                                        </div>
+                                    {% endif %}
+                                </div>
+                                <div style="flex: 1;">
+                                    <h3 style="margin: 0;">
+                                        <a href="{% url 'twitch:game_detail' item.game.id %}"
+                                           style="text-decoration: none;
+                                                  color: inherit">{{ item.game.display_name }}</a>
+                                    </h3>
+                                </div>
+                            </article>
+                        {% endfor %}
+                    </div>
+                </section>
+            {% endfor %}
+        {% else %}
+            <section style="text-align: center; padding: 3rem 1rem;">
+                <div style="font-size: 4rem; margin-bottom: 1rem;">🎮</div>
+                <h2 style="margin: 0 0 1rem 0;">No Games Found</h2>
+                <p style="margin: 0; font-size: 1.1rem;">No games are currently available.</p>
+            </section>
+        {% endif %}
+    </main>
 {% endblock content %}