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

4
theme/templates/account/dashboard.html
View file

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

8
theme/templates/base.html
View file

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

4
theme/templates/cards/card_detail.html
View file

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

4
theme/templates/cards/card_list.html
View file

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

2
theme/templates/friend_codes/edit_friend_code.html
View file

@ -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 %}

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