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

Refactor campaign card layout for improved responsiveness and visual consistency

Browse source
This commit is contained in:
Joakim Hellsén 2025-07-10 04:41:57 +02:00
commit 376b267064
1 changed files with 29 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

26
templates/twitch/dashboard.html
View file

@ -21,34 +21,40 @@
<div class="row g-3"> <div class="row g-3">
{% for campaign in active_campaigns %} {% for campaign in active_campaigns %}
<div class="col-md-6 col-lg-4 col-xl-3"> <div class="col-md-6 col-lg-4 col-xl-3">
<div class="d-flex campaign-card campaign-active border rounded p-2"> <div class="campaign-card campaign-active border rounded p-2">
<div class="campaign-image me-3"> <div class="d-flex">
<div class="campaign-image flex-shrink-0 me-3">
{% if campaign.image_url %} {% if campaign.image_url %}
<img src="{{ campaign.image_url }}" width="80" height="80" class="rounded" <img src="{{ campaign.image_url }}" width="70" height="70" class="rounded"
alt="{{ campaign.name }}" style="object-fit: cover;"> alt="{{ campaign.name }}" style="object-fit: cover;">
{% else %} {% else %}
<div class="bg-light rounded" <div class="bg-light rounded"
style="width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;"> style="width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;">
<i class="fas fa-image text-muted" style="font-size: 1.5rem;"></i> <i class="fas fa-image text-muted" style="font-size: 1.5rem;"></i>
</div> </div>
{% endif %} {% endif %}
</div> </div>
<div class="campaign-details flex-grow-1"> <div class="campaign-details min-w-0">
<h6 class="mb-1 text-truncate" title="{{ campaign.name }}">{{ campaign.name }}</h6> <div class="title-wrapper" style="min-height: 2.4rem;">
<p class="mb-1 small text-muted"> <h6 class="mb-1" title="{{ campaign.name }}"
style="display: -webkit-box; display: box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; box-orient: vertical; overflow: hidden; font-size: 0.9rem;">
{{ campaign.name }}</h6>
</div>
<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"> class="text-decoration-none" title="{{ campaign.game.display_name }}">
<i class="fas fa-gamepad me-1"></i>{{ campaign.game.display_name }} <i class="fas fa-gamepad me-1"></i>{{ campaign.game.display_name }}
</a> </a>
</p> </p>
<div class="d-flex justify-content-between align-items-center mt-1"> </div>
</div>
<div class="d-flex justify-content-between align-items-center mt-2">
<span class="badge bg-success">Active</span> <span class="badge bg-success">Active</span>
<a href="{% url 'twitch:campaign_detail' campaign.id %}" <a href="{% url 'twitch:campaign_detail' campaign.id %}"
class="btn btn-sm btn-outline-primary">Details</a> class="btn btn-sm btn-outline-primary">Details</a>
</div> </div>
</div> </div>
</div> </div>
</div>
{% endfor %} {% endfor %}
</div> </div>
{% else %} {% else %}