TheLovinator/ttvdrops
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor campaign list filters and improve layout for better usability

Browse source
This commit is contained in:
Joakim Hellsén 2025-08-30 00:14:18 +02:00
commit 15caff2bc9
1 changed files with 99 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

116
templates/twitch/campaign_list.html
View file

@ -21,11 +21,7 @@
<!-- Game Filter --> <!-- Game Filter -->
<div> <div>
<label for="game" style="margin-right: 0.5rem; font-weight: 600;">Game:</label> <label for="game" style="margin-right: 0.5rem; font-weight: 600;">Game:</label>
<select id="game" <select id="game" name="game">
name="game"
style="padding: 0.5rem;
border-radius: 4px;
border: 1px solid #ddd">
<option value="">All Games</option> <option value="">All Games</option>
{% for game in games %} {% for game in games %}
<option value="{{ game.id }}" <option value="{{ game.id }}"
@ -38,11 +34,7 @@
<!-- Status Filter --> <!-- Status Filter -->
<div> <div>
<label for="status" style="margin-right: 0.5rem; font-weight: 600;">Status:</label> <label for="status" style="margin-right: 0.5rem; font-weight: 600;">Status:</label>
<select id="status" <select id="status" name="status">
name="status"
style="padding: 0.5rem;
border-radius: 4px;
border: 1px solid #ddd">
<option value="">All Statuses</option> <option value="">All Statuses</option>
{% for status in status_options %} {% for status in status_options %}
<option value="{{ status }}" <option value="{{ status }}"
@ -50,37 +42,30 @@
{% endfor %} {% endfor %}
</select> </select>
</div> </div>
<button type="submit" <button type="submit">Apply Filters</button>
style="padding: 0.5rem 1rem;
background: #9146ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer">Apply Filters</button>
</div> </div>
</form> </form>
{% if campaigns %} {% if campaigns %}
{% regroup campaigns by game as campaigns_by_game %} {% regroup campaigns by game as campaigns_by_game %}
{% for game_group in campaigns_by_game %} {% for game_group in campaigns_by_game %}
<section style="margin-bottom: 3rem;"> <section style="margin-bottom: 3rem;">
<header style="display: flex; align-items: flex-start; margin-bottom: 1rem;"> <div style="display: flex; gap: 1rem;">
<div style="flex-shrink: 0; margin-right: 1rem;"> <div style="flex-shrink: 0;">
{% if game_group.grouper.box_art_base_url %} {% if game_group.grouper.box_art_base_url %}
<img src="{{ 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 }}" alt="Box art for {{ game_group.grouper.display_name }}"
width="200" width="120"
height="267" height="160"
style="border-radius: 8px"> style="border-radius: 8px">
{% else %} {% else %}
<div style="width: 200px; <div style="width: 120px;
height: 267px; height: 160px;
border: 1px solid #444; border: 1px solid;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #ccc; font-size: 1rem">
font-size: 1.2rem">
🎮 🎮
<br> <br>
No Image No Image
@ -88,13 +73,15 @@
{% endif %} {% endif %}
</div> </div>
<div style="flex: 1;"> <div style="flex: 1;">
<header style="margin-bottom: 1rem;">
<h2 style="margin: 0 0 0.5rem 0;"> <h2 style="margin: 0 0 0.5rem 0;">
<a href="{% url 'twitch:game_detail' game_group.grouper.id %}">{{ game_group.grouper.display_name }}</a> <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> </h2>
<p style="margin: 0; color: #666;"> <p style="margin: 0;">
<a href="{% url 'twitch:organization_detail' game_group.list.0.owner.id %}">{{ game_group.list.0.owner.name }}</a> <a href="{% url 'twitch:organization_detail' game_group.list.0.owner.id %}"
style="text-decoration: none">{{ game_group.list.0.owner.name }}</a>
</p> </p>
</div>
</header> </header>
<div style="overflow-x: auto;"> <div style="overflow-x: auto;">
<div style="display: flex; gap: 1rem; min-width: max-content;"> <div style="display: flex; gap: 1rem; min-width: max-content;">
@ -105,7 +92,8 @@
padding: 0.5rem; padding: 0.5rem;
flex-shrink: 0"> flex-shrink: 0">
<div> <div>
<a href="{% url 'twitch:campaign_detail' campaign.id %}"> <a href="{% url 'twitch:campaign_detail' campaign.id %}"
style="text-decoration: none">
{% if campaign.image_url %} {% if campaign.image_url %}
<img src="{{ campaign.image_url }}" <img src="{{ campaign.image_url }}"
alt="Campaign artwork for {{ campaign.name }}" alt="Campaign artwork for {{ campaign.name }}"
@ -115,12 +103,11 @@
{% else %} {% else %}
<div style="width: 120px; <div style="width: 120px;
height: 120px; height: 120px;
border: 1px solid #444; border: 1px solid;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #ccc;
font-size: 0.9rem"> font-size: 0.9rem">
📦 📦
<br> <br>
@ -129,7 +116,7 @@
{% endif %} {% endif %}
<h4 style="margin: 0.5rem 0; text-align: left;">{{ campaign.clean_name }}</h4> <h4 style="margin: 0.5rem 0; text-align: left;">{{ campaign.clean_name }}</h4>
</a> </a>
<div style="font-size: 0.9rem; color: #666;"> <div style="font-size: 0.9rem;">
<time datetime="{{ campaign.start_at|date:'c' }}" <time datetime="{{ campaign.start_at|date:'c' }}"
title="Start: {{ campaign.start_at|date:'DATETIME_FORMAT' }}"> title="Start: {{ campaign.start_at|date:'DATETIME_FORMAT' }}">
{{ campaign.start_at|date:"M d, Y" }} {{ campaign.start_at|date:"M d, Y" }}
@ -142,11 +129,11 @@
</div> </div>
<div style="margin-top: 0.5rem;"> <div style="margin-top: 0.5rem;">
{% if campaign.start_at <= now and campaign.end_at >= now %} {% if campaign.start_at <= now and campaign.end_at >= now %}
<span style="color: #28a745; font-weight: 600;">Active</span> <span style="font-weight: 600; color: #28a745;">Active</span>
{% elif campaign.start_at > now %} {% elif campaign.start_at > now %}
<span style="color: #ffc107; font-weight: 600;">Upcoming</span> <span style="font-weight: 600;">Upcoming</span>
{% else %} {% else %}
<span style="color: #dc3545; font-weight: 600;">Expired</span> <span style="font-weight: 600; color: #dc3545;">Expired</span>
{% endif %} {% endif %}
</div> </div>
</div> </div>
@ -154,12 +141,14 @@
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</div>
</div>
</section> </section>
{% endfor %} {% endfor %}
{% else %} {% 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> <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;"> <p style="margin: 0; font-size: 1.1rem;">
No campaigns match your current filters. No campaigns match your current filters.
<br> <br>
@ -178,66 +167,55 @@
{% if page_obj.has_previous %} {% 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" <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; style="padding: 0.5rem 1rem;
border: 1px solid #555; border: 1px solid;
border-radius: 4px; border-radius: 4px;
text-decoration: none; text-decoration: none">««</a>
color: #ddd">««</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 }}" <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; style="padding: 0.5rem 1rem;
border: 1px solid #555; border: 1px solid;
border-radius: 4px; border-radius: 4px;
text-decoration: none; text-decoration: none"
color: #ddd"
aria-label="Previous">«</a> aria-label="Previous">«</a>
{% else %} {% else %}
<span style="padding: 0.5rem 1rem; color: #666;">««</span> <span style="padding: 0.5rem 1rem;">««</span>
<span style="padding: 0.5rem 1rem; color: #666;">«</span> <span style="padding: 0.5rem 1rem;">«</span>
{% endif %} {% endif %}
{% for num in page_obj.paginator.page_range %} {% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %} {% if page_obj.number == num %}
<span style="padding: 0.5rem 1rem; <span style="padding: 0.5rem 1rem; border-radius: 4px; font-weight: 600">{{ num }}</span>
background: #9146ff;
color: white;
border-radius: 4px;
font-weight: 600">{{ num }}</span>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %} {% 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 }}" <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; style="padding: 0.5rem 1rem;
border: 1px solid #555; border: 1px solid;
border-radius: 4px; border-radius: 4px;
text-decoration: none; text-decoration: none">{{ num }}</a>
color: #ddd">{{ num }}</a>
{% elif num == 1 or num == page_obj.paginator.num_pages %} {% 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 }}" <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; style="padding: 0.5rem 1rem;
background: #f8f9fa; border: 1px solid;
border: 1px solid #dee2e6;
border-radius: 4px; border-radius: 4px;
text-decoration: none; text-decoration: none">{{ num }}</a>
color: #495057">{{ num }}</a>
{% elif num == page_obj.number|add:'-4' or num == page_obj.number|add:'4' %} {% 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 %} {% endif %}
{% endfor %} {% endfor %}
{% if page_obj.has_next %} {% 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 }}" <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; style="padding: 0.5rem 1rem;
border: 1px solid #555; border: 1px solid;
border-radius: 4px; border-radius: 4px;
text-decoration: none; text-decoration: none">»</a>
color: #ddd">»</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 }}" <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; style="padding: 0.5rem 1rem;
border: 1px solid #555; border: 1px solid;
border-radius: 4px; border-radius: 4px;
text-decoration: none; text-decoration: none">»»</a>
color: #ddd">»»</a>
{% else %} {% else %}
<span style="padding: 0.5rem 1rem; color: #666;">»</span> <span style="padding: 0.5rem 1rem;">»</span>
<span style="padding: 0.5rem 1rem; color: #666;">»»</span> <span style="padding: 0.5rem 1rem;">»»</span>
{% endif %} {% endif %}
</div> </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 }} 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 }}) campaigns (Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }})
</small> </small>