fix card_badges to always be links to card detail page

cards/templatetags/card_badge.py

@@ -1,11 +1,13 @@
 from django import template
 from django.template.loader import render_to_string
 from django.utils.safestring import mark_safe
+from django.urls import reverse
 
 register = template.Library()
 
 @register.inclusion_tag("templatetags/card_badge.html")
 def card_badge(card, quantity=None, expanded=False):
+    url = reverse('cards:card_detail', args=[card.pk])
     return {
         'quantity': quantity,
         'style': card.style,
@@ -13,6 +15,7 @@ def card_badge(card, quantity=None, expanded=False):
         'rarity': card.rarity_icon,
         'cardset': card.cardset,
         'expanded': expanded,
+        'url': url,
     }
 
 @register.filter
@@ -20,6 +23,7 @@ def card_badge_inline(card, quantity=None):
     """
     Renders an inline card badge.
     """
+    url = reverse('cards:card_detail', args=[card.pk])
     html = render_to_string("templatetags/card_badge.html", {
         'quantity': quantity,
         'style': card.style,
@@ -27,6 +31,7 @@ def card_badge_inline(card, quantity=None):
         'rarity': card.rarity_icon,
         'cardset': card.cardset,
         'expanded': True,
+        'url': url,
     })
     return mark_safe(html)
 

theme/templates/cards/_card_list.html

@@ -5,18 +5,14 @@
         <div class="divider">{{ group.group }}</div>
         <div class="flex justify-center flex-wrap gap-2">
             {% for card in group.cards %}
-                <a href="{% url 'cards:card_detail' card.pk %}">
                 {% card_badge card expanded=True %}
-                </a>
             {% endfor %}
         </div>
     {% endfor %}
 {% else %}
     <div class="flex justify-center flex-wrap gap-2">
         {% for card in cards %}
-            <a href="{% url 'cards:card_detail' card.pk %}">
             {% card_badge card expanded=True %}
-            </a>
         {% endfor %}
     </div>
 {% endif %}

theme/templates/home/_card_list.html

@@ -2,10 +2,7 @@
 {% if cards %}
     <div class="mx-4 grid gap-3 grid-cols-[repeat(auto-fit,minmax(150px,1fr))] justify-items-center">
       {% for card in cards %}
-        <a href="{% url 'cards:card_detail' card.id %}"
-          class="flex justify-between items-center text-primary no-underline">
         {% card_badge card quantity=card.offer_count expanded=True %}
-        </a>
       {% endfor %}
     </div>
 {% else %}

theme/templatetags/card_badge.html

@@ -1,5 +1,6 @@
-{% if not expanded %}
+<a href="{{ url }}">
   <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="grow-0 shrink-0 text-right truncate font-semibold leading-tight text-sm">{{ cardset }}</div>
@@ -9,9 +10,7 @@
           </div>
         {% endif %}
       </div>
-</div>
     {% else %}
-<div class="relative block">
       <div class="grid grid-rows-2 grid-cols-4 h-[52px] p-1.5 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 %}
@@ -22,5 +21,6 @@
         <div class="row-start-2 col-start-1 col-span-3 truncate self-end text-xs text-transparent">{{ rarity }}</div>
         <div class="row-start-2 col-start-4 col-span-1 self-end text-right truncate font-semibold leading-tight text-sm">{{ cardset }}</div>
       </div>
-</div>
     {% endif %}
+  </div>
+</a>

theme/templatetags/card_multiselect.html

@@ -11,7 +11,7 @@
         data-card-id="{{ card.pk }}"
         data-quantity="{{ card.selected_quantity }}"
         {% if card.selected %}selected{% endif %}
-        data-html-content='{{ card|card_badge_inline:"__QUANTITY__" }}'
+        data-html-content='<div class="m-2">{{ card|card_badge_inline:"__QUANTITY__" }}</div>'
         data-name="{{ card.name }}"
         data-rarity="{{ card.rarity_icon }}"
         data-cardset="{{ card.cardset }}">
@@ -39,7 +39,7 @@ if (!window.updateGlobalCardFilters) {
               }
           });
           if (selectedValues.length > 0 && globalRarity === null) {
-              const option = select.querySelector(`option[value="${selectedValues[0]}"]`);
+              const option = select.querySelector('option[value="${selectedValues[0]}"]');
               if (option) {
                   globalRarity = option.getAttribute('data-rarity');
               }

theme/templatetags/trade_offer.html

@@ -25,14 +25,14 @@
               <div x-show="offerExpanded" x-collapse.duration.500ms class="px-2 badges">
                   <div class="flex flex-row justify-around">
                     {% if num_cards_available > 0 %}
-                    <div class="flex flex-col">
+                    <div class="flex flex-col gap-2">
                       {% for card in have_cards_available %}
-                          <div class="cursor-pointer m-1" @click.stop="window.location.href='{% url 'cards:card_detail' pk=card.card.pk %}'">{% card_badge card.card card.quantity %}</div>
+                          {% card_badge card.card card.quantity %}
                       {% endfor %}
                     </div>
-                    <div class="flex flex-col">
+                    <div class="flex flex-col gap-2">
                       {% for card in want_cards_available %}
-                          <div class="cursor-pointer m-1" @click.stop="window.location.href='{% url 'cards:card_detail' pk=card.card.pk %}'">{% card_badge card.card card.quantity %}</div>
+                          {% card_badge card.card card.quantity %}
                       {% endfor %}
                     </div>
                     {% else %}