Refactor campaign card rendering logic for improved clarity and consistency

This commit is contained in:
Joakim Hellsén 2025-07-10 05:48:44 +02:00
commit 0e6b703768

View file

@ -76,8 +76,9 @@
<div class="d-flex"> <div class="d-flex">
<div class="campaign-image flex-shrink-0 me-3"> <div class="campaign-image flex-shrink-0 me-3">
{% if campaign.image_url %} {% if campaign.image_url %}
<img src="{{ campaign.image_url }}" width="70" height="70" class="rounded" <img src="{{ campaign.image_url }}" width="70" height="70"
alt="{{ campaign.name }}" style="object-fit: cover;"> class="rounded" alt="{{ campaign.name }}"
style="object-fit: cover;">
{% else %} {% else %}
<div class="bg-light rounded" <div class="bg-light rounded"
style="width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;"> style="width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;">
@ -93,12 +94,15 @@
</div> </div>
<p class="mb-1 small text-muted text-truncate"> <p class="mb-1 small text-muted text-truncate">
<a href="{% url 'twitch:game_detail' campaign.game.id %}" <a href="{% url 'twitch:game_detail' campaign.game.id %}"
class="text-decoration-none" title="{{ campaign.game.display_name }}"> class="text-decoration-none"
<i class="fas fa-gamepad me-1"></i>{{ campaign.game.display_name }} title="{{ campaign.game.display_name }}">
<i
class="fas fa-gamepad me-1"></i>{{ campaign.game.display_name }}
</a> </a>
</p> </p>
<p class="mb-0 small text-muted"> <p class="mb-0 small text-muted">
<i class="far fa-calendar-alt me-1"></i>{{ campaign.start_at|date:"M d, Y" }} <i
class="far fa-calendar-alt me-1"></i>{{ campaign.start_at|date:"M d, Y" }}
- {{ campaign.end_at|date:"M d, Y" }} - {{ campaign.end_at|date:"M d, Y" }}
</p> </p>
</div> </div>
@ -130,9 +134,9 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row mt-3"> <div class="row mt-3">
<div class="col-12"> <div class="col-12">
<div class="card border-0 shadow-sm"> <div class="card border-0 shadow-sm">
<div class="card-header bg-dark text-white py-2"> <div class="card-header bg-dark text-white py-2">
@ -163,5 +167,5 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}