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

Refactor game list layout for improved organization and visual consistency

Browse source
This commit is contained in:
Joakim Hellsén 2025-08-30 00:19:45 +02:00
commit 408514d0c2
1 changed files with 23 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

33
templates/twitch/game_list.html
View file

@ -5,50 +5,51 @@
{% block content %} {% block content %}
<main> <main>
<header> <header>
<h1>Games</h1> <h1>All Games</h1>
<p>Browse all available games</p> <p>Browse all available games</p>
</header> </header>
{% if games_by_org %} {% if games_by_org %}
<section>
<div style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
{% for organization, games in games_by_org.items %} {% for organization, games in games_by_org.items %}
<section style="margin-bottom: 3rem;">
<h2 style="margin-bottom: 1rem;">{{ organization.name }}</h2>
<div style="display: flex; flex-direction: column; gap: 1rem;">
{% for item in games %} {% for item in games %}
<article style="display: flex; gap: 1rem; align-items: center;"> <article style="padding: 0.25rem;
<div style="flex-shrink: 0;"> border-radius: 8px;
flex: 1 1 160px;
text-align: center">
<div style="margin-bottom: 0.25rem;">
{% if item.game.box_art_base_url %} {% if item.game.box_art_base_url %}
<img src="{{ item.game.box_art_base_url }}" <img src="{{ item.game.box_art_base_url }}"
alt="Box art for {{ item.game.display_name }}" alt="Box art for {{ item.game.display_name }}"
width="120" width="180"
height="160" height="240"
style="border-radius: 8px"> style="border-radius: 8px">
{% else %} {% else %}
<div style="width: 120px; <div style="width: 180px;
height: 160px; height: 240px;
border: 1px solid; border: 1px solid;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 1rem"> font-size: 0.8rem;
margin: 0 auto">
🎮 🎮
<br> <br>
No Image No Image
</div> </div>
{% endif %} {% endif %}
</div> </div>
<div style="flex: 1;"> <h4 style="margin: 0;">
<h3 style="margin: 0;">
<a href="{% url 'twitch:game_detail' item.game.id %}" <a href="{% url 'twitch:game_detail' item.game.id %}"
style="text-decoration: none; style="text-decoration: none;
color: inherit">{{ item.game.display_name }}</a> color: inherit">{{ item.game.display_name }}</a>
</h3> </h4>
</div>
</article> </article>
{% endfor %} {% endfor %}
{% endfor %}
</div> </div>
</section> </section>
{% endfor %}
{% else %} {% else %}
<section style="text-align: center; padding: 3rem 1rem;"> <section style="text-align: center; padding: 3rem 1rem;">
<div style="font-size: 4rem; margin-bottom: 1rem;">🎮</div> <div style="font-size: 4rem; margin-bottom: 1rem;">🎮</div>