Andreas/mtg_python_deckbuilder
1
0
Fork 0
mirror of https://github.com/mwisnowski/mtg_python_deckbuilder.git synced 2026-01-08 18:48:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: optimize must-have controls and commander catalog

Browse source
This commit is contained in:
matt 2025-10-07 15:56:57 -07:00
parent b7bfc4ca09
commit 3877890889
23 changed files with 1150 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

66
code/web/templates/commanders/index.html
View file

@ -45,30 +45,45 @@
<button type="submit" class="btn filter-submit">Apply</button>
</form>
<div id="commander-loading" class="commander-loading" role="status" aria-live="polite">
<span class="sr-only">Loading commanders…</span>
<div class="commander-skeleton-list" aria-hidden="true">
{% for i in range(3) %}
<article class="commander-skeleton">
<div class="skeleton-thumb shimmer"></div>
<div class="skeleton-main">
<div class="skeleton-line skeleton-title shimmer"></div>
<div class="skeleton-line skeleton-meta shimmer"></div>
<div class="skeleton-chip-row">
<span class="skeleton-chip shimmer"></span>
<span class="skeleton-chip shimmer"></span>
<span class="skeleton-chip shimmer"></span>
<div
id="commander-results"
data-skeleton
data-skeleton-label=""
data-skeleton-delay="420"
data-skeleton-overlay="false"
aria-live="polite"
>
<div
id="commander-loading"
class="commander-loading"
role="status"
aria-live="polite"
data-skeleton-placeholder
>
<span class="sr-only">Loading commanders…</span>
<div class="commander-skeleton-list" aria-hidden="true">
{% for i in range(3) %}
<article class="commander-skeleton">
<div class="skeleton-thumb shimmer"></div>
<div class="skeleton-main">
<div class="skeleton-line skeleton-title shimmer"></div>
<div class="skeleton-line skeleton-meta shimmer"></div>
<div class="skeleton-chip-row">
<span class="skeleton-chip shimmer"></span>
<span class="skeleton-chip shimmer"></span>
<span class="skeleton-chip shimmer"></span>
</div>
<div class="skeleton-line skeleton-text shimmer"></div>
</div>
<div class="skeleton-line skeleton-text shimmer"></div>
</div>
<div class="skeleton-cta shimmer"></div>
</article>
{% endfor %}
<div class="skeleton-cta shimmer"></div>
</article>
{% endfor %}
</div>
</div>
</div>
<div id="commander-results">
{% include "commanders/list_fragment.html" %}
<div class="commander-results-swap" data-skeleton-content>
{% include "commanders/list_fragment.html" %}
</div>
</div>
</section>
@ -93,6 +108,11 @@
.commander-row { display:flex; gap:1rem; padding:1rem; border:1px solid var(--border); border-radius:14px; background:var(--panel); align-items:stretch; }
.commander-thumb { width:160px; flex:0 0 auto; position:relative; }
.commander-thumb img { width:160px; height:auto; border-radius:10px; border:1px solid var(--border); background:#0b0d12; display:block; }
.commander-thumb-img.is-placeholder { animation: commander-thumb-pulse 1.2s ease-in-out infinite alternate; }
@keyframes commander-thumb-pulse {
from { filter:brightness(0.45); }
to { filter:brightness(0.65); }
}
.commander-main { flex:1 1 auto; display:flex; flex-direction:column; gap:.6rem; min-width:0; }
.commander-header { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; }
.commander-name { margin:0; font-size:1.25rem; }
@ -121,8 +141,8 @@
.theme-suggestion-chip:hover { background:rgba(94,106,136,.28); border-color:rgba(148,163,184,.45); transform:translateY(-1px); }
.theme-suggestion-chip:focus-visible { outline:2px solid var(--ring); outline-offset:2px; }
.commander-loading { display:none; margin-top:1rem; }
.commander-loading.htmx-request { display:block; }
.commander-loading { margin-top:1rem; gap:1rem; }
.commander-results-swap { display:flex; flex-direction:column; }
.commander-skeleton-list { display:flex; flex-direction:column; gap:1rem; }
.commander-skeleton { display:flex; gap:1rem; padding:1rem; border:1px solid var(--border); border-radius:14px; background:var(--panel); align-items:stretch; }
.skeleton-thumb { width:160px; height:220px; border-radius:10px; }

23
code/web/templates/commanders/row_wireframe.html
View file

@ -2,20 +2,37 @@
{% 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">
{% set small = record.image_small_url or record.image_normal_url %}
{% set normal = record.image_normal_url or small %}
<img
src="{{ small }}"
srcset="{{ small }} 160w, {{ record.image_normal_url or small }} 488w"
sizes="160px"
src="{{ placeholder_pixel }}"
alt="{{ record.display_name }} card art"
loading="lazy"
decoding="async"
width="160"
height="223"
data-lazy-image="commander"
data-lazy-src="{{ small }}"
data-lazy-srcset="{{ small }} 160w, {{ normal }} 488w"
data-lazy-sizes="(max-width: 900px) 60vw, 160px"
data-card-name="{{ record.display_name }}"
data-original-name="{{ record.name }}"
data-hover-simple="true"
class="commander-thumb-img"
/>
<noscript>
<img
src="{{ small }}"
srcset="{{ small }} 160w, {{ normal }} 488w"
sizes="160px"
alt="{{ record.display_name }} card art"
width="160"
height="223"
/>
</noscript>
</div>
<div class="commander-main">
<div class="commander-header">