starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-04-25 10:08:36 +02:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

feat: remove bootstrap's collapses; improve animations

Browse Source
This commit is contained in:
Herculino Trotta
2025-12-14 11:06:55 -03:00
parent cf7d4b1404
commit 4aa29545ec
14 changed files with 189 additions and 514 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/templates/monthly_overview/fragments/list.html
View File

@@ -5,33 +5,19 @@
<div id="transactions-list">
{% for x in transactions_by_date %}
<div id="{{ x.grouper|slugify }}" class="transactions-divider"
_="on htmx:afterSwap from #transactions if sessionStorage.getItem(my id) is null then sessionStorage.setItem(my id, 'true')">
x-data="{ open: sessionStorage.getItem('{{ x.grouper|slugify }}') !== 'false' }"
x-init="if (sessionStorage.getItem('{{ x.grouper|slugify }}') === null) sessionStorage.setItem('{{ x.grouper|slugify }}', 'true')">
<div class="mt-3 mb-1 w-full border-b border-b-base-content/30 transactions-divider-title cursor-pointer">
<a class="no-underline inline-block w-full"
role="button"
data-bs-toggle="collapse"
data-bs-target="#c-{{ x.grouper|slugify }}-collapse"
id="c-{{ x.grouper|slugify }}-collapsible"
aria-expanded="false"
aria-controls="c-{{ x.grouper|slugify }}-collapse">
@click="open = !open; sessionStorage.setItem('{{ x.grouper|slugify }}', open)"
:aria-expanded="open">
{{ x.grouper }}
</a>
</div>
<div class="bs collapse transactions-divider-collapse overflow-visible isolation-auto" id="c-{{ x.grouper|slugify }}-collapse"
_="on shown.bs.collapse sessionStorage.setItem(the closest parent @id, 'true')
on hidden.bs.collapse sessionStorage.setItem(the closest parent @id, 'false')
on htmx:afterSettle from #transactions or toggle
set state to sessionStorage.getItem(the closest parent @id)
if state is 'true' or state is null
add .show to me
set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to true
else
remove .show from me
set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to false
end
on show
add .show to me
set @aria-expanded of #c-{{ x.grouper|slugify }}-collapsible to true">
<div class="transactions-divider-collapse overflow-visible isolation-auto"
x-show="open"
x-collapse>
<div class="flex flex-col">
{% for transaction in x.list %}
<c-transaction.item

9
app/templates/monthly_overview/pages/overview.html
View File

@@ -89,7 +89,7 @@
</div>
<div class="col-12 lg:col-8 lg:order-first! order-last!">
<div class="my-3">
<div class="my-3" x-data="{ filterOpen: false }" hx-preserve id="filter-container">
{# Hidden select to hold the order value and preserve the original update trigger #}
<select name="order" id="order" class="d-none" _="on change trigger updated on window">
<option value="default" {% if order == 'default' %}selected{% endif %}>{% translate 'Default' %}</option>
@@ -101,8 +101,8 @@
<div class="join w-full">
<button class="btn btn-secondary join-item relative" type="button"
data-bs-toggle="collapse" data-bs-target="#collapse-filter"
aria-expanded="false" aria-controls="collapse-filter" id="filter-button" hx-preserve
@click="filterOpen = !filterOpen"
:aria-expanded="filterOpen" id="filter-button"
title="{% translate 'Filter transactions' %}">
<i class="fa-solid fa-filter fa-fw"></i>
</button>
@@ -113,7 +113,6 @@
<input type="search"
class="input input-bordered join-item flex-1"
placeholder="{% translate 'Search' %}"
hx-preserve
id="quick-search"
_="on input or search or htmx:afterSwap from window
if my value is empty
@@ -165,7 +164,7 @@
</div>
{# Filter transactions form #}
<div class="bs collapse z-1" id="collapse-filter" hx-preserve>
<div class="z-1" x-show="filterOpen" x-collapse>
<div class="card card-body bg-base-200 mt-2">
<div class="text-right">
<button class="btn btn-outline btn-error btn-sm w-fit"