mirror of
https://github.com/mwisnowski/mtg_python_deckbuilder.git
synced 2025-12-16 15:40:12 +01:00
9379732eec
Migrated app.js and components.js to TypeScript. Extracted inline scripts from base.html to cardHover.ts and cardImages.ts modules for better maintainability and code reuse.
70 lines
2.9 KiB
HTML
70 lines
2.9 KiB
HTML
{# Commander row partial fed by CommanderView entries #}
|
|
{% from "partials/_macros.html" import color_identity %}
|
|
{% set record = entry.record %}
|
|
{% set display_label = record.name if '//' in record.name else record.display_name %}
|
|
{% set placeholder_pixel = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" %}
|
|
<article class="commander-row" data-commander-slug="{{ record.slug }}" data-hover-simple="true">
|
|
<div class="commander-thumb"
|
|
data-card-name="{{ record.name }}"
|
|
data-original-name="{{ record.name }}"
|
|
{% if record.layout %}data-layout="{{ record.layout }}"{% endif %}>
|
|
{% set small = record.display_name|card_image('small') %}
|
|
{% set normal = record.display_name|card_image('normal') %}
|
|
<img
|
|
src="{{ small }}"
|
|
srcset="{{ small }} 160w, {{ normal }} 488w"
|
|
sizes="(max-width: 900px) 60vw, 160px"
|
|
alt="{{ record.display_name }} card art"
|
|
loading="lazy"
|
|
decoding="async"
|
|
width="160"
|
|
height="223"
|
|
data-card-name="{{ record.name }}"
|
|
data-original-name="{{ record.name }}"
|
|
{% if record.layout %}data-layout="{{ record.layout }}"{% endif %}
|
|
data-hover-simple="true"
|
|
class="commander-thumb-img"
|
|
/>
|
|
</div>
|
|
<div class="commander-main">
|
|
<div class="commander-header">
|
|
<h3 class="commander-name">{{ display_label }}</h3>
|
|
{{ color_identity(record.color_identity, record.is_colorless, entry.color_aria_label, entry.color_label) }}
|
|
</div>
|
|
<p class="commander-context muted">{{ record.type_line or 'Legendary Creature' }}</p>
|
|
{% if entry.themes %}
|
|
<div class="commander-themes" role="list">
|
|
{% for theme in entry.themes %}
|
|
{% set summary = theme.summary or 'Summary unavailable' %}
|
|
<button type="button"
|
|
class="commander-theme-chip"
|
|
role="listitem"
|
|
data-theme-name="{{ theme.name }}"
|
|
data-theme-slug="{{ theme.slug }}"
|
|
data-theme-summary="{{ summary }}"
|
|
title="{{ summary }}"
|
|
aria-label="{{ theme.name }} theme: {{ summary }}"
|
|
data-hover-simple-target="theme"
|
|
data-hover-simple-name="{{ theme.name }}"
|
|
data-hover-simple-summary="{{ summary }}">
|
|
{{ theme.name }}
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="commander-themes commander-themes-empty">
|
|
<span class="muted">No themes linked yet.</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if entry.partner_summary %}
|
|
<div class="commander-partners muted">
|
|
{% for note in entry.partner_summary %}
|
|
<span>{{ note }}</span>{% if not loop.last %}<span aria-hidden="true" class="commander-partner-sep">•</span>{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="commander-cta">
|
|
<a class="btn" href="/build?commander={{ record.display_name|urlencode }}&return={{ return_url|urlencode }}" data-commander="{{ record.slug }}">Build</a>
|
|
</div>
|
|
</article>
|