use <a> tags for card_badge and trade_offer clickable areas (except for main card_badge row on trade_offers, still uses @click for now because the a tag can't wrap that content for some reason). closes #14
This commit is contained in:
parent
86b061c971
commit
afaa392b2f
22 changed files with 247 additions and 227 deletions
|
|
@ -23,7 +23,9 @@
|
|||
*
|
||||
*/
|
||||
|
||||
@theme {}
|
||||
@theme {
|
||||
--breakpoint-xs: 24rem;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -6,68 +6,68 @@
|
|||
*/
|
||||
|
||||
module.exports = {
|
||||
content: [
|
||||
/**
|
||||
* HTML. Paths to Django template files that will contain Tailwind CSS classes.
|
||||
*/
|
||||
content: [
|
||||
/**
|
||||
* HTML. Paths to Django template files that will contain Tailwind CSS classes.
|
||||
*/
|
||||
|
||||
/* Templates within theme app (<tailwind_app_name>/templates), e.g. base.html. */
|
||||
'../templates/**/*.html',
|
||||
/* Templates within theme app (<tailwind_app_name>/templates), e.g. base.html. */
|
||||
"../templates/**/*.html",
|
||||
|
||||
/*
|
||||
* Main templates directory of the project (BASE_DIR/templates).
|
||||
* Adjust the following line to match your project structure.
|
||||
*/
|
||||
'../../templates/**/*.html',
|
||||
/*
|
||||
* Main templates directory of the project (BASE_DIR/templates).
|
||||
* Adjust the following line to match your project structure.
|
||||
*/
|
||||
"../../templates/**/*.html",
|
||||
|
||||
/*
|
||||
* Templates in other django apps (BASE_DIR/<any_app_name>/templates).
|
||||
* Adjust the following line to match your project structure.
|
||||
*/
|
||||
'../../**/templates/**/*.html',
|
||||
/*
|
||||
* Templates in other django apps (BASE_DIR/<any_app_name>/templates).
|
||||
* Adjust the following line to match your project structure.
|
||||
*/
|
||||
"../../**/templates/**/*.html",
|
||||
|
||||
/**
|
||||
* JS: If you use Tailwind CSS in JavaScript, uncomment the following lines and make sure
|
||||
* patterns match your project structure.
|
||||
*/
|
||||
/* JS 1: Ignore any JavaScript in node_modules folder. */
|
||||
// '!../../**/node_modules',
|
||||
/* JS 2: Process all JavaScript files in the project. */
|
||||
// '../../**/*.js',
|
||||
/**
|
||||
* JS: If you use Tailwind CSS in JavaScript, uncomment the following lines and make sure
|
||||
* patterns match your project structure.
|
||||
*/
|
||||
/* JS 1: Ignore any JavaScript in node_modules folder. */
|
||||
// '!../../**/node_modules',
|
||||
/* JS 2: Process all JavaScript files in the project. */
|
||||
// '../../**/*.js',
|
||||
|
||||
/**
|
||||
* Python: If you use Tailwind CSS classes in Python, uncomment the following line
|
||||
* and make sure the pattern below matches your project structure.
|
||||
*/
|
||||
// '../../**/*.py'
|
||||
],
|
||||
safelist: [
|
||||
'alert-info',
|
||||
'alert-success',
|
||||
'alert-warning',
|
||||
'alert-error',
|
||||
'btn-info',
|
||||
'btn-success',
|
||||
'btn-warning',
|
||||
'btn-error',
|
||||
'bg-info',
|
||||
'bg-success',
|
||||
'bg-warning',
|
||||
'bg-error',
|
||||
'text-gray-700'
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [
|
||||
/**
|
||||
* '@tailwindcss/forms' is the forms plugin that provides a minimal styling
|
||||
* for forms. If you don't like it or have own styling for forms,
|
||||
* comment the line below to disable '@tailwindcss/forms'.
|
||||
*/
|
||||
require('@tailwindcss/forms'),
|
||||
require('@tailwindcss/typography'),
|
||||
require('@tailwindcss/aspect-ratio'),
|
||||
],
|
||||
darkMode: 'class',
|
||||
}
|
||||
/**
|
||||
* Python: If you use Tailwind CSS classes in Python, uncomment the following line
|
||||
* and make sure the pattern below matches your project structure.
|
||||
*/
|
||||
// '../../**/*.py'
|
||||
],
|
||||
safelist: [
|
||||
"alert-info",
|
||||
"alert-success",
|
||||
"alert-warning",
|
||||
"alert-error",
|
||||
"btn-info",
|
||||
"btn-success",
|
||||
"btn-warning",
|
||||
"btn-error",
|
||||
"bg-info",
|
||||
"bg-success",
|
||||
"bg-warning",
|
||||
"bg-error",
|
||||
"text-gray-700",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [
|
||||
/**
|
||||
* '@tailwindcss/forms' is the forms plugin that provides a minimal styling
|
||||
* for forms. If you don't like it or have own styling for forms,
|
||||
* comment the line below to disable '@tailwindcss/forms'.
|
||||
*/
|
||||
require("@tailwindcss/forms"),
|
||||
require("@tailwindcss/typography"),
|
||||
require("@tailwindcss/aspect-ratio"),
|
||||
],
|
||||
darkMode: "class",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -106,8 +106,8 @@
|
|||
{% with gravatar_profile=request.user.email|gravatar_profile_data %}
|
||||
|
||||
<div class="hovercard-profile mb-4 text-center">
|
||||
<div class="avatar block mx-auto w-32">
|
||||
<div class="W-32 rounded-full">
|
||||
<div class="avatar block mx-auto max-w-32">
|
||||
<div class="rounded-full">
|
||||
{{ request.user.email|gravatar:128 }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -79,13 +79,13 @@
|
|||
{% if user.is_authenticated %}
|
||||
<div class="hidden sm:block">
|
||||
<div class="btn btn-ghost btn-circle avatar">
|
||||
<div class="w-10 rounded-full">
|
||||
<div class="max-w-10 rounded-full">
|
||||
<a tabindex="0" role="button" href="{% url 'dashboard' %}">{{ user.email|gravatar_no_hover:40 }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="flex gap-2">
|
||||
<div class="gap-2 hidden sm:flex">
|
||||
<a tabindex="0" role="button" class="btn btn-primary" href="{% url 'account_login' %}">Login</a>
|
||||
<a tabindex="1" role="button" class="btn btn-secondary" href="{% url 'account_signup' %}">Sign Up</a>
|
||||
</div>
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="container mx-auto p-4 w-full xl:w-256">
|
||||
<main class="container mx-auto p-4 w-full xl:max-w-256">
|
||||
{% include '_messages.html' %}
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
<span class="dock-label">Trades</span>
|
||||
</button>
|
||||
<button @click="window.location.href = '{{ dashboard_url }}'" class="{% if request.path == dashboard_url or request.path == settings_url %}dock-active{% endif %}">
|
||||
{% if user.is_authenticated %}<div tabindex="0" role="button" class="avatar"><div class="w-6 rounded-full">{{ user.email|gravatar_no_hover:40 }}</div></div>{% else %}<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></circle><path d="m22,13.25v-2.5l-2.318-.966c-.167-.581-.395-1.135-.682-1.654l.954-2.318-1.768-1.768-2.318.954c-.518-.287-1.073-.515-1.654-.682l-.966-2.318h-2.5l-.966,2.318c-.581.167-1.135.395-1.654.682l-2.318-.954-1.768,1.768.954,2.318c-.287.518-.515,1.073-.682,1.654l-2.318.966v2.5l2.318.966c.167.581.395,1.135.682,1.654l-.954,2.318,1.768,1.768,2.318-.954c.518.287,1.073.515,1.654.682l.966,2.318h2.5l.966-2.318c.581-.167,1.135-.395,1.654-.682l2.318.954,1.768-1.768-.954-2.318c.287-.518.515-1.073.682-1.654l2.318-.966Z" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path></g></svg>{% endif %}
|
||||
{% if user.is_authenticated %}<div tabindex="0" role="button" class="avatar"><div class="max-w-6 rounded-full">{{ user.email|gravatar_no_hover:40 }}</div></div>{% else %}<svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></circle><path d="m22,13.25v-2.5l-2.318-.966c-.167-.581-.395-1.135-.682-1.654l.954-2.318-1.768-1.768-2.318.954c-.518-.287-1.073-.515-1.654-.682l-.966-2.318h-2.5l-.966,2.318c-.581.167-1.135.395-1.654.682l-2.318-.954-1.768,1.768.954,2.318c-.287.518-.515,1.073-.682,1.654l-2.318.966v2.5l2.318.966c.167.581.395,1.135.682,1.654l-.954,2.318,1.768,1.768,2.318-.954c.518.287,1.073.515,1.654.682l.966,2.318h2.5l.966-2.318c.581-.167,1.135-.395,1.654-.682l2.318.954,1.768-1.768-.954-2.318c.287-.518.515-1.073.682-1.654l2.318-.966Z" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path></g></svg>{% endif %}
|
||||
<span class="dock-label">Dashboard</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
<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 w-26 p-2 shadow-sm">
|
||||
<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
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
<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 w-26 p-2 shadow-sm">
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<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 p-2 shadow bg-base-100 rounded-box w-52">
|
||||
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box max-w-52">
|
||||
<li><a href="#" @click.prevent="order = 'absolute'; page = 1; loadCards()">Cardset</a></li>
|
||||
<li><a href="#" @click.prevent="order = 'alphabetical'; page = 1; loadCards()">Alphabetical</a></li>
|
||||
<li><a href="#" @click.prevent="order = 'rarity'; page = 1; loadCards()">Rarity</a></li>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
<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 p-2 shadow bg-base-100 rounded-box w-52">
|
||||
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box max-w-52">
|
||||
<li><a href="#" @click.prevent="groupBy = 'none'; page = 1; loadCards()">None</a></li>
|
||||
<li><a href="#" @click.prevent="groupBy = 'deck'; page = 1; loadCards()">Deck</a></li>
|
||||
<li><a href="#" @click.prevent="groupBy = 'cardset'; page = 1; loadCards()">Cardset</a></li>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
{% block title %}Edit Friend Code{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto max-w-3xl mt-6">
|
||||
<h1 class="text-3xl font-bold mb-4">Edit Friend Code</h1>
|
||||
|
||||
<!-- Display the friend code as plain text -->
|
||||
|
|
@ -46,5 +45,4 @@
|
|||
<button type="submit" form="edit-friendcode-form" class="btn btn-primary">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -4,11 +4,10 @@
|
|||
{% block title %}{{title}}{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto mt-6">
|
||||
<h2 class="text-2xl font-bold">Trade Offer Details</h2>
|
||||
<div class="card card-border bg-base-100 shadow-lg mx-auto p-6 m-4 text-sm">
|
||||
<div class="card card-border bg-base-100 shadow-lg mx-auto px-2 py-4 m-2 text-sm">
|
||||
{% if acceptance_form %}
|
||||
<div class="col-span-2 w-3/4 mx-auto card card-border bg-base-200 shadow-lg p-6 mb-8">
|
||||
<div class="col-span-2 max-w-3/4 mx-auto card card-border bg-base-200 shadow-lg p-6 mb-8">
|
||||
<h3 class="text-xl font-semibold mb-2">Accept A Trade</h3>
|
||||
<form method="post" action="{% url 'trade_acceptance_create' offer_pk=object.pk %}">
|
||||
{% csrf_token %}
|
||||
|
|
@ -53,15 +52,15 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
<div class="grid grid-cols-2 justify-items-end items-baseline gap-4">
|
||||
<div class="font-semibold text-right text-lg">Cards They Have:
|
||||
<div class="flex flex-wrap flex-col gap-2 text-left mt-4">
|
||||
<div class="font-semibold text-right xs:text-lg">Cards They Have:
|
||||
<div class="flex flex-wrap flex-col gap-2 text-left mt-4 items-center">
|
||||
{% for card in object.have_cards_available %}
|
||||
{% card_badge card.card card.qty_available %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-semibold justify-self-start text-lg">Cards They Want:
|
||||
<div class="flex flex-wrap flex-col gap-2 mt-4">
|
||||
<div class="font-semibold justify-self-start xs:text-lg">Cards They Want:
|
||||
<div class="flex flex-wrap flex-col gap-2 mt-4 items-center">
|
||||
{% for card in object.want_cards_available %}
|
||||
{% card_badge card.card card.qty_available %}
|
||||
{% endfor %}
|
||||
|
|
@ -80,18 +79,17 @@
|
|||
<div class="justify-self-start">{{ object.updated_at }}</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="font-semibold text-center text-lg mb-2">Trade History:</div>
|
||||
<div class="flex flex-row flex-wrap justify-start items-baseline w-90 lg:w-181 mx-auto">
|
||||
<div class="font-semibold text-center sm:text-lg mb-2">Trade History:</div>
|
||||
<div class="flex flex-row flex-wrap justify-start items-baseline gap-y-2 w-65 xs:w-88 sm:w-90 lg:w-181 mx-auto">
|
||||
{% for trade in object.acceptances.all %}
|
||||
<div class="p-2 grid grid-cols-2 justify-items-center items-baseline gap-1 w-90">
|
||||
<div class="grid grid-cols-2 justify-items-between items-baseline w-65 xs:w-88 sm:w-90 lg:w-181">
|
||||
<div class="">{% card_badge trade.offered_card %}</div>
|
||||
<div class="">{% card_badge trade.requested_card %}</div>
|
||||
<div class="col-span-2 text-center">{{ trade.accepted_by.user.username }} • <a class="link link-hover" href="{% url 'trade_acceptance_update' pk=trade.pk %}">#{{ trade.hash }}</a> • {{ trade.get_state_display }}</div>
|
||||
<div class="col-span-2 text-center mt-1">{{ trade.accepted_by.user.username }} • <a class="link link-hover" href="{% url 'trade_acceptance_update' pk=trade.pk %}">#{{ trade.hash }}</a> • {{ trade.get_state_display }}</div>
|
||||
</div>
|
||||
{% empty %}
|
||||
<div class="text-center justify-center w-full text-center">No trades yet.</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
|
@ -10,10 +10,10 @@
|
|||
{% csrf_token %}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
{% card_multiselect "have_cards" "I Have:" "Select zero or more cards..." cards have_cards %}
|
||||
{% card_multiselect "have_cards" "I Have:" "Select some cards..." cards have_cards %}
|
||||
</div>
|
||||
<div>
|
||||
{% card_multiselect "want_cards" "I Want:" "Select zero or more cards..." cards want_cards %}
|
||||
{% card_multiselect "want_cards" "I Want:" "Select some cards..." cards want_cards %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<a href="{{ url }}" @click.stop>
|
||||
<div class="relative block">
|
||||
{% if not expanded %}
|
||||
<div class="flex flex-row items-center h-[32px] p-1.5 w-40 text-white shadow-lg" style="{{ style }}">
|
||||
<div class="grow"><div class="truncate text-ellipsis font-semibold leading-tight text-sm marquee-calc max-w-24">{{ name }}</div></div>
|
||||
<div class="flex flex-row items-center h-[32px] p-1.5 w-30 sm:w-40 text-white shadow-lg" style="{{ style }}">
|
||||
<div class="grow"><div class="truncate text-ellipsis font-semibold leading-tight text-sm marquee-calc w-4/5 sm:w-24">{{ name }}</div></div>
|
||||
<div class="grow-0 shrink-0 text-right truncate font-semibold leading-tight text-sm">{{ cardset }}</div>
|
||||
{% if quantity != None %}
|
||||
<div class="grow-0 shrink-0 relative w-fit ps-1">
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="grid grid-rows-2 grid-cols-4 h-[52px] p-1.5 w-40 text-white shadow-lg" style="{{ style }}">
|
||||
<div class="grid grid-rows-2 grid-cols-4 h-[52px] p-1.5 w-30 sm:w-40 text-white shadow-lg" style="{{ style }}">
|
||||
<div class="row-start-1 col-start-1 {% if quantity != None %}col-span-3{% else %}col-span-4{% endif %} self-start leading-tight truncate text-ellipsis"><span class="font-semibold text-sm marquee-calc">{{ name }}</span></div>
|
||||
{% if quantity != None %}
|
||||
<div class="row-start-1 col-start-4 col-span-1 self-start ms-auto leading-tight relative w-fit ps-1">
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
{% load gravatar card_badge %}
|
||||
|
||||
<div class="card card-border bg-base-100 shadow-lg w-90 mx-auto">
|
||||
<div class="cursor-pointer" @click.stop="window.location.href='{% url 'trade_acceptance_update' pk=acceptance.pk %}'">
|
||||
<!-- Header -->
|
||||
<div class="card card-border bg-base-100 shadow-lg max-w-90 mx-auto">
|
||||
<!-- Header -->
|
||||
<a href="{% url 'trade_acceptance_update' pk=acceptance.pk %}">
|
||||
<div class="my-4 mx-4">
|
||||
<div class="flex justify-start items-center">
|
||||
<!-- Left: Initiator's avatar and "Has" -->
|
||||
<div class="flex items-center">
|
||||
<div class="avatar me-2 tooltip tooltip-top cursor-default" @click.stop.prevent data-tip="{{ acceptance.trade_offer.initiated_by.user.username }} | {{ acceptance.trade_offer.initiated_by.user.reputation_score }} rep">
|
||||
<div class="w-10 rounded-full">
|
||||
<div class="max-w-10 rounded-full">
|
||||
{{ acceptance.trade_offer.initiated_by.user.email|gravatar:40 }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -22,17 +22,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Card Row: Single row with the acceptance's cards -->
|
||||
<div class="px-2 pb-0">
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="cursor-pointer">{% card_badge acceptance.requested_card %}</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="cursor-pointer">{% card_badge acceptance.offered_card %}</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- Main Card Row: Single row with the acceptance's cards -->
|
||||
<div class="px-2 pb-0">
|
||||
<div class="grid grid-cols-2 items-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="cursor-pointer">{% card_badge acceptance.requested_card %}</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="cursor-pointer">{% card_badge acceptance.offered_card %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{% url 'trade_acceptance_update' pk=acceptance.pk %}">
|
||||
<div class="my-4 mx-4">
|
||||
<div class="flex justify-end items-center">
|
||||
<!-- Right: "Wants" with the acceptor's avatar -->
|
||||
|
|
@ -45,12 +47,12 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
<div class="avatar ms-2 tooltip tooltip-bottom cursor-default" @click.stop.prevent data-tip="{{ acceptance.accepted_by.user.username}} | {{ acceptance.accepted_by.user.reputation_score }} rep">
|
||||
<div class="w-10 rounded-full">
|
||||
<div class="max-w-10 rounded-full">
|
||||
{{ acceptance.accepted_by.user.email|gravatar:40 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
{% cache 60 trade_offer offer_pk %}
|
||||
<div x-data="{ flipped: {{flipped|lower}}, offerExpanded: {{flipped|yesno:'false,true'}}, acceptanceExpanded: {{flipped|lower}} }" x-ref="tradeOffer" class="transition-all duration-500 trade-offer-card">
|
||||
<div class="flip-container">
|
||||
<div class="flip-inner grid grid-cols-1 grid-rows-1 card bg-base-100 card-border shadow-lg w-90 transform transition-transform duration-500 ease-in-out{%if flipped %} rotate-y-180{% endif %}"
|
||||
<div class="flip-inner grid grid-cols-1 grid-rows-1 card bg-base-100 card-border shadow-lg max-w-90 transform transition-transform duration-500 ease-in-out{%if flipped %} rotate-y-180{% endif %}"
|
||||
:class="{'rotate-y-180': flipped}">
|
||||
<div class="flip-face front rotate-y-0 col-start-1 row-start-1 grid grid-cols-1 auto-rows-min gap-2 content-between">
|
||||
<div class="flip-face-header self-start">
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
</div>
|
||||
<div class="absolute inset-x-0 top-1/2 transform -translate-y-1/2 flex justify-center">
|
||||
<div class="avatar tooltip tooltip-top cursor-default" @click.stop.prevent data-tip="{{ initiated_by_username }} | {{ initiated_reputation }} rep">
|
||||
<div class="w-10 rounded-full">
|
||||
<div class="max-w-10 rounded-full">
|
||||
{{ initiated_by_email|gravatar:40 }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
</div>
|
||||
<div class="absolute inset-x-0 top-1/2 transform -translate-y-1/2 flex justify-center">
|
||||
<div class="avatar tooltip tooltip-top cursor-default" @click.stop.prevent data-tip="{{ initiated_by_username }} | {{ initiated_reputation }} rep">
|
||||
<div class="w-10 rounded-full">
|
||||
<div class="max-w-10 rounded-full">
|
||||
{{ initiated_by_email|gravatar:40 }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -88,16 +88,16 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="flip-face-body self-start">
|
||||
<div class="px-2 space-y-3 text-xs">
|
||||
<div x-show="acceptanceExpanded" x-collapse.duration.500ms class="flex flex-row flex-wrap justify-start items-baseline w-90 lg:w-181 mx-auto">
|
||||
<div class="text-xs">
|
||||
<div x-show="acceptanceExpanded" x-collapse.duration.500ms class="flex flex-row flex-wrap justify-center items-baseline mx-auto">
|
||||
{% for trade in acceptances %}
|
||||
<div class="p-2 grid grid-cols-2 justify-items-center items-baseline gap-1">
|
||||
<div class="mb-2 grid grid-cols-2 justify-items-center items-baseline gap-x-3 gap-y-1">
|
||||
<div class="">{% card_badge trade.offered_card %}</div>
|
||||
<div class="">{% card_badge trade.requested_card %}</div>
|
||||
<div class="col-span-2 text-center">{{ trade.accepted_by.user.username }} • <a class="link link-hover" href="{% url 'trade_acceptance_update' pk=trade.pk %}">#{{ trade.hash }}</a> • {{ trade.get_state_display }}</div>
|
||||
<div class="col-span-2 text-center tooltip tooltip-bottom" data-tip="{{ trade.accepted_by.user.username }} | {{ trade.accepted_by.user.reputation_score }} rep">{{ trade.accepted_by.user.username }} • <a class="link link-hover" href="{% url 'trade_acceptance_update' pk=trade.pk %}">#{{ trade.hash }}</a> • {{ trade.get_state_display }}</div>
|
||||
</div>
|
||||
{% empty %}
|
||||
<div class="text-center justify-center w-full text-center">No trades yet.</div>
|
||||
<div class="w-full text-center">No trades yet.</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,100 +1,119 @@
|
|||
{% load gravatar card_badge tailwind_tags %}<!DOCTYPE html>
|
||||
<html style="background-color: transparent !important;">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<html style="background-color: transparent !important">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<style>
|
||||
{% include 'static/css/dist/styles.css' %}
|
||||
{% include 'static/css/dist/styles.css' %}
|
||||
</style>
|
||||
</head>
|
||||
<body style="background-color: transparent !important;">
|
||||
<div class="trade-offer-card-screenshot p-4 h-full w-auto flex justify-center" style="background-color: transparent !important;">
|
||||
<div class="transition-all duration-500 trade-offer-card my-auto">
|
||||
|
||||
<!-- Flip container providing perspective -->
|
||||
<div class="flip-container">
|
||||
<div class="flip-inner grid grid-cols-1 grid-rows-1 card bg-base-100 card-border shadow-lg {% if expanded %}w-180{% else %}w-96{% endif %} transform transition-transform duration-700 ease-in-out">
|
||||
|
||||
<!-- Front Face: Trade Offer -->
|
||||
<div class="flip-face front mb-2 col-start-1 row-start-1 grid grid-cols-1 auto-rows-min gap-2 content-between">
|
||||
</head>
|
||||
<body style="background-color: transparent !important">
|
||||
<div
|
||||
class="trade-offer-card-screenshot p-4 h-full w-auto flex justify-center"
|
||||
style="background-color: transparent !important"
|
||||
>
|
||||
<div class="transition-all duration-500 trade-offer-card my-auto">
|
||||
<!-- Flip container providing perspective -->
|
||||
<div class="flip-container">
|
||||
<div
|
||||
class="flip-inner grid grid-cols-1 grid-rows-1 card bg-base-100 card-border shadow-lg {% if expanded %}w-180{% else %}w-96{% endif %} transform transition-transform duration-700 ease-in-out"
|
||||
>
|
||||
<!-- Front Face: Trade Offer -->
|
||||
<div
|
||||
class="flip-face front mb-2 col-start-1 row-start-1 grid grid-cols-1 auto-rows-min gap-2 content-between"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="flip-face-header self-start">
|
||||
<a href="{% url 'trade_offer_detail' pk=offer_pk %}" class="no-underline block">
|
||||
<div class="mt-6 mb-4 mx-2 sm:mx-4">
|
||||
<!-- Two-column grid for the labels -->
|
||||
<div class="flex flex-row justify-around w-full relative">
|
||||
<div class="text-sm font-semibold text-center ms-3">Has</div>
|
||||
<div class="absolute inset-x-0 top-1/2 transform -translate-y-1/2 flex justify-center">
|
||||
<div class="avatar">
|
||||
<div class="w-10 rounded-full">
|
||||
{{ initiated_by_email|gravatar:40 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm font-semibold text-center {% if expanded %}ms-8{% else %}me-2{% endif %}">Wants</div>
|
||||
<div class="mt-6 mb-4 mx-2 sm:mx-4">
|
||||
<!-- Two-column grid for the labels -->
|
||||
<div class="flex flex-row justify-around w-full relative">
|
||||
<div class="text-sm font-semibold text-center ms-2">
|
||||
Has
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Main Trade Offer Row -->
|
||||
<div class="flip-face-body self-start">
|
||||
<a href="{% url 'trade_offer_detail' pk=offer_pk %}" class="no-underline block">
|
||||
<div class="px-4 main-badges pb-0">
|
||||
{% if expanded %}
|
||||
<div class="flex flex-row gap-1 justify-around">
|
||||
<!-- Has Side (inner grid of 2 columns) -->
|
||||
<div class="grid grid-cols-2 content-start">
|
||||
{% for card in have_cards_available %}
|
||||
{% card_badge card.card card.quantity %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- Vertical Divider -->
|
||||
<div class="flex justify-center">
|
||||
<div class="w-px bg-gray-300 h-full"></div>
|
||||
</div>
|
||||
<!-- Wants Side (inner grid of 2 columns) -->
|
||||
<div class="grid grid-cols-2 content-start">
|
||||
{% for card in want_cards_available %}
|
||||
{% card_badge card.card card.quantity %}
|
||||
{% endfor %}
|
||||
<div
|
||||
class="absolute inset-x-0 top-1/2 transform -translate-y-1/2 flex justify-center"
|
||||
>
|
||||
<div class="avatar">
|
||||
<div class="w-10 rounded-full">
|
||||
{{ initiated_by_email|gravatar:40 }}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<!-- Normal mode: just use an outer grid with 2 columns -->
|
||||
<div class="flex flex-row gap-1 justify-around">
|
||||
<!-- Has Side -->
|
||||
<div class="flex flex-col content-start">
|
||||
{% for card in have_cards_available %}
|
||||
{% card_badge card.card card.quantity %}
|
||||
{% empty %}
|
||||
<div class="text-xs text-center mb-2 ms-3">None left.</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- Wants Side -->
|
||||
<div class="flex flex-col content-start">
|
||||
{% for card in want_cards_available %}
|
||||
{% card_badge card.card card.quantity %}
|
||||
{% empty %}
|
||||
<div class="text-xs text-center mb-2{% if expanded %} ms-8{% else %} me-4{% endif %}">None left.</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flip-face-footer self-end">
|
||||
<div class="flex flex-col gap-2 text-center">
|
||||
<div class="text-sm font-semibold text-base-content">
|
||||
{{ in_game_name }} {% if show_friend_code %}<span class="text-base-content/50">•</span> {{ friend_code }}{% endif %}
|
||||
</div>
|
||||
<div
|
||||
class="text-sm font-semibold text-center {% if expanded %}ms-5{% endif %}"
|
||||
>
|
||||
Wants
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Trade Offer Row -->
|
||||
<div class="flip-face-body self-start">
|
||||
<div class="px-4 main-badges pb-0">
|
||||
{% if expanded %}
|
||||
<div class="flex flex-row justify-around">
|
||||
<!-- Has Side (inner grid of 2 columns) -->
|
||||
<div class="grid grid-cols-2 content-start gap-1">
|
||||
{% for card in have_cards_available %} {% card_badge card.card card.quantity %} {% empty %}
|
||||
<div class="text-xs text-center mb-2 ms-3 col-span-2">
|
||||
None left.
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- Vertical Divider -->
|
||||
<div class="flex justify-center">
|
||||
<div class="w-px bg-gray-300 h-full"></div>
|
||||
</div>
|
||||
<!-- Wants Side (inner grid of 2 columns) -->
|
||||
<div class="grid grid-cols-2 content-start gap-1">
|
||||
{% for card in want_cards_available %} {% card_badge card.card card.quantity %} {% empty %}
|
||||
<div class="text-xs text-center mb-2 ms-3 col-span-2">
|
||||
None left.
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<!-- Normal mode: just use an outer grid with 2 columns -->
|
||||
<div class="flex flex-row gap-1 justify-around">
|
||||
<!-- Has Side -->
|
||||
<div class="flex flex-col content-start gap-1">
|
||||
{% for card in have_cards_available %} {% card_badge card.card card.quantity %} {% empty %}
|
||||
<div class="text-xs text-center mb-2 ms-3">
|
||||
None left.
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- Wants Side -->
|
||||
<div class="flex flex-col content-start gap-1">
|
||||
{% for card in want_cards_available %} {% card_badge card.card card.quantity %} {% empty %}
|
||||
<div
|
||||
class="text-xs text-center mb-2{% if expanded %} ms-8{% else %} me-4{% endif %}"
|
||||
>
|
||||
None left.
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flip-face-footer self-end">
|
||||
<div class="flex flex-col gap-2 text-center">
|
||||
<div class="text-sm font-semibold text-base-content">
|
||||
{% if show_friend_code %}{{ in_game_name }} <span
|
||||
class="text-base-content/50"
|
||||
>•</span
|
||||
>
|
||||
{{ friend_code }}{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue