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

Refactor game list layout to enhance usability and improve visual presentation

Browse source
This commit is contained in:
Joakim Hellsén 2025-08-30 00:17:14 +02:00
commit 8cd0b8ca1f
1 changed files with 54 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

73
templates/twitch/game_list.html
View file

@ -3,23 +3,58 @@
Games Games
{% endblock title %} {% endblock title %}
{% block content %} {% block content %}
<h1>Games</h1> <main>
{% if games_by_org %} <header>
{% for organization, games in games_by_org.items %} <h1>Games</h1>
<h2>{{ organization.name }}</h2> <p>Browse all available games</p>
<table> </header>
<tbody> {% if games_by_org %}
{% for item in games %} {% for organization, games in games_by_org.items %}
<tr> <section style="margin-bottom: 3rem;">
<td> <h2 style="margin-bottom: 1rem;">{{ organization.name }}</h2>
<a href="{% url 'twitch:game_detail' item.game.id %}">{{ item.game.display_name }}</a> <div style="display: flex; flex-direction: column; gap: 1rem;">
</td> {% for item in games %}
</tr> <article style="display: flex; gap: 1rem; align-items: center;">
{% endfor %} <div style="flex-shrink: 0;">
</tbody> {% if item.game.box_art_base_url %}
</table> <img src="{{ item.game.box_art_base_url }}"
{% endfor %} alt="Box art for {{ item.game.display_name }}"
{% else %} width="120"
No games found. height="160"
{% endif %} style="border-radius: 8px">
{% else %}
<div style="width: 120px;
height: 160px;
border: 1px solid;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem">
🎮
<br>
No Image
</div>
{% endif %}
</div>
<div style="flex: 1;">
<h3 style="margin: 0;">
<a href="{% url 'twitch:game_detail' item.game.id %}"
style="text-decoration: none;
color: inherit">{{ item.game.display_name }}</a>
</h3>
</div>
</article>
{% endfor %}
</div>
</section>
{% endfor %}
{% else %}
<section style="text-align: center; padding: 3rem 1rem;">
<div style="font-size: 4rem; margin-bottom: 1rem;">🎮</div>
<h2 style="margin: 0 0 1rem 0;">No Games Found</h2>
<p style="margin: 0; font-size: 1.1rem;">No games are currently available.</p>
</section>
{% endif %}
</main>
{% endblock content %} {% endblock content %}