From 7c62c57433670ca385bba22c8f763f2c2d6b1921 Mon Sep 17 00:00:00 2001 From: badbl0cks <4161747+badbl0cks@users.noreply.github.com> Date: Fri, 4 Apr 2025 14:23:53 -0700 Subject: [PATCH] remove trade offer expanding, fix flipping to work with new layout. all cards in trade offer are not expanded --- cards/templatetags/card_badge.py | 6 +- static/js/base.js | 56 ++++- theme/templates/cards/_card_list.html | 4 +- theme/templates/home/_card_list.html | 2 +- theme/templates/trades/_trade_offer_list.html | 2 +- .../templates/trades/trade_offer_detail.html | 2 +- theme/templatetags/card_badge.html | 24 +- theme/templatetags/trade_offer.html | 234 ++++++++---------- theme/templatetags/trade_offer_png.html | 12 +- trades/templatetags/trade_offer_tags.py | 8 +- trades/views.py | 14 +- 11 files changed, 194 insertions(+), 170 deletions(-) diff --git a/cards/templatetags/card_badge.py b/cards/templatetags/card_badge.py index d679d81..721942b 100644 --- a/cards/templatetags/card_badge.py +++ b/cards/templatetags/card_badge.py @@ -5,14 +5,14 @@ from django.utils.safestring import mark_safe register = template.Library() @register.inclusion_tag("templatetags/card_badge.html") -def card_badge(card, quantity=None, static=False): +def card_badge(card, quantity=None, expanded=False): return { 'quantity': quantity, 'style': card.style, 'name': card.name, 'rarity': card.rarity_icon, 'cardset': card.cardset, - 'static': static, + 'expanded': expanded, } @register.filter @@ -26,6 +26,6 @@ def card_badge_inline(card, quantity=None): 'name': card.name, 'rarity': card.rarity_icon, 'cardset': card.cardset, - 'static': True, + 'expanded': True, }) return mark_safe(html) \ No newline at end of file diff --git a/static/js/base.js b/static/js/base.js index 7bedc2e..d47160f 100644 --- a/static/js/base.js +++ b/static/js/base.js @@ -130,17 +130,55 @@ const $$ = selector => Array.from(document.querySelector(selector)); window.tradeOfferCard = function() { return { flipped: false, - badgeExpanded: false, - acceptanceExpanded: false, - /** - * Update the badge's expanded state. + show_back: false, + collapsed: false, + /* + * flipWithCollapse() now applies the height transition directly on the visible card face. + * It measures the current face (front or back) and the target face's height, + * then animates the current face's height change before toggling the flip. * - * @param {boolean} expanded - The new state of the badge. + * Make sure your template markup includes: + * - x-ref="front" on the front card face + * - x-ref="back" on the back card face */ - setBadge(expanded) { - this.badgeExpanded = expanded; - }, - }; + flipWithCollapse() { + // Determine the currently visible face and the target face. + const currentFace = this.flipped ? this.$refs.back : this.$refs.front; + const targetFace = this.flipped ? this.$refs.front : this.$refs.back; + const container = this.$refs.container; + + // Temporarily force target face to display to measure its height. + const originalHeight = targetFace.style.height; + const originalDisplay = targetFace.style.display; + const originalPosition = targetFace.style.position; + const originalVisibility = targetFace.style.visibility; + targetFace.style.height = 'auto'; + targetFace.style.display = 'block'; + targetFace.style.position = 'absolute'; + targetFace.style.visibility = 'hidden'; + const targetHeight = targetFace.offsetHeight + 18; + targetFace.style.height = originalHeight; + targetFace.style.display = originalDisplay; + targetFace.style.position = originalPosition; + targetFace.style.visibility = originalVisibility; + + container.setAttribute('x-collapse.duration.500ms.min.' + targetHeight + 'px', ''); + this.collapsed = true; + setTimeout(() => { + this.show_back = this.flipped; + this.flipped = !this.flipped; + setTimeout(() => { + this.show_back = !this.show_back; + }, 250) + setTimeout(() => { + this.collapsed = false; + setTimeout(() => { + container.removeAttribute('x-collapse.duration.500ms.min.' + targetHeight + 'px'); + }, 550); + }, 550); + }, 550); + } + } }; } })(); \ No newline at end of file diff --git a/theme/templates/cards/_card_list.html b/theme/templates/cards/_card_list.html index dcb3728..fdc6ad0 100644 --- a/theme/templates/cards/_card_list.html +++ b/theme/templates/cards/_card_list.html @@ -6,7 +6,7 @@
{% for card in group.cards %} - {% card_badge card static=True %} + {% card_badge card expanded=True %} {% endfor %}
@@ -15,7 +15,7 @@
{% for card in cards %} - {% card_badge card static=True %} + {% card_badge card expanded=True %} {% endfor %}
diff --git a/theme/templates/home/_card_list.html b/theme/templates/home/_card_list.html index ad4b36e..95a9025 100644 --- a/theme/templates/home/_card_list.html +++ b/theme/templates/home/_card_list.html @@ -4,7 +4,7 @@ {% for card in cards %} - {% card_badge card quantity=card.offer_count static=True %} + {% card_badge card quantity=card.offer_count expanded=True %} {% endfor %} diff --git a/theme/templates/trades/_trade_offer_list.html b/theme/templates/trades/_trade_offer_list.html index 8f1ad71..eb6d2e0 100644 --- a/theme/templates/trades/_trade_offer_list.html +++ b/theme/templates/trades/_trade_offer_list.html @@ -11,7 +11,7 @@ {# Render a trade acceptance using our new tag #} {% render_trade_acceptance offer %} {% else %} - {% render_trade_offer offer expanded=expanded %} + {% render_trade_offer offer %} {% endif %} {% empty %} diff --git a/theme/templates/trades/trade_offer_detail.html b/theme/templates/trades/trade_offer_detail.html index 9c8ef59..fc78880 100644 --- a/theme/templates/trades/trade_offer_detail.html +++ b/theme/templates/trades/trade_offer_detail.html @@ -7,7 +7,7 @@

Trade Offer Details

- {% render_trade_offer object expanded=True %} + {% render_trade_offer object %}
{% if acceptance_form %}
diff --git a/theme/templatetags/card_badge.html b/theme/templatetags/card_badge.html index 1447891..d1b337c 100644 --- a/theme/templatetags/card_badge.html +++ b/theme/templatetags/card_badge.html @@ -1,19 +1,19 @@ -{% if not static %} -
-
-
{{ name }}
-
{{ rarity }}
-
{{ cardset }}
- {% if quantity != None %}
{{ quantity }}
{% endif %} +{% if not expanded %} +
+
+
{{ name }}
+
{{ cardset }}
+ {% if quantity != None %}
+
{{ quantity }}
{% endif %}
{% else %} -
+
-
{{ name }}
-
{{ rarity }}
-
{{ cardset }}
- {% if quantity != None %}
{{ quantity }}
{% endif %} +
{{ name }}
+
{{ rarity }}
+
{{ cardset }}
+ {% if quantity != None %}
{{ quantity }}
{% endif %}
{% endif %} \ No newline at end of file diff --git a/theme/templatetags/trade_offer.html b/theme/templatetags/trade_offer.html index d1829c6..b241421 100644 --- a/theme/templatetags/trade_offer.html +++ b/theme/templatetags/trade_offer.html @@ -1,104 +1,89 @@ {% load gravatar card_badge cache %} +{% url 'trade_offer_detail' pk=offer_pk as trade_offer_detail_url %} {% cache 60 trade_offer offer_pk %}
-
- - -
- -
+
+
+
- - -
- -
- - -
- -
- Has - Wants -
- -
-
-
- {{ initiated_by_email|gravatar:40 }} + + +
+ +
+ +
+ +
+ Has + Wants +
+ +
+
+
+ {{ initiated_by_email|gravatar:40 }} +
+
+ +
+ {% if not flipped %} +
+ +
+ +
+ {% for card in have_cards_available %} + + {% card_badge card.card card.quantity %} + + {% endfor %} +
+ +
+ {% for card in want_cards_available %} + + {% card_badge card.card card.quantity %} + + {% endfor %} +
+
- -
- -
- {% if not flipped %} - -
- -
- -
- {% for card in have_cards_available %} - {% card_badge card.card card.quantity %} - {% endfor %} -
- -
- {% for card in want_cards_available %} - {% card_badge card.card card.quantity %} - {% endfor %} -
-
-
- {% else %} -
+
- All cards have been accepted. + All cards have been traded.
{% endif %} -
-
-
-
- - - -
-
- - - -
-
- - +
+
+
+
+ + +
+
{{ rarity_icon }}
+
+ + + +
-
- - - -
-
- + + + +
+
Has @@ -113,68 +98,65 @@
- -
-
-
-
- {% for acceptance in acceptances %} - -
+
+ Accepted by: {{ acceptance.accepted_by.user.username }} + State: {{ acceptance.state }} + Acceptance ID: {{ acceptance.hash }} +
+
'> +
{% card_badge acceptance.requested_card %} {% card_badge acceptance.offered_card %}
- {% endfor %} + {% empty %} +
+
+ No trades yet. +
+
+ {% endfor %} +
-
-
- -
- - - -
-
- - Accepted Trades ({{ acceptances|length }}) - -
-
- - - +
+ +
+ + + +
+
{{ rarity_icon }}
+
+ + ({{ acceptances|length }}) + +
-