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

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

Browse source
This commit is contained in:
badblocks 2025-04-15 00:15:08 -07:00
parent 86b061c971
commit afaa392b2f
22 changed files with 247 additions and 227 deletions
Download patch file Download diff file Expand all files Collapse all files

22
theme/templates/trades/trade_offer_detail.html
View file

@ -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 }} &bull; <a class="link link-hover" href="{% url 'trade_acceptance_update' pk=trade.pk %}">#{{ trade.hash }}</a> &bull; {{ trade.get_state_display }}</div>
<div class="col-span-2 text-center mt-1">{{ trade.accepted_by.user.username }} &bull; <a class="link link-hover" href="{% url 'trade_acceptance_update' pk=trade.pk %}">#{{ trade.hash }}</a> &bull; {{ 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 %}

4
theme/templates/trades/trade_offer_search.html
View file

@ -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">