badblocks/pkmntrade.club
1
1
Fork 0
Code Issues 14 Pull requests Projects 1 Releases Packages Wiki Activity

progress on conversion to tailwind

Browse source
This commit is contained in:
badblocks 2025-03-06 21:28:36 -08:00
parent 6a872124c6
commit 6e2843c60e
110 changed files with 4997 additions and 1691 deletions
Download patch file Download diff file Expand all files Collapse all files

26
theme/templates/home/_card_list.html Normal file
View file

@ -0,0 +1,26 @@
{% load card_badge %}
{% comment %}
This partial expects:
- cards: a list of card objects
- mode: a string that determines the render style.
It should be "offered" for Most Offered Cards and "wanted" for Most Wanted Cards.
- Optional 'show_zero' flag (default False): if True, also display cards with 0 offers.
{% endcomment %}
{% if cards %}
<div class="flex flex-col items-center gap-3">
{% for card in cards %}
{% if show_zero|default:False or card.offer_count > 0 %}
{% if mode == "offered" %}
<a href="?offered_cards={{ card.id }}"
{% else %}
<a href="?wanted_cards={{ card.id }}"
{% endif %}
class="flex justify-between items-center text-primary no-underline">
{% card_badge card card.offer_count %}
</a>
{% endif %}
{% endfor %}
</div>
{% else %}
<p class="text-center">No cards found</p>
{% endif %}

10
theme/templates/home/_search_results.html Normal file
View file

@ -0,0 +1,10 @@
{% load trade_offer_tags %}
{% if offered_cards or wanted_cards %}
<hr class="my-8 border-t border-gray-200">
<h2 class="text-2xl font-bold mb-4">Results</h2>
{% if search_results and search_results.object_list %}
{% include "trades/_trade_offer_list.html" with offers=search_results %}
{% else %}
<div class="alert alert-info mt-4">No trade offers found.</div>
{% endif %}
{% endif %}

331
theme/templates/home/home.html Normal file
View file

@ -0,0 +1,331 @@
{% extends 'base.html' %}
{% load static trade_offer_tags card_badge cache card_multiselect %}
{% block content %}
<h1 class="text-center text-4xl font-bold mb-8 pt-4">
<span aria-hidden="true">
<span class="inline-block relative left-2 text-4xl">Welcome to</span>
<sup class="inline-block relative left-4 text-4xl">P</sup>
<sub class="inline-block relative text-4xl">K</sub>
<sup class="inline-block relative -left-2 text-4xl">M</sup>
<sub class="inline-block relative -left-4 text-4xl">N</sub>
<span class="inline-block relative -left-2 text-4xl">Trade Club</span>
</span>
<span aria-hidden="false" class="sr-only">Welcome to Pokemon Trade Club</span>
</h1>
<!-- Search Form Section -->
<section id="trade-search" class="mb-8">
<form method="post" action="." class="space-y-4">
{% csrf_token %}
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
{% card_multiselect "have_cards" "Have:" "Select zero or more cards..." available_cards have_cards %}
</div>
<div>
{% card_multiselect "want_cards" "Want:" "Select zero or more cards..." available_cards want_cards %}
</div>
</div>
{% if user.is_authenticated %}
<div class="flex flex-col md:flex-row gap-4">
<button type="submit" class="btn btn-primary flex-1">Find a Trade Offer</button>
<a href="{% url 'trade_offer_create' %}" id="createTradeOfferBtn" class="btn btn-secondary flex-1 text-center">Create Trade Offer</a>
</div>
{% else %}
<div>
<button type="submit" class="btn btn-primary w-full">Find a Trade Offer</button>
</div>
{% endif %}
</form>
</section>
<!-- Search Results Section -->
<section id="search-results" class="mb-8">
{% include "home/_search_results.html" %}
</section>
<!-- Market Stats Section -->
<section aria-labelledby="stats-heading" class="mb-8">
<h2 id="stats-heading" class="text-2xl font-semibold mb-4">Market Stats</h2>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<!-- Most Offered Cards -->
<div>
<div class="card bg-base-100 shadow">
<div class="card-header text-base-content p-4">
<h5 class="text-xl text-center font-semibold whitespace-nowrap truncate mb-0">Most Offered Cards</h5>
</div>
<div class="card-body my-4 p-0">
{% cache 3600 most_offered_cards %}
{% include "home/_card_list.html" with cards=most_offered_cards mode="wanted" %}
{% endcache %}
</div>
</div>
</div>
<!-- Most Wanted Cards -->
<div>
<div class="card bg-base-100 shadow">
<div class="card-header text-base-content p-4">
<h5 class="text-xl text-center font-semibold whitespace-nowrap truncate mb-0">Most Wanted Cards</h5>
</div>
<div class="card-body my-4 p-0">
{% cache 3600 most_wanted_cards %}
{% include "home/_card_list.html" with cards=most_wanted_cards mode="offered" %}
{% endcache %}
</div>
</div>
</div>
<!-- Least Offered Cards -->
<div>
<div class="card bg-base-100 shadow">
<div class="card-header text-base-content p-4">
<h5 class="text-xl text-center font-semibold whitespace-nowrap truncate mb-0">Least Offered Cards</h5>
</div>
<div class="card-body my-4 p-0">
{% cache 3600 least_offered_cards %}
{% include "home/_card_list.html" with cards=least_offered_cards mode="wanted" show_zero=True %}
{% endcache %}
</div>
</div>
</div>
</div>
</section>
<!-- Featured Offers and Recent Offers Section -->
<section class="mb-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Featured Offers -->
<div>
{% cache 86400 featured_offers %}
<div class="card bg-base-100 shadow">
<div class="card-header text-base-content p-4">
<h5 class="text-xl text-center font-semibold whitespace-nowrap truncate mb-0">Featured Offers</h5>
</div>
<div class="card-body p-4">
<!-- New pure-CSS tabs for Featured Offers -->
<div class="featured-offers-tabs">
<!-- Radio inputs for all tabs -->
<input type="radio" name="featured_offers_tabs" id="tab-all" class="hidden" checked>
{% for rarity, offers in featured_offers.items %}
{% if rarity != "All" %}
<input type="radio" name="featured_offers_tabs" id="tab-{{ forloop.counter }}" class="hidden">
{% endif %}
{% endfor %}
<!-- Tab navigation: all tab labels appear together -->
<div class="tabs tabs-box grid grid-cols-3 gap-2">
<label for="tab-all" class="tab text-xs md:text-base">All</label>
{% for rarity, offers in featured_offers.items %}
{% if rarity != "All" %}
<label for="tab-{{ forloop.counter }}" class="tab text-xs md:text-base">{{ rarity }}</label>
{% endif %}
{% endfor %}
</div>
<!-- All tab content panels are placed in one content container -->
<div class="tab-contents">
<!-- Panel for All offers -->
<div class="tab-content" id="content-tab-all">
{% if featured_offers.All %}
<div class="flex flex-col items-center gap-3 w-auto mx-auto">
{% for offer in featured_offers.All %}
{% render_trade_offer offer %}
{% endfor %}
</div>
{% else %}
<p class="text-center">No featured offers available.</p>
{% endif %}
</div>
<!-- Panels for each additional rarity -->
{% for rarity, offers in featured_offers.items %}
{% if rarity != "All" %}
<div class="tab-content" id="content-tab-{{ forloop.counter }}">
{% if offers %}
<div class="flex flex-col items-center gap-3 w-auto mx-auto">
{% for offer in offers %}
{% render_trade_offer offer %}
{% endfor %}
</div>
{% else %}
<p class="text-center">No featured offers for {{ rarity }}.</p>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
{% endcache %}
</div>
<!-- Recent Offers -->
<div>
{% cache 60 recent_offers %}
<div class="card bg-base-100 shadow">
<div class="card-header text-center text-base-content p-4">
<h5 class="text-xl font-semibold whitespace-nowrap truncate mb-0">Recent Offers</h5>
</div>
<div class="card-body my-4 p-4">
<div class="flex flex-col items-center gap-3">
{% for offer in recent_offers %}
{% render_trade_offer offer %}
{% empty %}
<p>No recent offers available.</p>
{% endfor %}
</div>
</div>
</div>
{% endcache %}
</div>
</div>
</section>
{% endblock content %}
{% block css %}
<style>
/* Hide the hidden radio inputs */
.featured-offers-tabs input[type="radio"] {
display: none;
}
/* Styles for the tabs navigation */
.tabs.tabs-box {
margin-bottom: 1rem;
width: 100%;
}
.tabs.tabs-box .tab {
flex: 1; /* Each tab will equally expand */
text-align: center;
cursor: pointer;
padding: 0.5rem 1rem;
border: 1px solid transparent;
transition: border-color 0.3s;
}
.tabs.tabs-box .tab:hover {
border-color: currentColor;
}
/* Active tab styling based on the radio input state */
#tab-all:checked ~ .tabs.tabs-box label[for="tab-all"] {
border-color: #2563eb; /* Example blue highlight */
}
{% for rarity, offers in featured_offers.items %}
{% if rarity != "All" %}
#tab-{{ forloop.counter }}:checked ~ .tabs.tabs-box label[for="tab-{{ forloop.counter }}"] {
border-color: #2563eb;
font-weight: bold;
}
{% endif %}
{% endfor %}
/* Hide all content panels by default */
.featured-offers-tabs .tab-contents > .tab-content {
display: none;
transition: opacity 0.3s ease-in-out;
}
/* Display the panel corresponding to the checked radio input */
#tab-all:checked ~ .tab-contents #content-tab-all {
display: block;
}
{% for rarity, offers in featured_offers.items %}
{% if rarity != "All" %}
#tab-{{ forloop.counter }}:checked ~ .tab-contents #content-tab-{{ forloop.counter }} {
display: block;
}
{% endif %}
{% endfor %}
</style>
{% endblock %}
{% block javascript %}
<script defer>
document.addEventListener('DOMContentLoaded', function() {
// AJAX trade search form submission with vanilla JavaScript
const tradeSearchForm = document.querySelector('#trade-search form');
if (tradeSearchForm) {
tradeSearchForm.addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(tradeSearchForm);
fetch(tradeSearchForm.action, {
method: tradeSearchForm.method,
headers: {
"X-Requested-With": "XMLHttpRequest"
},
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(data => {
document.querySelector('#search-results').innerHTML = data;
})
.catch(error => {
alert("There was an error processing your search.");
console.error('Error:', error);
});
});
}
// AJAX pagination click handling
document.addEventListener('click', function(e) {
const target = e.target.closest('.ajax-page-link');
if (target) {
e.preventDefault();
const page = target.getAttribute('data-page');
let pageInput = document.getElementById('page');
if (pageInput) {
pageInput.value = page;
} else {
pageInput = document.createElement('input');
pageInput.type = 'hidden';
pageInput.id = 'page';
pageInput.name = 'page';
pageInput.value = page;
tradeSearchForm.appendChild(pageInput);
}
tradeSearchForm.dispatchEvent(new Event('submit'));
}
});
// Updated: JS to carry over selections (including quantities) to the Create Trade Offer page.
const createBtn = document.getElementById('createTradeOfferBtn');
if (createBtn) {
createBtn.addEventListener('click', function(e) {
e.preventDefault();
// Use the standardized field names for both "have_cards" and "want_cards"
const haveSelect = document.querySelector('select[name="have_cards"]');
const wantSelect = document.querySelector('select[name="want_cards"]');
const url = new URL(createBtn.href, window.location.origin);
if (haveSelect) {
// For each selected option, include the quantity from data-quantity (defaulting to "1")
const selectedHave = Array.from(haveSelect.selectedOptions).map(opt => {
const cardId = opt.value;
const quantity = opt.getAttribute('data-quantity') || '1';
return cardId + ':' + quantity;
});
selectedHave.forEach(val => url.searchParams.append('have_cards', val));
}
if (wantSelect) {
const selectedWant = Array.from(wantSelect.selectedOptions).map(opt => {
const cardId = opt.value;
const quantity = opt.getAttribute('data-quantity') || '1';
return cardId + ':' + quantity;
});
selectedWant.forEach(val => url.searchParams.append('want_cards', val));
}
window.location.href = url.href;
});
}
});
</script>
{% endblock %}