mirror of
https://github.com/mwisnowski/mtg_python_deckbuilder.git
synced 2026-03-25 14:36:31 +01:00
feat: add theme quality, pool size, and popularity badges with filtering (#56)
This commit is contained in:
mwisnowski
GitHub
parent
03e2846882
commit
8efdc77c08
21 changed files with 1165 additions and 64 deletions
|
|
@ -8,7 +8,29 @@
|
|||
<input type="text" id="theme-search" placeholder="Search themes" aria-label="Search" class="w-full" autocomplete="off" />
|
||||
<div id="theme-search-results" class="search-suggestions"></div>
|
||||
</div>
|
||||
<div class="min-w-[160px]">
|
||||
{% if show_theme_filters %}
|
||||
<div class="min-w-[140px]">
|
||||
<label class="text-[11px] block opacity-70">Quality</label>
|
||||
<select id="quality-filter" class="w-full text-[13px]">
|
||||
<option value="">All</option>
|
||||
<option>Excellent</option>
|
||||
<option>Good</option>
|
||||
<option>Fair</option>
|
||||
<option>Poor</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="min-w-[140px]">
|
||||
<label class="text-[11px] block opacity-70">Pool Size</label>
|
||||
<select id="pool-filter" class="w-full text-[13px]">
|
||||
<option value="">All</option>
|
||||
<option>Vast</option>
|
||||
<option>Large</option>
|
||||
<option>Moderate</option>
|
||||
<option>Small</option>
|
||||
<option>Tiny</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="min-w-[140px]">
|
||||
<label class="text-[11px] block opacity-70">Popularity</label>
|
||||
<select id="pop-filter" class="w-full text-[13px]">
|
||||
<option value="">All</option>
|
||||
|
|
@ -19,13 +41,78 @@
|
|||
<option>Rare</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endif %}
|
||||
<button id="clear-search" class="btn btn-ghost text-xs" hidden>Clear</button>
|
||||
</div>
|
||||
<div id="quick-popularity" class="flex gap-1.5 flex-wrap mb-2">
|
||||
{% for b in ['Very Common','Common','Uncommon','Niche','Rare'] %}
|
||||
<button class="btn btn-ghost pop-chip text-[11px] px-2 py-0.5" data-pop="{{ b }}">{{ b }}</button>
|
||||
{% endfor %}
|
||||
|
||||
{% if show_theme_filters %}
|
||||
<div id="quick-filters" class="flex gap-2.5 flex-wrap mb-2">
|
||||
<div>
|
||||
<div class="text-[10px] opacity-60 mb-0.5">Quality</div>
|
||||
<div class="flex gap-1 flex-wrap">
|
||||
{% for b in ['Excellent','Good','Fair','Poor'] %}
|
||||
<button class="btn btn-ghost quality-chip text-[11px] px-2 py-0.5" data-quality="{{ b }}">{{ b[0] }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] opacity-60 mb-0.5">Pool Size</div>
|
||||
<div class="flex gap-1 flex-wrap">
|
||||
{% for b in ['Vast','Large','Moderate','Small','Tiny'] %}
|
||||
<button class="btn btn-ghost pool-chip text-[11px] px-2 py-0.5" data-pool="{{ b }}">{{ b[0] }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] opacity-60 mb-0.5">Popularity</div>
|
||||
<div class="flex gap-1 flex-wrap">
|
||||
{% for b in ['Very Common','Common','Uncommon','Niche','Rare'] %}
|
||||
<button class="btn btn-ghost pop-chip text-[11px] px-2 py-0.5" data-pop="{{ b }}">{{ b }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Badge Legend #}
|
||||
<details class="mb-3 text-xs" style="max-width: 800px;">
|
||||
<summary class="cursor-pointer opacity-70 hover:opacity-100" style="user-select: none;">
|
||||
ℹ️ Badge Legend
|
||||
</summary>
|
||||
<div class="mt-2 p-3 rounded" style="background: var(--bg-secondary); border: 1px solid var(--border);">
|
||||
<div class="flex flex-col gap-2.5">
|
||||
{% if show_theme_quality_badges %}
|
||||
<div>
|
||||
<div class="font-semibold mb-1">Quality Badges <span class="theme-badge badge-quality-excellent">E</span> <span class="theme-badge badge-quality-good">G</span> <span class="theme-badge badge-quality-fair">F</span> <span class="theme-badge badge-quality-poor">P</span></div>
|
||||
<div class="opacity-85">Editorial quality measures how well we've documented and curated each theme. The score is calculated from multiple factors:</div>
|
||||
<ul class="mt-1 mb-1 opacity-85 text-[11px] list-disc ml-4 space-y-0.5">
|
||||
<li><strong>Card Count & Uniqueness</strong>: Themes with sufficient representative cards and unique synergies score higher</li>
|
||||
<li><strong>Description Quality</strong>: Custom descriptions that avoid generic patterns score higher than auto-generated fallbacks</li>
|
||||
<li><strong>Metadata Completeness</strong>: Presence of primary/secondary colors, archetype classification, and popularity data</li>
|
||||
<li><strong>Curation Status</strong>: Themes marked as reviewed or final have higher quality than draft entries</li>
|
||||
</ul>
|
||||
<div class="opacity-70 text-[11px]">Higher quality = better-documented, more thoroughly curated, easier to build around</div>
|
||||
<div class="mt-1 opacity-70 text-[11px]"><strong>Tiers:</strong> Excellent (75%+) • Good (60-74%) • Fair (40-59%) • Poor (<40%)</div>
|
||||
<div class="mt-1.5 opacity-70 text-[11px]">💡 <a href="https://github.com/mwisnowski/mtg_python_deckbuilder" target="_blank" rel="noopener noreferrer" class="underline hover:opacity-100">Help improve theme quality on GitHub</a></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if show_theme_pool_badges %}
|
||||
<div>
|
||||
<div class="font-semibold mb-1">Pool Size Badges <span class="theme-badge badge-pool-vast">V</span> <span class="theme-badge badge-pool-large">L</span> <span class="theme-badge badge-pool-moderate">M</span> <span class="theme-badge badge-pool-small">S</span> <span class="theme-badge badge-pool-tiny">T</span></div>
|
||||
<div class="opacity-85">Total cards available with this theme tag. Larger pools offer more variety and flexibility when building.</div>
|
||||
<div class="mt-1 opacity-70 text-[11px]">• Vast (500+) • Large (200-499) • Moderate (50-199) • Small (15-49) • Tiny (<15)</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if show_theme_popularity_badges %}
|
||||
<div>
|
||||
<div class="font-semibold mb-1">Popularity <span class="theme-badge badge-pop-vc">Very Common</span> <span class="theme-badge badge-pop-c">Common</span> <span class="theme-badge badge-pop-u">Uncommon</span> <span class="theme-badge badge-pop-n">Niche</span> <span class="theme-badge badge-pop-r">Rare</span></div>
|
||||
<div class="opacity-85">Usage frequency based on how many commanders and cards are associated with this theme. More popular themes appear in more decks.</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div id="active-filters" class="flex gap-1.5 flex-wrap mb-2 text-[11px]"></div>
|
||||
<div id="theme-results" aria-live="polite" aria-busy="true">
|
||||
<div class="flex flex-col gap-2">
|
||||
|
|
@ -38,7 +125,11 @@
|
|||
const input = document.getElementById('theme-search');
|
||||
const resultsBox = document.getElementById('theme-search-results');
|
||||
const clearBtn = document.getElementById('clear-search');
|
||||
const qualityFilter = document.getElementById('quality-filter');
|
||||
const poolFilter = document.getElementById('pool-filter');
|
||||
const popSel = document.getElementById('pop-filter');
|
||||
const qualityChips = document.querySelectorAll('.quality-chip');
|
||||
const poolChips = document.querySelectorAll('.pool-chip');
|
||||
const popChips = document.querySelectorAll('.pop-chip');
|
||||
const activeFilters = document.getElementById('active-filters');
|
||||
const resultsHost = document.getElementById('theme-results');
|
||||
|
|
@ -48,7 +139,9 @@
|
|||
function buildParams(){
|
||||
const params = new URLSearchParams();
|
||||
const q = input.value.trim(); if(q) params.set('q', q);
|
||||
const pop = popSel.value; if(pop) params.set('bucket', pop);
|
||||
const quality = qualityFilter ? qualityFilter.value : ''; if(quality) params.set('quality_tier', quality);
|
||||
const pool = poolFilter ? poolFilter.value : ''; if(pool) params.set('pool_tier', pool);
|
||||
const pop = popSel ? popSel.value : ''; if(pop) params.set('bucket', pop);
|
||||
params.set('limit','50'); params.set('offset','0');
|
||||
return params.toString();
|
||||
}
|
||||
|
|
@ -62,7 +155,9 @@
|
|||
function renderActive(){
|
||||
activeFilters.innerHTML='';
|
||||
const q = input.value.trim(); if(q) addChip('Search: '+q, ()=>{ input.value=''; fetchList(); });
|
||||
const pop = popSel.value; if(pop) addChip('Popularity: '+pop, ()=>{ popSel.value=''; fetchList(); });
|
||||
const quality = qualityFilter ? qualityFilter.value : ''; if(quality) addChip('Quality: '+quality, ()=>{ qualityFilter.value=''; fetchList(); });
|
||||
const pool = poolFilter ? poolFilter.value : ''; if(pool) addChip('Pool: '+pool, ()=>{ poolFilter.value=''; fetchList(); });
|
||||
const pop = popSel ? popSel.value : ''; if(pop) addChip('Popularity: '+pop, ()=>{ popSel.value=''; fetchList(); });
|
||||
}
|
||||
function fetchList(){
|
||||
const ps = buildParams();
|
||||
|
|
@ -154,7 +249,18 @@
|
|||
fetch('/themes/fragment/detail/'+id,{cache:'reload'}).catch(()=>{});
|
||||
});
|
||||
document.addEventListener('click', function(ev){ if(!resultsBox.contains(ev.target) && ev.target!==input){ hideResults(); } });
|
||||
popSel.addEventListener('change', fetchList); popChips.forEach(ch=> ch.addEventListener('click', ()=>{ popSel.value=ch.getAttribute('data-pop'); fetchList(); }));
|
||||
if (qualityFilter) {
|
||||
qualityFilter.addEventListener('change', fetchList);
|
||||
qualityChips.forEach(ch=> ch.addEventListener('click', ()=>{ qualityFilter.value=ch.getAttribute('data-quality'); fetchList(); }));
|
||||
}
|
||||
if (poolFilter) {
|
||||
poolFilter.addEventListener('change', fetchList);
|
||||
poolChips.forEach(ch=> ch.addEventListener('click', ()=>{ poolFilter.value=ch.getAttribute('data-pool'); fetchList(); }));
|
||||
}
|
||||
if (popSel) {
|
||||
popSel.addEventListener('change', fetchList);
|
||||
popChips.forEach(ch=> ch.addEventListener('click', ()=>{ popSel.value=ch.getAttribute('data-pop'); fetchList(); }));
|
||||
}
|
||||
// Initial load
|
||||
fetchList();
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -18,10 +18,148 @@
|
|||
{% endif %}
|
||||
{% endif %}
|
||||
<div class="text-xs mb-2 flex gap-2 flex-wrap">
|
||||
{% if theme.popularity_bucket %}<span class="theme-badge {% if theme.popularity_bucket=='Very Common' %}badge-pop-vc{% elif theme.popularity_bucket=='Common' %}badge-pop-c{% elif theme.popularity_bucket=='Uncommon' %}badge-pop-u{% elif theme.popularity_bucket=='Niche' %}badge-pop-n{% elif theme.popularity_bucket=='Rare' %}badge-pop-r{% endif %}" title="Popularity: {{ theme.popularity_bucket }}" aria-label="Popularity bucket: {{ theme.popularity_bucket }}">{{ theme.popularity_bucket }}</span>{% endif %}
|
||||
{% if show_theme_popularity_badges and theme.popularity_bucket %}<span class="theme-badge {% if theme.popularity_bucket=='Very Common' %}badge-pop-vc{% elif theme.popularity_bucket=='Common' %}badge-pop-c{% elif theme.popularity_bucket=='Uncommon' %}badge-pop-u{% elif theme.popularity_bucket=='Niche' %}badge-pop-n{% elif theme.popularity_bucket=='Rare' %}badge-pop-r{% endif %}" title="Popularity: {{ theme.popularity_bucket }}" aria-label="Popularity bucket: {{ theme.popularity_bucket }}">{{ theme.popularity_bucket }}</span>{% endif %}
|
||||
{% if show_theme_quality_badges and theme.quality_tier %}<span class="theme-badge badge-quality-{{ theme.quality_tier|lower }}" title="Quality: {{ theme.quality_tier }} ({{ (theme.quality_score * 100)|round|int }}%)" aria-label="Quality tier: {{ theme.quality_tier }}">{{ theme.quality_tier }}</span>{% endif %}
|
||||
{% if show_theme_pool_badges and theme.pool_tier %}<span class="theme-badge badge-pool-{{ theme.pool_tier|lower }}" title="Pool: {{ theme.pool_tier }} (~{{ theme.pool_size }} cards)" aria-label="Pool tier: {{ theme.pool_tier }}">{{ theme.pool_tier }}</span>{% endif %}
|
||||
{% if diagnostics and theme.editorial_quality %}<span class="theme-badge badge-quality-{{ theme.editorial_quality }}" title="Editorial quality: {{ theme.editorial_quality }}" aria-label="Editorial quality: {{ theme.editorial_quality }}">{{ theme.editorial_quality }}</span>{% endif %}
|
||||
{% if diagnostics and theme.has_fallback_description %}<span class="theme-badge badge-fallback" title="Fallback generic description" aria-label="Fallback generic description">Fallback</span>{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Badge Explanations -->
|
||||
{% if (show_theme_quality_badges and theme.quality_tier) or (show_theme_pool_badges and theme.pool_tier) or (show_theme_popularity_badges and theme.popularity_bucket) %}
|
||||
<details class="mt-3 text-xs" style="max-width: 800px;" open>
|
||||
<summary class="cursor-pointer opacity-70 hover:opacity-100 font-semibold" style="user-select: none;">
|
||||
ℹ️ Badge Details
|
||||
</summary>
|
||||
<div class="mt-2 space-y-3 px-4 py-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700">
|
||||
|
||||
{% if show_theme_quality_badges and theme.quality_tier %}
|
||||
<div class="badge-explanation">
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="theme-badge badge-quality-{{ theme.quality_tier|lower }} flex-shrink-0"
|
||||
title="Quality: {{ theme.quality_tier }} ({{ (theme.quality_score * 100)|round|int }}%)">
|
||||
{{ theme.quality_tier }}
|
||||
</span>
|
||||
<div class="flex-1 text-sm text-gray-700 dark:text-gray-300">
|
||||
<strong>Quality Score:</strong> {{ (theme.quality_score * 100)|round|int }}%
|
||||
<ul class="mt-1 ml-4 list-disc space-y-0.5 text-xs text-gray-600 dark:text-gray-400">
|
||||
{% if theme.quality_score >= 0.70 %}
|
||||
<li>High card count and unique synergies ({{ theme.synergy_count }} synergies)</li>
|
||||
{% elif theme.quality_score >= 0.60 %}
|
||||
<li>Good card selection with {{ theme.synergy_count }} documented synergies</li>
|
||||
{% elif theme.quality_score >= 0.40 %}
|
||||
<li>Moderate card pool with {{ theme.synergy_count }} synergies</li>
|
||||
{% else %}
|
||||
<li>Limited card pool and synergies ({{ theme.synergy_count }} synergies)</li>
|
||||
{% endif %}
|
||||
|
||||
{% if theme.has_fallback_description %}
|
||||
<li>Auto-generated description (could benefit from custom curation)</li>
|
||||
{% else %}
|
||||
<li>Custom curated description</li>
|
||||
{% endif %}
|
||||
|
||||
{% if theme.curated_synergies or theme.enforced_synergies or theme.inferred_synergies %}
|
||||
<li>Synergy breakdown: {{ theme.curated_synergies|length }} curated, {{ theme.enforced_synergies|length }} enforced, {{ theme.inferred_synergies|length }} inferred</li>
|
||||
{% else %}
|
||||
<li>No synergy breakdown available</li>
|
||||
{% endif %}
|
||||
|
||||
{% if theme.deck_archetype %}
|
||||
<li>Deck archetype: {{ theme.deck_archetype }}</li>
|
||||
{% else %}
|
||||
<li>No deck archetype classification</li>
|
||||
{% endif %}
|
||||
|
||||
{% if theme.editorial_quality == 'final' %}
|
||||
<li>Fully reviewed and curated (editorial status: final)</li>
|
||||
{% elif theme.editorial_quality == 'refined' %}
|
||||
<li>Reviewed and refined (editorial status: refined)</li>
|
||||
{% elif theme.editorial_quality == 'draft' %}
|
||||
<li>Draft quality (editorial status: draft)</li>
|
||||
{% elif theme.editorial_quality == 'auto' %}
|
||||
<li>Auto-generated content (editorial status: auto)</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<div class="mt-2 text-xs text-gray-500 dark:text-gray-500">💡 <a href="https://github.com/mwisnowski/mtg_python_deckbuilder" target="_blank" rel="noopener noreferrer" class="underline hover:text-gray-700 dark:hover:text-gray-300">Help improve theme quality on GitHub</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if show_theme_pool_badges and theme.pool_tier %}
|
||||
<div class="badge-explanation">
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="theme-badge badge-pool-{{ theme.pool_tier|lower }} flex-shrink-0"
|
||||
title="Pool: {{ theme.pool_tier }} (~{{ theme.pool_size }} cards)">
|
||||
{{ theme.pool_tier }}
|
||||
</span>
|
||||
<div class="flex-1 text-sm text-gray-700 dark:text-gray-300">
|
||||
<strong>Card Pool Size:</strong> ~{{ theme.pool_size }} cards available
|
||||
<ul class="mt-1 ml-4 list-disc space-y-0.5 text-xs text-gray-600 dark:text-gray-400">
|
||||
{% if theme.pool_tier == 'Vast' %}
|
||||
<li>Extensive card selection with {{ theme.pool_size }}+ cards available for deckbuilding</li>
|
||||
<li>Provides maximum flexibility and optimization potential</li>
|
||||
{% elif theme.pool_tier == 'Large' %}
|
||||
<li>Large card selection with {{ theme.pool_size }} cards available</li>
|
||||
<li>Offers strong flexibility for different deck strategies</li>
|
||||
{% elif theme.pool_tier == 'Moderate' %}
|
||||
<li>Moderate selection with {{ theme.pool_size }} cards available</li>
|
||||
<li>Sufficient options for focused deck strategies</li>
|
||||
{% elif theme.pool_tier == 'Small' %}
|
||||
<li>Limited selection with {{ theme.pool_size }} cards available</li>
|
||||
<li>May require creative deckbuilding approaches</li>
|
||||
{% elif theme.pool_tier == 'Tiny' %}
|
||||
<li>Very limited pool with only {{ theme.pool_size }} cards available</li>
|
||||
<li>Highly focused niche theme with restricted card choices</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if show_theme_popularity_badges and theme.popularity_bucket %}
|
||||
<div class="badge-explanation">
|
||||
<div class="flex items-start gap-2">
|
||||
<span class="theme-badge {% if theme.popularity_bucket=='Very Common' %}badge-pop-vc{% elif theme.popularity_bucket=='Common' %}badge-pop-c{% elif theme.popularity_bucket=='Uncommon' %}badge-pop-u{% elif theme.popularity_bucket=='Niche' %}badge-pop-n{% elif theme.popularity_bucket=='Rare' %}badge-pop-r{% endif %} flex-shrink-0"
|
||||
title="Popularity: {{ theme.popularity_bucket }}">
|
||||
{{ theme.popularity_bucket }}
|
||||
</span>
|
||||
<div class="flex-1 text-sm text-gray-700 dark:text-gray-300">
|
||||
<strong>Theme Popularity:</strong> {{ theme.popularity_bucket }}
|
||||
<ul class="mt-1 ml-4 list-disc space-y-0.5 text-xs text-gray-600 dark:text-gray-400">
|
||||
{% if theme.popularity_bucket == 'Very Common' %}
|
||||
<li>Extremely popular theme seen in many commander decks</li>
|
||||
<li>High adoption rate across diverse commanders and strategies</li>
|
||||
<li>Well-established with extensive community support and resources</li>
|
||||
{% elif theme.popularity_bucket == 'Common' %}
|
||||
<li>Popular theme frequently used in commander deckbuilding</li>
|
||||
<li>Strong adoption rate with good community support</li>
|
||||
<li>Well-documented strategies and card synergies available</li>
|
||||
{% elif theme.popularity_bucket == 'Uncommon' %}
|
||||
<li>Moderately popular theme with regular usage</li>
|
||||
<li>Decent adoption rate, particularly in specific archetypes</li>
|
||||
<li>Some community resources and discussion available</li>
|
||||
{% elif theme.popularity_bucket == 'Niche' %}
|
||||
<li>Specialized theme with limited but dedicated following</li>
|
||||
<li>Lower adoption rate, often used in specific deck strategies</li>
|
||||
<li>May require more research to optimize effectively</li>
|
||||
{% elif theme.popularity_bucket == 'Rare' %}
|
||||
<li>Rarely used theme with minimal adoption</li>
|
||||
<li>Very low usage rate across commander decks</li>
|
||||
<li>May offer unique deckbuilding opportunities for brewers</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</details>
|
||||
{% endif %}
|
||||
|
||||
<div class="synergy-section">
|
||||
<h4>Synergies {% if not uncapped %}(capped){% endif %}</h4>
|
||||
<div class="theme-synergies">
|
||||
|
|
@ -46,7 +184,7 @@
|
|||
{% if theme.example_cards %}
|
||||
{% for c in theme.example_cards %}
|
||||
{% set base_c = (c.split(' - Synergy (')[0] if ' - Synergy (' in c else c) %}
|
||||
<div class="ex-card card-sample text-center" data-card-name="{{ base_c }}" data-role="example_card" data-tags="{{ theme.synergies|join(', ') }}" data-original-name="{{ c }}">
|
||||
<div class="ex-card text-center" data-card-name="{{ base_c }}" data-role="example_card" data-tags="{{ theme.synergies|join(', ') }}" data-original-name="{{ c }}">
|
||||
<img class="card-thumb w-full h-auto border border-[var(--border)] rounded-[10px]" loading="lazy" decoding="async" alt="{{ c }} image" src="{{ base_c|card_image('small') }}" />
|
||||
<div class="text-[11px] mt-1 whitespace-nowrap overflow-hidden text-ellipsis font-semibold card-ref" data-card-name="{{ base_c }}" data-tags="{{ theme.synergies|join(', ') }}" data-original-name="{{ c }}">{{ c }}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,17 @@
|
|||
<tbody>
|
||||
{% for it in items %}
|
||||
<tr hx-get="/themes/fragment/detail/{{ it.id }}" hx-target="#theme-detail" hx-swap="innerHTML" title="Click for details" class="theme-row" data-theme-id="{{ it.id }}" tabindex="0" role="option" aria-selected="false">
|
||||
<td title="{{ it.short_description or '' }}">{% set q = request.query_params.get('q') %}{% set name = it.theme %}{% if q %}{% set ql = q.lower() %}{% set nl = name.lower() %}{% if ql in nl %}{% set start = nl.find(ql) %}{% set end = start + q|length %}<span class="trunc-name">{{ name[:start] }}<mark>{{ name[start:end] }}</mark>{{ name[end:] }}</span>{% else %}<span class="trunc-name">{{ name }}</span>{% endif %}{% else %}<span class="trunc-name">{{ name }}</span>{% endif %} {% if diagnostics and it.has_fallback_description %}<span class="theme-badge badge-fallback" title="Fallback description">⚠</span>{% endif %}
|
||||
<td title="{{ it.short_description or '' }}">{% set q = request.query_params.get('q') %}{% set name = it.theme %}{% if q %}{% set ql = q.lower() %}{% set nl = name.lower() %}{% if ql in nl %}{% set start = nl.find(ql) %}{% set end = start + q|length %}<span class="trunc-name">{{ name[:start] }}<mark>{{ name[start:end] }}</mark>{{ name[end:] }}</span>{% else %}<span class="trunc-name">{{ name }}</span>{% endif %}{% else %}<span class="trunc-name">{{ name }}</span>{% endif %}
|
||||
{# Quality tier badge #}
|
||||
{% if show_theme_quality_badges and it.quality_tier %}
|
||||
<span class="theme-badge badge-quality-{{ it.quality_tier|lower }}" title="Quality: {{ it.quality_tier }} ({{ (it.quality_score * 100)|round|int }}%)" aria-label="Quality tier: {{ it.quality_tier }}">{{ it.quality_tier[0]|upper }}</span>
|
||||
{% endif %}
|
||||
{# Pool size badge #}
|
||||
{% if show_theme_pool_badges and it.pool_tier %}
|
||||
<span class="theme-badge badge-pool-{{ it.pool_tier|lower }}" title="Pool: {{ it.pool_tier }} (~{{ it.pool_size }} cards)" aria-label="Pool tier: {{ it.pool_tier }}">{{ it.pool_tier[0]|upper }}</span>
|
||||
{% endif %}
|
||||
{# Diagnostics-only badges #}
|
||||
{% if diagnostics and it.has_fallback_description %}<span class="theme-badge badge-fallback" title="Fallback description">⚠</span>{% endif %}
|
||||
{% if diagnostics and it.editorial_quality %}
|
||||
<span class="theme-badge badge-quality-{{ it.editorial_quality }}" title="Editorial quality: {{ it.editorial_quality }}">{{ it.editorial_quality[0]|upper }}</span>
|
||||
{% endif %}
|
||||
|
|
@ -38,7 +48,7 @@
|
|||
<td>{% if it.primary_color %}<span aria-label="Primary color: {{ it.primary_color }}">{{ it.primary_color }}</span>{% endif %}</td>
|
||||
<td>{% if it.secondary_color %}<span aria-label="Secondary color: {{ it.secondary_color }}">{{ it.secondary_color }}</span>{% endif %}</td>
|
||||
<td>
|
||||
{% if it.popularity_bucket %}
|
||||
{% if show_theme_popularity_badges and it.popularity_bucket %}
|
||||
<span class="theme-badge {% if it.popularity_bucket=='Very Common' %}badge-pop-vc{% elif it.popularity_bucket=='Common' %}badge-pop-c{% elif it.popularity_bucket=='Uncommon' %}badge-pop-u{% elif it.popularity_bucket=='Niche' %}badge-pop-n{% elif it.popularity_bucket=='Rare' %}badge-pop-r{% endif %}" title="Popularity: {{ it.popularity_bucket }}">{{ it.popularity_bucket }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,20 @@
|
|||
<ul class="list-none p-0 m-0 flex flex-col gap-2.5">
|
||||
{% for it in items %}
|
||||
<li class="theme-list-card">
|
||||
<a href="/themes/{{ it.id }}" class="font-semibold text-sm no-underline text-[var(--text)]">{{ it.theme }}</a>
|
||||
<div class="flex justify-between items-start gap-2">
|
||||
<a href="/themes/{{ it.id }}" class="font-semibold text-sm no-underline text-[var(--text)]">{{ it.theme }}</a>
|
||||
<div class="flex gap-1">
|
||||
{% if show_theme_quality_badges and it.quality_tier %}
|
||||
<span class="theme-badge badge-quality-{{ it.quality_tier|lower }}" title="Quality: {{ it.quality_tier }} ({{ (it.quality_score * 100)|round|int }}%)">{{ it.quality_tier[0]|upper }}</span>
|
||||
{% endif %}
|
||||
{% if show_theme_pool_badges and it.pool_tier %}
|
||||
<span class="theme-badge badge-pool-{{ it.pool_tier|lower }}" title="Pool: {{ it.pool_tier }} (~{{ it.pool_size }} cards)">{{ it.pool_tier[0]|upper }}</span>
|
||||
{% endif %}
|
||||
{% if show_theme_popularity_badges and it.popularity_bucket %}
|
||||
<span class="theme-badge {% if it.popularity_bucket=='Very Common' %}badge-pop-vc{% elif it.popularity_bucket=='Common' %}badge-pop-c{% elif it.popularity_bucket=='Uncommon' %}badge-pop-u{% elif it.popularity_bucket=='Niche' %}badge-pop-n{% elif it.popularity_bucket=='Rare' %}badge-pop-r{% endif %}" title="Popularity: {{ it.popularity_bucket }}">{{ it.popularity_bucket }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% if it.short_description %}<div class="text-xs opacity-85 mt-0.5">{{ it.short_description }}</div>{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue