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

Improve dashboard layout

Browse source
This commit is contained in:
Joakim Hellsén 2025-08-29 18:38:49 +02:00
commit 87e700604c
1 changed files with 36 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

33
templates/twitch/dashboard.html
View file

@ -19,47 +19,50 @@
</h2> </h2>
{% for game_id, game_data in org_data.games.items %} {% for game_id, game_data in org_data.games.items %}
<article> <article>
<header style="display: flex; align-items: flex-start; margin-bottom: 1rem;"> <header style="margin-bottom: 1rem;">
<div style="flex-shrink: 0; margin-right: 1rem;"> <h3 style="margin: 0 0 0.5rem 0;">
<a href="{% url 'twitch:game_detail' game_id %}">{{ game_data.name }}</a>
</h3>
</header>
<div style="display: flex; gap: 1rem;">
<div style="flex-shrink: 0;">
<img src="{{ game_data.box_art }}" <img src="{{ game_data.box_art }}"
alt="Box art for {{ game_data.name }}" alt="Box art for {{ game_data.name }}"
width="200" width="200"
height="267" height="267"
style="border-radius: 8px"> style="border-radius: 8px">
</div> </div>
<div style="flex: 1;"> <div style="flex: 1; overflow-x: auto;">
<h3 style="margin: 0 0 0.5rem 0;"> <div style="display: flex; gap: 1rem; min-width: max-content;">
<a href="{% url 'twitch:game_detail' game_id %}">{{ game_data.name }}</a>
</h3>
</div>
</header>
<div>
{% for campaign in game_data.campaigns %} {% for campaign in game_data.campaigns %}
<article style="display: flex; <article style="display: flex;
flex-direction: column;
align-items: center; align-items: center;
margin-bottom: 1rem;
padding: 0.5rem; padding: 0.5rem;
border: 1px solid #ddd; flex-shrink: 0">
border-radius: 8px"> <div>
<div style="flex: 1;">
<a href="{% url 'twitch:campaign_detail' campaign.id %}"> <a href="{% url 'twitch:campaign_detail' campaign.id %}">
<img src="{{ campaign.image_url }}" <img src="{{ campaign.image_url }}"
alt="Image for {{ campaign.name }}" alt="Image for {{ campaign.name }}"
width="120" width="120"
height="120" height="120"
style="border-radius: 4px"> style="border-radius: 4px">
<h4 style="margin: 0.5rem 0;">{{ campaign.clean_name }}</h4> <h4 style="margin: 0.5rem 0; text-align: left;">{{ campaign.clean_name }}</h4>
</a> </a>
<time datetime="{{ campaign.end_at|date:'c' }}" <time datetime="{{ campaign.end_at|date:'c' }}"
title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}" title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}"
style="font-size: 0.9rem; style="font-size: 0.9rem;
color: #666"> color: #666;
display: block;
text-align: left">
Ends in {{ campaign.end_at|timeuntil }} Ends in {{ campaign.end_at|timeuntil }}
</time> </time>
</div> </div>
</article> </article>
{% endfor %} {% endfor %}
</div> </div>
</div>
</div>
</article> </article>
{% endfor %} {% endfor %}
</section> </section>