finished conversion to tailwind
This commit is contained in:
parent
6e2843c60e
commit
d62956d465
50 changed files with 2490 additions and 1273 deletions
|
|
@ -16,115 +16,88 @@
|
|||
|
||||
<!-- Search Form Section -->
|
||||
<section id="trade-search" class="mb-8">
|
||||
<form method="post" action="." class="space-y-4">
|
||||
<form method="post" action="{% url 'trade_offer_search' %}" 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 %}
|
||||
{% card_multiselect "have_cards" "Have:" "Select some cards..." available_cards have_cards %}
|
||||
</div>
|
||||
<div>
|
||||
{% card_multiselect "want_cards" "Want:" "Select zero or more cards..." available_cards want_cards %}
|
||||
{% card_multiselect "want_cards" "Want:" "Select some 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 %}
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<button type="submit" class="btn btn-primary flex-1">
|
||||
Find a Trade Offer
|
||||
</button>
|
||||
{% if user.is_authenticated %}
|
||||
<a href="{% url 'trade_offer_create' %}" id="createTradeOfferBtn" class="btn btn-secondary flex-1 text-center">
|
||||
Create Trade Offer
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- 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 card-border bg-base-100 shadow-lg">
|
||||
<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 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>
|
||||
<!-- Most Wanted Cards -->
|
||||
<div>
|
||||
<div class="card card-border bg-base-100 shadow-lg">
|
||||
<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 (Last Group) -->
|
||||
<div class="col-span-2 md:col-span-1">
|
||||
<div class="card card-border bg-base-100 shadow-lg">
|
||||
<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" %}
|
||||
{% endcache %}
|
||||
</div>
|
||||
</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>
|
||||
</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">
|
||||
<div>
|
||||
{% cache 86400 featured_offers %}
|
||||
<div class="p-4">
|
||||
<h5 class="text-xl text-center font-semibold whitespace-nowrap truncate mb-0">Featured Offers</h5>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<!-- Tab contents -->
|
||||
<div id="featured-tab-contents">
|
||||
<div class="tab-content" data-tab="featured-all">
|
||||
{% if featured_offers.All %}
|
||||
<div class="flex flex-col items-center gap-3 w-auto mx-auto">
|
||||
{% for offer in featured_offers.All %}
|
||||
|
|
@ -135,11 +108,9 @@
|
|||
<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 }}">
|
||||
<div class="tab-content" data-tab="featured-{{ forloop.counter }}" style="display: none;">
|
||||
{% if offers %}
|
||||
<div class="flex flex-col items-center gap-3 w-auto mx-auto">
|
||||
{% for offer in offers %}
|
||||
|
|
@ -153,20 +124,30 @@
|
|||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- DaisyUI Tabs for Featured Offers -->
|
||||
<div class="card card-border bg-base-100 shadow-lg w-96 md:w-80 lg:w-96 mt-8 mx-auto">
|
||||
<!-- Tabs navigation using daisyUI tabs-box -->
|
||||
<div class="tabs tabs-box bg-white dark:bg-base-100 grid grid-cols-3 gap-1.5 justify-items-stretch">
|
||||
<!-- Radio inputs for controlling tab state -->
|
||||
<input type="radio" class="tab text-xs font-bold md:text-sm w-full bg-base-100" name="featured_tabs" id="featured-all" checked="checked" aria-label="All">
|
||||
{% for rarity, offers in featured_offers.items %}
|
||||
{% if rarity != "All" %}
|
||||
<input type="radio" class="tab text-xs font-bold md:text-sm w-full bg-base-100" name="featured_tabs" id="featured-{{ forloop.counter }}" aria-label="{{ rarity }}">
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcache %}
|
||||
</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">
|
||||
<div class="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="p-4">
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
{% for offer in recent_offers %}
|
||||
{% render_trade_offer offer %}
|
||||
|
|
@ -175,125 +156,15 @@
|
|||
{% 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) {
|
||||
|
|
@ -326,6 +197,49 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
window.location.href = url.href;
|
||||
});
|
||||
}
|
||||
|
||||
// Minimal JavaScript for toggling Featured Offers tabs
|
||||
const featuredTabs = document.querySelectorAll('input[name="featured_tabs"]');
|
||||
const featuredTabContents = document.querySelectorAll('#featured-tab-contents .tab-content');
|
||||
|
||||
function updateFeaturedTabs() {
|
||||
featuredTabs.forEach(radio => {
|
||||
if (radio.checked) {
|
||||
const target = radio.id;
|
||||
featuredTabContents.forEach(content => {
|
||||
if (content.getAttribute('data-tab') === target) {
|
||||
content.style.display = 'block';
|
||||
} else {
|
||||
content.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
featuredTabs.forEach(radio => {
|
||||
radio.addEventListener('change', updateFeaturedTabs);
|
||||
});
|
||||
|
||||
// Initialize tabs on page load
|
||||
updateFeaturedTabs();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block css %}
|
||||
<style>
|
||||
.tabs-box .tab {
|
||||
z-index: 1;
|
||||
}
|
||||
.tabs-box .tab:checked,
|
||||
.tabs-box .tab.active {
|
||||
z-index: 2;
|
||||
background-color: var(--color-base-200);
|
||||
accent-color: var(--color-base-200);
|
||||
}
|
||||
.tabs-box .tab:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue