badblocks/pkmntrade.club
1
1
Fork 0
Code Issues 14 Pull requests Projects 1 Releases Packages Wiki Activity

Add javascript marquee effect for overflowing text on card badge names

Browse source
This commit is contained in:
badblocks 2025-04-06 23:30:57 -07:00
parent 262f0ea190
commit e37731b74d
7 changed files with 47 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

1
theme/templates/account/dashboard.html
View file

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

10
theme/templates/cards/card_detail.html
View file

@ -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()"

5
theme/templates/cards/card_list.html
View file

@ -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()">

47
theme/templates/home/home.html
View file

@ -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 -->
<div id="featured-tab-contents">
<div class="tab-content" data-tab="featured-all">
{% if featured_offers.All %}
<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 %}
{% if featured_offers.All %}
<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>
</div>
{% else %}
<p class="text-center">No featured offers available.</p>
{% endif %}
</div>
{% endcache %}
</div>

5
theme/templates/trades/trade_offer_all_list.html
View file

@ -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()">