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

Enhance game list view to group games by organization and improve performance with optimized queries

Browse source
This commit is contained in:
Joakim Hellsén 2025-07-10 04:31:28 +02:00
commit 250aaac2a0
3 changed files with 204 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

13
templates/base.html
View file

@ -50,6 +50,19 @@
max-width: 120px;
max-height: 120px;
}
.hover-effect {
transition: all 0.3s ease;
}
.hover-effect:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}
.card-header h3 {
font-size: 1.5rem;
}
</style>
{% block extra_css %}{% endblock %}
</head>

79
templates/twitch/game_list.html
View file

@ -1,49 +1,60 @@
{% extends "base.html" %}
{% block title %}Games - Twitch Drops Tracker{% endblock %}
{% block title %}Games by Organization - Twitch Drops Tracker{% endblock %}
{% block content %}
<div class="row mb-4">
<div class="col">
<h1 class="mb-4"><i class="fas fa-gamepad me-2 twitch-color"></i>Games</h1>
<p class="lead">Browse all games with Twitch drop campaigns.</p>
<h1 class="mb-4"><i class="fas fa-gamepad me-2 twitch-color"></i>Games by Organization</h1>
<p class="lead">Browse all games with Twitch drop campaigns, grouped by organization.</p>
</div>
</div>
<div class="row row-cols-1 row-cols-md-3 g-4">
{% for item in games_with_counts %}
<div class="col">
<div class="card h-100 border-0 shadow-sm hover-effect">
{% if games_by_org %}
{% for organization, games in games_by_org.items %}
<div class="card mb-4 shadow-sm">
<div class="card-header bg-dark text-white">
<h3 class="mb-0">
<i class="fas fa-building me-2"></i>{{ organization.name }}
</h3>
</div>
<div class="card-body">
<h5 class="card-title">
<a href="{% url 'twitch:game_detail' item.game.id %}" class="text-decoration-none">
{{ item.game.display_name }}
</a>
</h5>
<div class="d-flex justify-content-between mt-3">
<span class="badge bg-secondary">
<i class="fas fa-gift me-1"></i> {{ item.campaign_count }} Campaigns
</span>
{% if item.active_count > 0 %}
<span class="badge bg-success">
<i class="fas fa-circle-play me-1"></i> {{ item.active_count }} Active
</span>
{% endif %}
<div class="row row-cols-1 row-cols-md-3 g-4">
{% for item in games %}
<div class="col">
<div class="card h-100 border-0 shadow-sm hover-effect">
<div class="card-body">
<h5 class="card-title">
<a href="{% url 'twitch:game_detail' item.game.id %}" class="text-decoration-none">
{{ item.game.display_name }}
</a>
</h5>
<div class="d-flex justify-content-between mt-3">
<span class="badge bg-secondary">
<i class="fas fa-gift me-1"></i> {{ item.campaign_count }} Campaigns
</span>
{% if item.active_count > 0 %}
<span class="badge bg-success">
<i class="fas fa-circle-play me-1"></i> {{ item.active_count }} Active
</span>
{% endif %}
</div>
</div>
<div class="card-footer bg-transparent border-0">
<a href="{% url 'twitch:game_detail' item.game.id %}" class="btn btn-sm btn-primary">
<i class="fas fa-eye me-1"></i> View Campaigns
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="card-footer bg-transparent border-0">
<a href="{% url 'twitch:game_detail' item.game.id %}" class="btn btn-sm btn-primary">
<i class="fas fa-eye me-1"></i> View Campaigns
</a>
</div>
</div>
</div>
{% empty %}
<div class="col-12">
<div class="alert alert-info">
<i class="fas fa-info-circle me-2"></i> No games found.
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="alert alert-info">
<i class="fas fa-info-circle me-2"></i> No games found.
</div>
{% endif %}
{% endblock %}