From 37d8bd59815f38a42ab7ebcee6a1c6ff00d00fdd Mon Sep 17 00:00:00 2001 From: badbl0cks <4161747+badbl0cks@users.noreply.github.com> Date: Fri, 4 Apr 2025 22:50:07 -0700 Subject: [PATCH] Another attempt at getting the trade flipping and collapsing looking correct --- static/js/base.js | 57 ------ theme/templates/account/dashboard.html | 13 +- theme/templates/base.html | 30 --- theme/templates/home/home.html | 4 +- theme/templatetags/trade_offer.html | 250 +++++++++++------------ theme/templatetags/trade_offer_old.html | 260 ++++++++++++++++++++++++ trades/templatetags/trade_offer_tags.py | 5 +- 7 files changed, 386 insertions(+), 233 deletions(-) create mode 100644 theme/templatetags/trade_offer_old.html diff --git a/static/js/base.js b/static/js/base.js index d47160f..6eae6ef 100644 --- a/static/js/base.js +++ b/static/js/base.js @@ -124,61 +124,4 @@ const $$ = selector => Array.from(document.querySelector(selector)); resetCardMultiselectState(); } }); - - // Expose tradeOfferCard globally if not already defined. - if (!window.tradeOfferCard) { - window.tradeOfferCard = function() { - return { - flipped: false, - 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. - * - * Make sure your template markup includes: - * - x-ref="front" on the front card face - * - x-ref="back" on the back card face - */ - 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/account/dashboard.html b/theme/templates/account/dashboard.html index 9dd5ad8..17938c5 100644 --- a/theme/templates/account/dashboard.html +++ b/theme/templates/account/dashboard.html @@ -107,9 +107,8 @@ {% if gravatar_profile %}
{{ gravatar_profile.displayName|default:request.user.username }} -

{{ gravatar_profile.displayName|default:request.user.username }}

- - Edit Profile on Gravatar + + Edit Avatar on Gravatar @@ -122,16 +121,16 @@ {% endwith %}

What is Gravatar?

-

Gravatar (Globally Recognized Avatar) is a free service that links your email address to a profile picture and, optionally, a profile. Many websites, including this one, use Gravatar to display your avatar and profile automatically.

+

Gravatar (Globally Recognized Avatar) is a free service that links your email address to a profile picture. Many websites, including this one, use Gravatar to display your preferred avatar automatically.

How does it work?

-

If you've set up a Gravatar, your profile picture will appear here whenever you use your email on supported sites. When someone hovers over or clicks on your avatar, your Gravatar profile will also appear if you have one. If you don't have a Gravatar yet, you'll see a default image instead.

+

If you've set up a Gravatar, your profile picture will appear here whenever you use your email on supported sites. If you don't have a Gravatar yet, you'll see a default image instead.

Is it safe? What about privacy?

-

Gravatar is completely optional, opt-in, and prioritizes your security and privacy. Your email is never shared and only a hashed version is sent to Gravatar, protecting your identity while ensuring that your email address is not exposed to bots or scrapers. Your personal data remains secure, and you maintain full control over your public profile.

+

Gravatar is completely optional, opt-in, and prioritizes your security and privacy. Your email is never visible to anyone and only a hashed version is shown on the page and sent to Gravatar, protecting your identity while ensuring that your email address is not exposed to bots or scrapers.

Want to update or add a Gravatar?

-

Go to Gravatar.com to set up or change your avatar or profile. Your updates will appear here once saved!

+

Go to Gravatar.com to set up or change your avatar. Your updates will appear here once saved!

diff --git a/theme/templates/base.html b/theme/templates/base.html index d175ea0..66a813c 100644 --- a/theme/templates/base.html +++ b/theme/templates/base.html @@ -41,13 +41,6 @@ - - - - - - - {% block css %}{% endblock %} @@ -150,29 +143,6 @@ - - - - {% block javascript %}{% endblock %} diff --git a/theme/templates/home/home.html b/theme/templates/home/home.html index b5fa0f6..905018f 100644 --- a/theme/templates/home/home.html +++ b/theme/templates/home/home.html @@ -96,7 +96,7 @@