pkmntrade.club/src/pkmntrade_club/theme/templates/cards/card_detail.html
badbl0cks af2f48a491
refactor(db): update cursor rules and enhance deployment rollback script
- Standardized string formatting in cursor rules for consistency.
- Added a new rollback deployment script to facilitate blue-green deployment strategy.
- Removed outdated seed data files and introduced new rarity mappings for better data management.
- Improved model relationships and query optimizations in various views and admin configurations.
- Enhanced caching strategies across templates to improve performance and reduce load times, including jitter in cache settings for better performance.
- Refactored card-related views and templates to utilize new model fields and relationships.
2025-06-19 15:42:36 -07:00

105 lines
No EOL
5 KiB
HTML

{% extends "base.html" %}
{% load static card_badge %}
{% block content %}
<!-- Card header with badge and details -->
<div class="flex items-center mb-6">
<div class="ml-4">
<h1 class="text-3xl font-bold">{{card.name}}</h1>
<h2 class="text-lg text-gray-500">{{ card.cardset }} #{{ card.cardnum }} &bull; {{ card.rarity.icon }}</h2>
</div>
</div>
<!-- Trade Offers sections -->
<div class="flex flex-col gap-8">
<!-- Trade Offers: Have -->
<div x-data="{
order: 'newest',
page: 1,
loadOffers() {
document.activeElement.blur();
fetch(`{% url 'cards:card_trade_offer_have_list' card.pk %}?order=` + this.order + '&page=' + this.page)
.then(response => response.text())
.then(html => {
this.$refs.offerList.innerHTML = html;
Alpine.initTree(this.$refs.offerList); // reinitialize Alpine on the injected content
window.processMarqueeElements && window.processMarqueeElements();
});
}
}"
x-init="loadOffers()"
x-on:change-page="page = $event.detail.page; loadOffers()"
class="p-4">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold">Have this Card ({{ trade_offer_have_count }})</h2>
<!-- DaisyUI dropdown replacing the select -->
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn m-1">Sort by: <span x-text="order === 'newest' ? 'Newest' : 'Oldest'"></span>
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 max-w-26 p-2 shadow-sm">
<li>
<a href="#" @click.prevent="order = 'newest'; page = 1; loadOffers()">
Newest
</a>
</li>
<li>
<a href="#" @click.prevent="order = 'oldest'; page = 1; loadOffers()">
Oldest
</a>
</li>
</ul>
</div>
</div>
<div x-ref="offerList">
</div>
</div>
<!-- Trade Offers: Want -->
<div x-data="{
order: 'newest',
page: 1,
loadOffers() {
fetch(`{% url 'cards:card_trade_offer_want_list' card.pk %}?order=` + this.order + '&page=' + this.page)
.then(response => response.text())
.then(html => {
this.$refs.offerList.innerHTML = html;
Alpine.initTree(this.$refs.offerList); // reinitialize Alpine on the injected content
window.processMarqueeElements && window.processMarqueeElements();
});
}
}"
x-init="loadOffers()"
x-on:change-page="page = $event.detail.page; loadOffers()"
class="p-4">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold">Want this Card ({{ trade_offer_want_count }})</h2>
<!-- DaisyUI dropdown replacing the select -->
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn m-1">Sort by: <span x-text="order === 'newest' ? 'Newest' : 'Oldest'"></span>
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 max-w-26 p-2 shadow-sm">
<li>
<a href="#" @click.prevent="order = 'newest'; page = 1; loadOffers()">
Newest
</a>
</li>
<li>
<a href="#" @click.prevent="order = 'oldest'; page = 1; loadOffers()">
Oldest
</a>
</li>
</ul>
</div>
</div>
<div x-ref="offerList">
</div>
</div>
</div>
{% endblock %}