Add javascript marquee effect for overflowing text on card badge names

static/js/base.js

@@ -112,10 +112,30 @@ const $$ = selector => Array.from(document.querySelector(selector));
     });
   }
 
-  // On DOMContentLoaded, initialize theme toggling and form processing.
+  /**
+   * Process all elements with the 'marquee' class.
+   * For each element, if its content is overflowing (using isElementOverflowing),
+   * wrap its innerHTML within a <marquee> tag and remove the 'marquee' class.
+   */
+  function processMarqueeElements() {
+    document.querySelectorAll('.marquee-calc').forEach(element => {
+      console.log(element.innerHTML, element.offsetWidth, element.scrollWidth);
+      if (element.offsetWidth >= 148 || element.offsetWidth < element.scrollWidth) {
+        element.innerHTML = '<marquee behavior="scroll" direction="left" scrolldelay="80">' + element.innerHTML + '</marquee>';
+      }
+      
+      element.classList.remove('marquee-calc');
+    });
+  }
+
+  // Expose processMarqueeElements to be available for AJAX-loaded partial updates.
+  window.processMarqueeElements = processMarqueeElements;
+
+  // On DOMContentLoaded, initialize theme toggling, form processing, and marquee wrapping.
   document.addEventListener("DOMContentLoaded", () => {
     initThemeToggle();
     initCardMultiselectHandling();
+    processMarqueeElements();
   });
 
   // On pageshow, only reset multiselect state if the page was loaded from bfcache.

theme/templates/account/dashboard.html

@@ -203,6 +203,7 @@
           .then(html => {
             this.$el.innerHTML = html;
             this.init();
+            window.processMarqueeElements && window.processMarqueeElements();
           });
       },
       init() {

theme/templates/cards/card_detail.html

@@ -20,7 +20,10 @@
                 document.activeElement.blur();
                 fetch(`{% url 'cards:card_trade_offer_have_list' card.pk %}?order=` + this.order + '&page=' + this.page)
                     .then(response => response.text())
-                    .then(html => { this.$refs.offerList.innerHTML = html; });
+                    .then(html => { 
+                        this.$refs.offerList.innerHTML = html;
+                        window.processMarqueeElements && window.processMarqueeElements();
+                    });
             }
         }" 
         x-init="loadOffers()"
@@ -60,7 +63,10 @@
             loadOffers() {
                 fetch(`{% url 'cards:card_trade_offer_want_list' card.pk %}?order=` + this.order + '&page=' + this.page)
                     .then(response => response.text())
-                    .then(html => { this.$refs.offerList.innerHTML = html; });
+                    .then(html => { 
+                        this.$refs.offerList.innerHTML = html;
+                        window.processMarqueeElements && window.processMarqueeElements();
+                    });
             }
         }" 
         x-init="loadOffers()"

theme/templates/cards/card_list.html

@@ -12,7 +12,10 @@
              let url = window.location.pathname + '?order=' + this.order + '&group_by=' + groupParam + '&page=' + this.page;
              fetch(url, { headers: { 'x-requested-with': 'XMLHttpRequest' } })
                 .then(response => response.text())
-                .then(html => { this.$refs.cardList.innerHTML = html; });
+                .then(html => { 
+                    this.$refs.cardList.innerHTML = html;
+                    window.processMarqueeElements && window.processMarqueeElements();
+                });
          }
      }"
      x-on:change-page.window="page = $event.detail.page; loadCards()">

theme/templates/home/home.html

@@ -92,48 +92,15 @@
               <h5 class="text-xl font-semibold whitespace-nowrap truncate mb-0">Featured Offers</h5>
             </div>
             <div class="p-4">
-              <!-- Tab contents -->
+              {% if featured_offers.All %}
-              <div id="featured-tab-contents">
+                <div class="flex flex-col items-center gap-6 w-auto mx-auto">
-                <div class="tab-content" data-tab="featured-all">
+                  {% for offer in featured_offers.All %}
-                  {% if featured_offers.All %}
+                    {% render_trade_offer offer %}
-                    <div class="flex flex-col items-center gap-6 w-auto mx-auto">
-                      {% for offer in featured_offers.All %}
-                        {% render_trade_offer offer %}
-                      {% endfor %}
-                    </div>
-                  {% else %}
-                    <p class="text-center">No featured offers available.</p>
-                  {% endif %}
-                </div>
-                {% for rarity, offers in featured_offers.items %}
-                  {% if rarity != "All" %}
-                    <div class="tab-content" data-tab="featured-{{ forloop.counter }}" style="display: none;">
-                      {% if offers %}
-                        <div class="flex flex-col items-center gap-3 w-auto mx-auto">
-                          {% for offer in offers %}
-                            {% render_trade_offer offer %}
-                          {% endfor %}
-                        </div>
-                      {% else %}
-                        <p class="text-center">No featured offers for {{ rarity }}.</p>
-                      {% endif %}
-                    </div>
-                  {% endif %}
-                {% endfor %}
-              </div>
-              <!-- DaisyUI Tabs for Featured Offers (hidden for now) -->     
-              <div class="card card-border bg-base-100 shadow-lg w-96 md:w-80 lg:w-96 mt-8 mx-auto hidden">
-                <!-- Tabs navigation using daisyUI tabs-box -->
-                <div class="tabs tabs-box bg-white dark:bg-base-100 grid grid-cols-3 gap-1.5 justify-items-stretch">
-                  <!-- Radio inputs for controlling tab state -->
-                  <input type="radio" class="tab text-xs font-bold md:text-sm w-full bg-base-100" name="featured_tabs" id="featured-all" checked="checked" aria-label="All">
-                  {% for rarity, offers in featured_offers.items %}
-                    {% if rarity != "All" %}
-                      <input type="radio" class="tab text-xs font-bold md:text-sm w-full bg-base-100" name="featured_tabs" id="featured-{{ forloop.counter }}" aria-label="{{ rarity }}">
-                    {% endif %}
                   {% endfor %}
                 </div>
-              </div>
+              {% else %}
+                <p class="text-center">No featured offers available.</p>
+              {% endif %}
             </div>
           {% endcache %}
         </div>

theme/templates/trades/trade_offer_all_list.html

@@ -13,7 +13,10 @@
       url.search = params.toString();
       fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
         .then(response => response.text())
-        .then(html => { this.$refs.offersContainer.innerHTML = html; });
+        .then(html => { 
+            this.$refs.offersContainer.innerHTML = html;
+            window.processMarqueeElements && window.processMarqueeElements();
+        });
     }
   }"
   x-on:change-page.window="page = $event.detail.page; loadOffers()">

theme/templatetags/card_badge.html

@@ -1,7 +1,7 @@
 {% if not expanded %}
 <div class="relative block m-1">
   <div class="flex flex-row items-center h-[32px] p-1.5 w-40 text-white shadow-lg" style="{{ style }}">
-    <div class="grow truncate text-ellipsis font-semibold leading-tight text-sm">{{ name }}</div>
+    <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>
     {% if quantity != None %}<div class="grow-0 shrink-0 relative w-fit ps-1">
       <div class="card-quantity-badge relative bg-gray-600 text-white text-sm font-semibold rounded-full text-center size-max px-1.5">{{ quantity }}</div></div>{% endif %}
@@ -10,10 +10,9 @@
 {% else %}
 <div class="relative block m-1">
   <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 col-span-3 truncate text-ellipsis self-start font-semibold leading-tight text-sm">{{ name }}</div>
+    <div class="row-start-1 col-start-1 col-span-4 self-start leading-tight truncate text-ellipsis"><span class="font-semibold text-sm marquee-calc">{{ name }}</span></div>
     <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>
-    {% if quantity != None %}<div class="row-start-1 col-start-4 self-start justify-self-end -me-0.5 relative w-fit ps-1"><div class="card-quantity-badge relative bg-gray-600 text-white text-sm font-semibold rounded-full text-center size-max px-1.5">{{ quantity }}</div></div>{% endif %}
   </div>
 </div>
 {% endif %}