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

Add expand all/collapse all button for trades listings

Browse source
This commit is contained in:
badblocks 2025-03-12 00:57:23 -07:00
parent 0990340cbc
commit d942632811
3 changed files with 108 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,15 +4,25 @@
{% block title %}All Trade Offers{% endblock title %}
{% block content %}
<div class="container mx-auto max-w-4xl mt-6">
<div class="flex justify-end mb-4">
<form method="get" class="flex items-center space-x-4">
<label class="cursor-pointer flex items-center space-x-2">
<span class="font-medium">Only Closed</span>
<input type="checkbox" name="show_closed" value="true" class="toggle toggle-primary" {% if show_closed %}checked{% endif %}>
</label>
<button type="submit" class="btn btn-primary">Apply</button>
</form>
<div class="container mx-auto max-w-4xl mt-6" x-data="{ allExpanded: false }">
<div class="flex justify-between items-center mb-4">
<div>
<form method="get" class="flex items-center space-x-4">
<label class="cursor-pointer flex items-center space-x-2">
<span class="font-medium">Only Closed</span>
<input type="checkbox" name="show_closed" value="true" class="toggle toggle-primary" {% if show_closed %}checked{% endif %}>
</label>
<button type="submit" class="btn btn-primary">Apply</button>
</form>
</div>
<div>
<!-- Global toggle button using Alpine only -->
<button type="button"
@click="allExpanded = !allExpanded; $dispatch('toggle-all', { expanded: allExpanded })"
class="btn btn-secondary">
<span x-text="allExpanded ? 'Collapse All' : 'Expand All'"></span>
</button>
</div>
</div>
<!-- Trade Offers -->
<section class="mb-12">