fix trade offer tag card gap spacing

This commit is contained in:
badblocks 2025-04-17 16:56:41 -07:00
parent b894b60b65
commit 725061e151

View file

@ -3,7 +3,7 @@
{% cache 60 trade_offer offer_pk %} {% 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 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-container">
<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 %}" <div class="flip-inner grid grid-cols-1 grid-rows-1 card bg-base-100 card-border shadow-lg w-87 transform transition-transform duration-500 ease-in-out{%if flipped %} rotate-y-180{% endif %}"
:class="{'rotate-y-180': flipped}"> :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 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"> <div class="flip-face-header self-start">
@ -25,14 +25,14 @@
</div> </div>
<div class="flip-face-body self-start{% if not on_detail_page %} cursor-pointer{% endif %}"{% if not on_detail_page %} @click.stop.prevent="window.location.href = '{% url 'trade_offer_detail' pk=offer_pk %}'"{% endif %}> <div class="flip-face-body self-start{% if not on_detail_page %} cursor-pointer{% endif %}"{% if not on_detail_page %} @click.stop.prevent="window.location.href = '{% url 'trade_offer_detail' pk=offer_pk %}'"{% endif %}>
<div x-show="offerExpanded" x-collapse.duration.500ms class="px-2 badges"> <div x-show="offerExpanded" x-collapse.duration.500ms class="px-2 badges">
<div class="flex flex-row justify-around"> <div class="flex flex-row justify-around gap-2">
{% if num_cards_available > 0 %} {% if num_cards_available > 0 %}
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
{% for card in have_cards_available %} {% for card in have_cards_available %}
{% card_badge card.card card.quantity %} {% card_badge card.card card.quantity %}
{% endfor %} {% endfor %}
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-1">
{% for card in want_cards_available %} {% for card in want_cards_available %}
{% card_badge card.card card.quantity %} {% card_badge card.card card.quantity %}
{% endfor %} {% endfor %}