From 15caff2bc9ebfd0d4e5854d92f5813250f083cfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20Hells=C3=A9n?= <tlovinator@gmail.com>
Date: Sat, 30 Aug 2025 00:14:18 +0200
Subject: [PATCH] Refactor campaign list filters and improve layout for better
 usability

---
 templates/twitch/campaign_list.html | 220 +++++++++++++---------------
 1 file changed, 99 insertions(+), 121 deletions(-)

diff --git a/templates/twitch/campaign_list.html b/templates/twitch/campaign_list.html
index 84ba3f8..4345eb6 100644
--- a/templates/twitch/campaign_list.html
+++ b/templates/twitch/campaign_list.html
@@ -21,11 +21,7 @@
                 <!-- Game Filter -->
                 <div>
                     <label for="game" style="margin-right: 0.5rem; font-weight: 600;">Game:</label>
-                    <select id="game"
-                            name="game"
-                            style="padding: 0.5rem;
-                                   border-radius: 4px;
-                                   border: 1px solid #ddd">
+                    <select id="game" name="game">
                         <option value="">All Games</option>
                         {% for game in games %}
                             <option value="{{ game.id }}"
@@ -38,11 +34,7 @@
                 <!-- Status Filter -->
                 <div>
                     <label for="status" style="margin-right: 0.5rem; font-weight: 600;">Status:</label>
-                    <select id="status"
-                            name="status"
-                            style="padding: 0.5rem;
-                                   border-radius: 4px;
-                                   border: 1px solid #ddd">
+                    <select id="status" name="status">
                         <option value="">All Statuses</option>
                         {% for status in status_options %}
                             <option value="{{ status }}"
@@ -50,37 +42,30 @@
                         {% endfor %}
                     </select>
                 </div>
-                <button type="submit"
-                        style="padding: 0.5rem 1rem;
-                               background: #9146ff;
-                               color: white;
-                               border: none;
-                               border-radius: 4px;
-                               cursor: pointer">Apply Filters</button>
+                <button type="submit">Apply Filters</button>
             </div>
         </form>
         {% if campaigns %}
             {% regroup campaigns by game as campaigns_by_game %}
             {% for game_group in campaigns_by_game %}
                 <section style="margin-bottom: 3rem;">
-                    <header style="display: flex; align-items: flex-start; margin-bottom: 1rem;">
-                        <div style="flex-shrink: 0; margin-right: 1rem;">
+                    <div style="display: flex; gap: 1rem;">
+                        <div style="flex-shrink: 0;">
                             {% if game_group.grouper.box_art_base_url %}
                                 <img src="{{ game_group.grouper.box_art_base_url }}"
                                      alt="Box art for {{ game_group.grouper.display_name }}"
-                                     width="200"
-                                     height="267"
+                                     width="120"
+                                     height="160"
                                      style="border-radius: 8px">
                             {% else %}
-                                <div style="width: 200px;
-                                            height: 267px;
-                                            border: 1px solid #444;
+                                <div style="width: 120px;
+                                            height: 160px;
+                                            border: 1px solid;
                                             border-radius: 8px;
                                             display: flex;
                                             align-items: center;
                                             justify-content: center;
-                                            color: #ccc;
-                                            font-size: 1.2rem">
+                                            font-size: 1rem">
                                     🎮
                                     <br>
                                     No Image
@@ -88,78 +73,82 @@
                             {% endif %}
                         </div>
                         <div style="flex: 1;">
-                            <h2 style="margin: 0 0 0.5rem 0;">
-                                <a href="{% url 'twitch:game_detail' game_group.grouper.id %}">{{ game_group.grouper.display_name }}</a>
-                            </h2>
-                            <p style="margin: 0; color: #666;">
-                                <a href="{% url 'twitch:organization_detail' game_group.list.0.owner.id %}">{{ game_group.list.0.owner.name }}</a>
-                            </p>
-                        </div>
-                    </header>
-                    <div style="overflow-x: auto;">
-                        <div style="display: flex; gap: 1rem; min-width: max-content;">
-                            {% for campaign in game_group.list %}
-                                <article style="display: flex;
-                                                flex-direction: column;
-                                                align-items: flex-start;
-                                                padding: 0.5rem;
-                                                flex-shrink: 0">
-                                    <div>
-                                        <a href="{% url 'twitch:campaign_detail' campaign.id %}">
-                                            {% if campaign.image_url %}
-                                                <img src="{{ campaign.image_url }}"
-                                                     alt="Campaign artwork for {{ campaign.name }}"
-                                                     width="120"
-                                                     height="120"
-                                                     style="border-radius: 4px">
-                                            {% else %}
-                                                <div style="width: 120px;
-                                                            height: 120px;
-                                                            border: 1px solid #444;
-                                                            border-radius: 4px;
-                                                            display: flex;
-                                                            align-items: center;
-                                                            justify-content: center;
-                                                            color: #ccc;
-                                                            font-size: 0.9rem">
-                                                    📦
-                                                    <br>
-                                                    No Image
+                            <header style="margin-bottom: 1rem;">
+                                <h2 style="margin: 0 0 0.5rem 0;">
+                                    <a href="{% url 'twitch:game_detail' game_group.grouper.id %}"
+                                       style="text-decoration: none">{{ game_group.grouper.display_name|default:game_group.grouper.name|default:game_group.grouper.slug|default:game_group.grouper.id }}</a>
+                                </h2>
+                                <p style="margin: 0;">
+                                    <a href="{% url 'twitch:organization_detail' game_group.list.0.owner.id %}"
+                                       style="text-decoration: none">{{ game_group.list.0.owner.name }}</a>
+                                </p>
+                            </header>
+                            <div style="overflow-x: auto;">
+                                <div style="display: flex; gap: 1rem; min-width: max-content;">
+                                    {% for campaign in game_group.list %}
+                                        <article style="display: flex;
+                                                        flex-direction: column;
+                                                        align-items: flex-start;
+                                                        padding: 0.5rem;
+                                                        flex-shrink: 0">
+                                            <div>
+                                                <a href="{% url 'twitch:campaign_detail' campaign.id %}"
+                                                   style="text-decoration: none">
+                                                    {% if campaign.image_url %}
+                                                        <img src="{{ campaign.image_url }}"
+                                                             alt="Campaign artwork for {{ campaign.name }}"
+                                                             width="120"
+                                                             height="120"
+                                                             style="border-radius: 4px">
+                                                    {% else %}
+                                                        <div style="width: 120px;
+                                                                    height: 120px;
+                                                                    border: 1px solid;
+                                                                    border-radius: 4px;
+                                                                    display: flex;
+                                                                    align-items: center;
+                                                                    justify-content: center;
+                                                                    font-size: 0.9rem">
+                                                            📦
+                                                            <br>
+                                                            No Image
+                                                        </div>
+                                                    {% endif %}
+                                                    <h4 style="margin: 0.5rem 0; text-align: left;">{{ campaign.clean_name }}</h4>
+                                                </a>
+                                                <div style="font-size: 0.9rem;">
+                                                    <time datetime="{{ campaign.start_at|date:'c' }}"
+                                                          title="Start: {{ campaign.start_at|date:'DATETIME_FORMAT' }}">
+                                                        {{ campaign.start_at|date:"M d, Y" }}
+                                                    </time>
+                                                    <span>-</span>
+                                                    <time datetime="{{ campaign.end_at|date:'c' }}"
+                                                          title="End: {{ campaign.end_at|date:'DATETIME_FORMAT' }}">
+                                                        {{ campaign.end_at|date:"M d, Y" }}
+                                                    </time>
                                                 </div>
-                                            {% endif %}
-                                            <h4 style="margin: 0.5rem 0; text-align: left;">{{ campaign.clean_name }}</h4>
-                                        </a>
-                                        <div style="font-size: 0.9rem; color: #666;">
-                                            <time datetime="{{ campaign.start_at|date:'c' }}"
-                                                  title="Start: {{ campaign.start_at|date:'DATETIME_FORMAT' }}">
-                                                {{ campaign.start_at|date:"M d, Y" }}
-                                            </time>
-                                            <span>-</span>
-                                            <time datetime="{{ campaign.end_at|date:'c' }}"
-                                                  title="End: {{ campaign.end_at|date:'DATETIME_FORMAT' }}">
-                                                {{ campaign.end_at|date:"M d, Y" }}
-                                            </time>
-                                        </div>
-                                        <div style="margin-top: 0.5rem;">
-                                            {% if campaign.start_at <= now and campaign.end_at >= now %}
-                                                <span style="color: #28a745; font-weight: 600;">Active</span>
-                                            {% elif campaign.start_at > now %}
-                                                <span style="color: #ffc107; font-weight: 600;">Upcoming</span>
-                                            {% else %}
-                                                <span style="color: #dc3545; font-weight: 600;">Expired</span>
-                                            {% endif %}
-                                        </div>
-                                    </div>
-                                </article>
-                            {% endfor %}
+                                                <div style="margin-top: 0.5rem;">
+                                                    {% if campaign.start_at <= now and campaign.end_at >= now %}
+                                                        <span style="font-weight: 600; color: #28a745;">Active</span>
+                                                    {% elif campaign.start_at > now %}
+                                                        <span style="font-weight: 600;">Upcoming</span>
+                                                    {% else %}
+                                                        <span style="font-weight: 600; color: #dc3545;">Expired</span>
+                                                    {% endif %}
+                                                </div>
+                                            </div>
+                                        </article>
+                                    {% endfor %}
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </section>
             {% endfor %}
         {% else %}
-            <section style="text-align: center; padding: 3rem 1rem; color: #666;">
+            <section style="text-align: center; padding: 3rem 1rem;">
                 <div style="font-size: 4rem; margin-bottom: 1rem;">📦</div>
-                <h2 style="margin: 0 0 1rem 0; color: #333;">No Campaigns Found</h2>
+                <h2 style="margin: 0 0 1rem 0;">No Campaigns Found</h2>
                 <p style="margin: 0; font-size: 1.1rem;">
                     No campaigns match your current filters.
                     <br>
@@ -178,66 +167,55 @@
                     {% if page_obj.has_previous %}
                         <a href="?{% if selected_status %}status={{ selected_status }}&{% endif %}{% if selected_game %}game={{ selected_game }}&{% endif %}{% if selected_per_page != 24 %}per_page={{ selected_per_page }}&{% endif %}page=1"
                            style="padding: 0.5rem 1rem;
-                                  border: 1px solid #555;
+                                  border: 1px solid;
                                   border-radius: 4px;
-                                  text-decoration: none;
-                                  color: #ddd">««</a>
+                                  text-decoration: none">««</a>
                         <a href="?{% if selected_status %}status={{ selected_status }}&{% endif %}{% if selected_game %}game={{ selected_game }}&{% endif %}{% if selected_per_page != 24 %}per_page={{ selected_per_page }}&{% endif %}page={{ page_obj.previous_page_number }}"
                            style="padding: 0.5rem 1rem;
-                                  border: 1px solid #555;
+                                  border: 1px solid;
                                   border-radius: 4px;
-                                  text-decoration: none;
-                                  color: #ddd"
+                                  text-decoration: none"
                            aria-label="Previous">«</a>
                     {% else %}
-                        <span style="padding: 0.5rem 1rem; color: #666;">««</span>
-                        <span style="padding: 0.5rem 1rem; color: #666;">«</span>
+                        <span style="padding: 0.5rem 1rem;">««</span>
+                        <span style="padding: 0.5rem 1rem;">«</span>
                     {% endif %}
                     {% for num in page_obj.paginator.page_range %}
                         {% if page_obj.number == num %}
-                            <span style="padding: 0.5rem 1rem;
-                                         background: #9146ff;
-                                         color: white;
-                                         border-radius: 4px;
-                                         font-weight: 600">{{ num }}</span>
+                            <span style="padding: 0.5rem 1rem; border-radius: 4px; font-weight: 600">{{ num }}</span>
                         {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                             <a href="?{% if selected_status %}status={{ selected_status }}&{% endif %}{% if selected_game %}game={{ selected_game }}&{% endif %}{% if selected_per_page != 24 %}per_page={{ selected_per_page }}&{% endif %}page={{ num }}"
                                style="padding: 0.5rem 1rem;
-                                      border: 1px solid #555;
+                                      border: 1px solid;
                                       border-radius: 4px;
-                                      text-decoration: none;
-                                      color: #ddd">{{ num }}</a>
+                                      text-decoration: none">{{ num }}</a>
                         {% elif num == 1 or num == page_obj.paginator.num_pages %}
                             <a href="?{% if selected_status %}status={{ selected_status }}&{% endif %}{% if selected_game %}game={{ selected_game }}&{% endif %}{% if selected_per_page != 24 %}per_page={{ selected_per_page }}&{% endif %}page={{ num }}"
                                style="padding: 0.5rem 1rem;
-                                      background: #f8f9fa;
-                                      border: 1px solid #dee2e6;
+                                      border: 1px solid;
                                       border-radius: 4px;
-                                      text-decoration: none;
-                                      color: #495057">{{ num }}</a>
+                                      text-decoration: none">{{ num }}</a>
                         {% elif num == page_obj.number|add:'-4' or num == page_obj.number|add:'4' %}
-                            <span style="padding: 0.5rem 1rem; color: #666;">...</span>
+                            <span style="padding: 0.5rem 1rem;">...</span>
                         {% endif %}
                     {% endfor %}
                     {% if page_obj.has_next %}
                         <a href="?{% if selected_status %}status={{ selected_status }}&{% endif %}{% if selected_game %}game={{ selected_game }}&{% endif %}{% if selected_per_page != 24 %}per_page={{ selected_per_page }}&{% endif %}page={{ page_obj.next_page_number }}"
                            style="padding: 0.5rem 1rem;
-                                  border: 1px solid #555;
+                                  border: 1px solid;
                                   border-radius: 4px;
-                                  text-decoration: none;
-                                  color: #ddd">»</a>
+                                  text-decoration: none">»</a>
                         <a href="?{% if selected_status %}status={{ selected_status }}&{% endif %}{% if selected_game %}game={{ selected_game }}&{% endif %}{% if selected_per_page != 24 %}per_page={{ selected_per_page }}&{% endif %}page={{ page_obj.paginator.num_pages }}"
                            style="padding: 0.5rem 1rem;
-                                  border: 1px solid #555;
+                                  border: 1px solid;
                                   border-radius: 4px;
-                                  text-decoration: none;
-                                  color: #ddd">»»</a>
+                                  text-decoration: none">»»</a>
                     {% else %}
-                        <span style="padding: 0.5rem 1rem; color: #666;">»</span>
-                        <span style="padding: 0.5rem 1rem; color: #666;">»»</span>
+                        <span style="padding: 0.5rem 1rem;">»</span>
+                        <span style="padding: 0.5rem 1rem;">»»</span>
                     {% endif %}
                 </div>
-                <small style="display: block; margin-top: 1rem; color: #6c757d;">
+                <small style="display: block; margin-top: 1rem;">
                     Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ page_obj.paginator.count }}
                     campaigns (Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }})
                 </small>