fix card badges to have better rarity visibility and other bugfixes

theme/templates/account/dashboard.html

@@ -104,27 +104,27 @@
   <div x-show="activeTab === 'profile'">
     <div class="card card-border bg-base-100 shadow-lg mx-auto p-6 mb-4">
       {% with gravatar_profile=request.user.email|gravatar_profile_data %}
-        {% if gravatar_profile %}
+        
           <div class="hovercard-profile mb-4 text-center">
-            <img src="{{ gravatar_profile.thumbnailUrl }}" alt="{{ gravatar_profile.displayName|default:request.user.username }}" class="rounded-full mb-2 mx-auto" />
+            <div class="avatar block mx-auto w-32">
+              <div class="W-32 rounded-full">
+                {{ request.user.email|gravatar:128 }}
+              </div>
+            </div>
             <a href="https://gravatar.com/profile/avatars" target="_blank" rel="noopener noreferrer" class="btn btn-primary mt-4">
               Edit Avatar on Gravatar 
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
               </svg>
             </a>
-    
           </div>
-        {% else %}
-          <p class="text-center">{{ _('No Gravatar profile data available.') }}</p>
-        {% endif %}
       {% endwith %}
       <div class="divider"></div>
       <h2 class="text-base font-semibold pt-0">What is Gravatar?</h2>
       <p class="mb-4 text-sm">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.</p>
       
       <h2 class="text-base font-semibold">How does it work?</h2>
-      <p class="mb-4 text-sm">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.</p>
+      <p class="mb-4 text-sm">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 randomly-generated avatar instead.</p>
       
       <h2 class="text-base font-semibold">Is it safe? What about privacy?</h2>
       <p class="mb-4 text-sm">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.</p>

theme/templates/cards/card_list.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% load static card_badge %}
 {% block content %}
-<div class="container mx-auto p-4" 
+<div class="container mx-auto" 
      x-data="{
          order: '{{ order }}',
          groupBy: '{{ group_by|default:'none' }}',
@@ -15,10 +15,7 @@
                 .then(html => { this.$refs.cardList.innerHTML = html; });
          }
      }"
-     x-init="loadCards()"
-     x-on:change-page.window="page = $event.detail.page; loadCards()"
->
-    
+     x-on:change-page.window="page = $event.detail.page; loadCards()">
     <div class="flex flex-wrap items-center justify-between mb-6">
         <div>
             <h1 class="text-2xl font-bold">Cards</h1>
@@ -57,7 +54,7 @@
     </div>
     <!-- Container for the partial card list -->
     <div x-ref="cardList">
-        
+        {% include "cards/_card_list.html" with cards=cards page_obj=page_obj %}
     </div>
 </div>
 {% endblock %}

theme/templates/trades/_trade_offer_list.html

@@ -4,7 +4,7 @@
   For a TradeOffer, we use {% render_trade_offer %}; for a TradeAcceptance, {% render_trade_acceptance %}.
 {% endcomment %}
 
-<div class="flex flex-row gap-2 flex-wrap justify-center items-start">
+<div class="flex flex-row gap-6 md:gap-2 lg:gap-6 flex-wrap justify-center items-start py-6">
   {% for offer in offers %}
     <div class="flex flex-none">
       {% if offer.accepted_by %}

theme/templates/trades/trade_offer_all_list.html

@@ -5,64 +5,42 @@
 
 {% block content %}
 <div x-data="{
-    // Initialize allExpanded from the URL if present, defaulting to false.
-    allExpanded: new URLSearchParams(window.location.search).get('expanded') === 'true',
     page: {{ page_obj.number|default:1 }},
     loadOffers() {
       let url = new URL('{% url 'trade_offer_list' %}', window.location.origin);
       let params = new URLSearchParams(window.location.search);
       params.set('page', this.page);
-      // Include the expanded state if active
-      if (this.allExpanded) {
-        params.set('expanded', 'true');
-      } else {
-        params.delete('expanded');
-      }
       url.search = params.toString();
       fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
         .then(response => response.text())
         .then(html => { this.$refs.offersContainer.innerHTML = html; });
-    },
-    // Update the URL so that navigation preserves our expanded state.
-    updateUrl() {
-      let params = new URLSearchParams(window.location.search);
-      if (this.allExpanded) {
-        params.set('expanded', 'true');
-      } else {
-        params.delete('expanded');
-      }
-      history.replaceState(null, '', window.location.pathname + '?' + params.toString());
     }
   }"
-  x-init="loadOffers()"
   x-on:change-page.window="page = $event.detail.page; loadOffers()">
   
-  <!-- Header with the toggle -->
+  <!-- Header without Expand All -->
   <div class="flex justify-between items-center mb-4">
     <h1 class="text-2xl font-bold">Trade Offers</h1>
-    <div>
+    <div class="flex items-center gap-4">
       <form method="get" class="flex items-center gap-4" x-data>
-        <label class="cursor-pointer flex items-center gap-2">
-          <span x-text="allExpanded ? 'Collapse All' : 'Expand All'"></span>
-          <input type="checkbox" name="all_expanded" value="true" class="toggle toggle-primary"
-                 @click="allExpanded = !allExpanded; $dispatch('toggle-all', { expanded: allExpanded }); updateUrl();">
-        </label>
         <label class="cursor-pointer flex items-center gap-2">
           <span>Only Closed</span>
-          <input type="checkbox" name="show_closed" value="true" class="toggle toggle-primary" @change="$el.form.submit()" {% if show_closed %}checked{% endif %}>
+          <input type="checkbox" name="show_closed" value="true" class="toggle toggle-primary"
+                @change="$el.form.submit()" {% if show_closed %}checked{% endif %}>
         </label>
         <button type="submit" class="btn btn-primary" x-show="false">Apply</button>
       </form>
+      <div>
+        <a href="{% url 'trade_offer_create' %}" class="btn btn-success">Create New Offer</a>
+      </div>
     </div>
   </div>
   <!-- Trade Offers -->
   <section class="mb-12">
-    <div class="flex justify-end mb-4">
-      <a href="{% url 'trade_offer_create' %}" class="btn btn-success">Create New Offer</a>
-    </div>
+    
     <div id="all-trade-offers" x-ref="offersContainer">
-      {% include "trades/_trade_offer_list.html" with offers=offers page_obj=page_obj expanded=expanded %}
+      {% include "trades/_trade_offer_list.html" with offers=offers page_obj=page_obj %}
     </div>
   </section>
 </div>
-{% endblock content %} 
+{% endblock content %}