Add grid and list views for games with improved templates and routing
This commit is contained in:
parent
408514d0c2
commit
ebd3633356
4 changed files with 40 additions and 4 deletions
64
templates/twitch/games_grid.html
Normal file
64
templates/twitch/games_grid.html
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
{% extends "base.html" %}
|
||||
{% block title %}
|
||||
Games - Grid View
|
||||
{% endblock title %}
|
||||
{% block content %}
|
||||
<main>
|
||||
<header>
|
||||
<h1>All Games</h1>
|
||||
<p>Browse all available games</p>
|
||||
<p>
|
||||
<a href="{% url 'twitch:game_list_simple' %}">List View</a>
|
||||
</p>
|
||||
</header>
|
||||
{% if games_by_org %}
|
||||
<section>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
|
||||
{% for organization, games in games_by_org.items %}
|
||||
{% for item in games %}
|
||||
<article style="padding: 0.25rem;
|
||||
border-radius: 8px;
|
||||
flex: 1 1 160px;
|
||||
text-align: center">
|
||||
<div style="margin-bottom: 0.25rem;">
|
||||
{% if item.game.box_art_base_url %}
|
||||
<img src="{{ item.game.box_art_base_url }}"
|
||||
alt="Box art for {{ item.game.display_name }}"
|
||||
width="180"
|
||||
height="240"
|
||||
style="border-radius: 8px">
|
||||
{% else %}
|
||||
<div style="width: 180px;
|
||||
height: 240px;
|
||||
border: 1px solid;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.8rem;
|
||||
margin: 0 auto">
|
||||
🎮
|
||||
<br>
|
||||
No Image
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<h4 style="margin: 0;">
|
||||
<a href="{% url 'twitch:game_detail' item.game.id %}"
|
||||
style="text-decoration: none;
|
||||
color: inherit">{{ item.game.display_name }}</a>
|
||||
</h4>
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% 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 %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue