78 lines
3.9 KiB
HTML
78 lines
3.9 KiB
HTML
{% extends "base.html" %}
|
|
{% load image_tags %}
|
|
{% block title %}
|
|
Games - Grid View
|
|
{% endblock title %}
|
|
{% block extra_head %}
|
|
<link rel="alternate"
|
|
type="application/rss+xml"
|
|
title="Newly added games (RSS)"
|
|
href="{% url 'twitch:game_feed' %}" />
|
|
<link rel="alternate"
|
|
type="application/atom+xml"
|
|
title="Newly added games (Atom)"
|
|
href="{% url 'twitch:game_feed_atom' %}" />
|
|
{% endblock extra_head %}
|
|
{% block content %}
|
|
<main>
|
|
<header>
|
|
<h1 id="page-title">All Games</h1>
|
|
<div>
|
|
<a href="{% url 'twitch:games_list' %}" title="View games as list">[list]</a>
|
|
<a href="{% url 'twitch:game_feed' %}" title="RSS feed for all games">[rss]</a>
|
|
<a href="{% url 'twitch:game_feed_atom' %}"
|
|
title="Atom feed for all games">[atom]</a>
|
|
<a href="{% url 'twitch:export_games_csv' %}"
|
|
title="Export all games as CSV">[csv]</a>
|
|
<a href="{% url 'twitch:export_games_json' %}"
|
|
title="Export all games as JSON">[json]</a>
|
|
</div>
|
|
</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 id="game-{{ item.game.twitch_id }}"
|
|
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_best_url %}
|
|
{% picture item.game.box_art_best_url alt="Box art for "|add: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.twitch_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 %}
|