Enhance campaign list page with improved layout
This commit is contained in:
parent
6732cfa6de
commit
3f931701b5
1 changed files with 236 additions and 103 deletions
|
|
@ -4,111 +4,244 @@
|
||||||
Drop Campaigns - Twitch Drops Tracker
|
Drop Campaigns - Twitch Drops Tracker
|
||||||
{% endblock title %}
|
{% endblock title %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
<main>
|
||||||
|
<header>
|
||||||
<h1>Drop Campaigns</h1>
|
<h1>Drop Campaigns</h1>
|
||||||
<form method="get" action="{% url 'twitch:campaign_list' %}">
|
<p>Browse all available drop campaigns</p>
|
||||||
|
</header>
|
||||||
|
<form method="get"
|
||||||
|
action="{% url 'twitch:campaign_list' %}"
|
||||||
|
style="margin-bottom: 2rem;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 8px">
|
||||||
|
<div style="display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap">
|
||||||
<!-- Game Filter -->
|
<!-- Game Filter -->
|
||||||
<select id="game" name="game">
|
<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">
|
||||||
<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 }}"
|
||||||
{% if selected_game == game.id %}selected{% endif %}>{{ game.display_name }}</option>
|
{% if selected_game == game.id %}selected{% endif %}>
|
||||||
|
{{ game.display_name|default:game.name|default:game.slug|default:game.id }}
|
||||||
|
</option>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</select>
|
</select>
|
||||||
|
</div>
|
||||||
<!-- Status Filter -->
|
<!-- Status Filter -->
|
||||||
<select id="status" name="status">
|
<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">
|
||||||
<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 }}"
|
||||||
{% if selected_status == status %}selected{% endif %}>{{ status|title }}</option>
|
{% if selected_status == status %}selected{% endif %}>{{ status|title }}</option>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</select>
|
</select>
|
||||||
<button type="submit">Apply Filters</button>
|
</div>
|
||||||
|
<button type="submit"
|
||||||
|
style="padding: 0.5rem 1rem;
|
||||||
|
background: #9146ff;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer">Apply Filters</button>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<h5>Campaign List</h5>
|
|
||||||
{% if campaigns %}
|
{% if campaigns %}
|
||||||
{% for campaign in 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;">
|
||||||
|
{% 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"
|
||||||
|
style="border-radius: 8px">
|
||||||
|
{% else %}
|
||||||
|
<div style="width: 200px;
|
||||||
|
height: 267px;
|
||||||
|
border: 1px solid #444;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 1.2rem">
|
||||||
|
🎮
|
||||||
|
<br>
|
||||||
|
No Image
|
||||||
|
</div>
|
||||||
|
{% 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 %}
|
{% if campaign.image_url %}
|
||||||
<img src="{{ campaign.image_url }}"
|
<img src="{{ campaign.image_url }}"
|
||||||
width="70"
|
alt="Campaign artwork for {{ campaign.name }}"
|
||||||
height="70"
|
width="120"
|
||||||
alt="{{ campaign.name }}">
|
height="120"
|
||||||
|
style="border-radius: 4px">
|
||||||
{% else %}
|
{% else %}
|
||||||
<img src="{% static 'images/placeholder.png' %}"
|
<div style="width: 120px;
|
||||||
width="70"
|
height: 120px;
|
||||||
height="70"
|
border: 1px solid #444;
|
||||||
alt="No Image Available">
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 0.9rem">
|
||||||
|
📦
|
||||||
|
<br>
|
||||||
|
No Image
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<h6 title="{{ campaign.name }}">{{ campaign.clean_name }}</h6>
|
<h4 style="margin: 0.5rem 0; text-align: left;">{{ campaign.clean_name }}</h4>
|
||||||
<p>
|
</a>
|
||||||
<a href="{% url 'twitch:game_detail' campaign.game.id %}"
|
<div style="font-size: 0.9rem; color: #666;">
|
||||||
title="{{ campaign.game.display_name }}">{{ campaign.game.display_name }}</a>
|
<time datetime="{{ campaign.start_at|date:'c' }}"
|
||||||
</p>
|
title="Start: {{ campaign.start_at|date:'DATETIME_FORMAT' }}">
|
||||||
<p>
|
|
||||||
{{ campaign.start_at|date:"M d, Y" }}
|
{{ campaign.start_at|date:"M d, Y" }}
|
||||||
- {{ campaign.end_at|date:"M d, Y" }}
|
</time>
|
||||||
</p>
|
<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 %}
|
{% if campaign.start_at <= now and campaign.end_at >= now %}
|
||||||
{% if campaign.status == 'ACTIVE' %}Active{% endif %}
|
<span style="color: #28a745; font-weight: 600;">Active</span>
|
||||||
{% elif campaign.start_at > now %}
|
{% elif campaign.start_at > now %}
|
||||||
Upcoming
|
<span style="color: #ffc107; font-weight: 600;">Upcoming</span>
|
||||||
{% else %}
|
{% else %}
|
||||||
Expired
|
<span style="color: #dc3545; font-weight: 600;">Expired</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<a href="{% url 'twitch:campaign_detail' campaign.id %}">Details</a>
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% else %}
|
{% else %}
|
||||||
No campaigns found with the current filters.
|
<section style="text-align: center; padding: 3rem 1rem; color: #666;">
|
||||||
|
<div style="font-size: 4rem; margin-bottom: 1rem;">📦</div>
|
||||||
|
<h2 style="margin: 0 0 1rem 0; color: #333;">No Campaigns Found</h2>
|
||||||
|
<p style="margin: 0; font-size: 1.1rem;">
|
||||||
|
No campaigns match your current filters.
|
||||||
|
<br>
|
||||||
|
Try adjusting your search criteria.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<!-- Pagination -->
|
<!-- Pagination -->
|
||||||
{% if is_paginated %}
|
{% if is_paginated %}
|
||||||
<nav>
|
<nav style="margin-top: 3rem; text-align: center;">
|
||||||
<ul>
|
<div style="display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap">
|
||||||
{% if page_obj.has_previous %}
|
{% if page_obj.has_previous %}
|
||||||
<li>
|
<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;
|
||||||
««
|
border: 1px solid #555;
|
||||||
</a>
|
border-radius: 4px;
|
||||||
</li>
|
text-decoration: none;
|
||||||
<li>
|
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;
|
||||||
|
border: 1px solid #555;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #ddd"
|
||||||
aria-label="Previous">«</a>
|
aria-label="Previous">«</a>
|
||||||
</li>
|
|
||||||
{% else %}
|
{% else %}
|
||||||
<li>««</li>
|
<span style="padding: 0.5rem 1rem; color: #666;">««</span>
|
||||||
<li>«</li>
|
<span style="padding: 0.5rem 1rem; color: #666;">«</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 %}
|
||||||
<li>{{ num }}</li>
|
<span style="padding: 0.5rem 1rem;
|
||||||
|
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' %}
|
||||||
<li>
|
<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 }}">{{ num }}</a>
|
style="padding: 0.5rem 1rem;
|
||||||
</li>
|
border: 1px solid #555;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #ddd">{{ num }}</a>
|
||||||
{% elif num == 1 or num == page_obj.paginator.num_pages %}
|
{% elif num == 1 or num == page_obj.paginator.num_pages %}
|
||||||
<li>
|
<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 }}">{{ num }}</a>
|
style="padding: 0.5rem 1rem;
|
||||||
</li>
|
background: #f8f9fa;
|
||||||
|
border: 1px solid #dee2e6;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-decoration: none;
|
||||||
|
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' %}
|
||||||
<li>...</li>
|
<span style="padding: 0.5rem 1rem; color: #666;">...</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% if page_obj.has_next %}
|
{% if page_obj.has_next %}
|
||||||
<li>
|
<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 }}">»</a>
|
style="padding: 0.5rem 1rem;
|
||||||
</li>
|
border: 1px solid #555;
|
||||||
<li>
|
border-radius: 4px;
|
||||||
<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>
|
text-decoration: none;
|
||||||
</li>
|
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 }}"
|
||||||
|
style="padding: 0.5rem 1rem;
|
||||||
|
border: 1px solid #555;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #ddd">»»</a>
|
||||||
{% else %}
|
{% else %}
|
||||||
<li>»</li>
|
<span style="padding: 0.5rem 1rem; color: #666;">»</span>
|
||||||
<li>»»</li>
|
<span style="padding: 0.5rem 1rem; color: #666;">»»</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</ul>
|
</div>
|
||||||
</nav>
|
<small style="display: block; margin-top: 1rem; color: #6c757d;">
|
||||||
<small>
|
|
||||||
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
|
campaigns (Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }})
|
||||||
(Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }})
|
|
||||||
</small>
|
</small>
|
||||||
|
</nav>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
</main>
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue