feat: more changes and fixes

app/templates/transactions/fragments/list_all.html

@@ -1,13 +1,12 @@
 {% load natural %}
 {% load i18n %}
-
 {% regroup page_obj by date|customnaturaldate as transactions_by_date %}
 
-<div id="transactions-list">
+<div id="transactions-list" class="show-loading">
   {% 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')">
-      <div class="mt-3 mb-1 w-full text-base border-b border-base-300 bg-base-100 transactions-divider-title">
+      <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"
@@ -18,7 +17,7 @@
         {{ x.grouper }}
         </a>
       </div>
-      <div class="collapse transactions-divider-collapse overflow-visible isolation-auto" id="c-{{ x.grouper|slugify }}-collapse"
+      <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
@@ -41,14 +40,18 @@
         </div>
       </div>
     </div>
+
   {% empty %}
     <c-msg.empty
         title="{% translate "No transactions found" %}"
         subtitle="{% translate "Try adding one" %}"></c-msg.empty>
   {% endfor %}
 
+  {# Floating bar #}
+  <c-ui.transactions-action-bar></c-ui.transactions-action-bar>
+
   {% if page_obj.has_other_pages %}
-    <div class="mt-auto">
+    <div class="my-3">
       <input value="{{ page_obj.number }}" name="page" type="hidden" id="page">
 
       <nav aria-label="{% translate 'Page navigation' %}">
@@ -86,7 +89,8 @@
                      hx-vals='{"page": {{ page_number }}}'
                      hx-include="#filter, #order"
                      hx-target="#transactions-list"
-                     hx-swap="show:top">
+                     hx-swap="outerHTML show:top"
+                     hx-indicator="#transactions-list">
                     {{ page_number }}
                   </a>
                 </li>
@@ -102,10 +106,12 @@
             </li>
             <li>
               <a class="join-item btn btn-sm"
-                 hx-get="{% url 'transactions_all_list' %}" hx-target="#transactions-list"
+                 hx-get="{% url 'transactions_all_list' %}"
+                 hx-target="#transactions-list"
                  hx-vals='{"page": {{ page_obj.paginator.num_pages }}}'
                  hx-include="#filter, #order"
-                 hx-swap="show:top"
+                 hx-swap="outerHTML show:top"
+                 hx-indicator="#transactions-list"
                  aria-label="Última página">
                 <span aria-hidden="true">{{ page_obj.paginator.num_pages }}</span>
               </a>
@@ -116,8 +122,9 @@
                hx-get="{% if page_obj.has_next %}{% url 'transactions_all_list' %}{% endif %}"
                hx-vals='{"page": {{ page_obj.paginator.num_pages }}}'
                hx-include="#filter, #order"
-               hx-swap="show:top"
+               hx-swap="outerHTML show:top"
                hx-target="#transactions-list"
+               hx-indicator="#transactions-list"
                aria-label="Next">
               <span aria-hidden="true">&raquo;</span>
             </a>
@@ -126,7 +133,4 @@
       </nav>
     </div>
   {% endif %}
-  {#  Floating bar#}
-  <c-ui.transactions-action-bar></c-ui.transactions-action-bar>
-
 </div>

app/templates/transactions/fragments/summary.html

@@ -1,47 +1,30 @@
 {% load tools %}
 {% load i18n %}
 {% load currency_display %}
-<ul class="nav nav-tabs" id="all-trasactions-tab" role="tablist">
-  <li class="nav-item" role="presentation">
-    <button class="nav-link active" id="currency-tab" data-bs-toggle="tab" data-bs-target="#currency-tab-pane"
-            type="button" role="tab" aria-controls="currency-tab-pane"
-            aria-selected="true">{% trans 'Currencies' %}</button>
-  </li>
-  <li class="nav-item" role="presentation">
-    <button class="nav-link" id="account-tab" data-bs-toggle="tab" data-bs-target="#account-tab-pane" type="button"
-            role="tab" aria-controls="account-tab-pane" aria-selected="false">{% trans 'Accounts' %}</button>
-  </li>
-</ul>
-<div class="tab-content" id="all-transactions-content">
-  <div class="tab-pane fade show active" id="currency-tab-pane" role="tabpanel" aria-labelledby="currency-tab"
-       tabindex="0">
-    <div class="row row-cols-1 g-4 mt-2">
-      {% for currency_id, currency in currency_data.items %}
-        <div class="col">
-          <c-ui.currency_card :currency="currency" :currency_id="currency_id"
-                             :percentages="currency_percentages"></c-ui.currency_card>
-        </div>
-      {% empty %}
-        <div class="col">
-        <c-msg.empty
-            title="{% translate "No information to display" %}"></c-msg.empty>
-      {% endfor %}
-      </div>
+<div class="grid grid-cols-1 gap-4 mt-1 mb-3">
+  {% for currency_id, currency in currency_data.items %}
+    <div>
+      <c-ui.currency_card :currency="currency" :currency_id="currency_id"
+                          :percentages="currency_percentages"></c-ui.currency_card>
     </div>
-  </div>
-  <div class="tab-pane fade" id="account-tab-pane" role="tabpanel" aria-labelledby="account-tab" tabindex="0">
-    <div class="row row-cols-1 g-4 mt-2">
-      {% for account_id, account in account_data.items %}
-        <div class="col">
-          <c-ui.account_card :account="account" :account_id="account_id"
-                             :percentages="account_percentages"></c-ui.account_card>
-        </div>
-      {% empty %}
-        <div class="col">
-        <c-msg.empty
-            title="{% translate "No information to display" %}"></c-msg.empty>
-      {% endfor %}
-      </div>
+  {% empty %}
+    <div>
+      <c-msg.empty
+          title="{% translate "No information to display" %}"></c-msg.empty>
     </div>
+  {% endfor %}
+</div>
+
+<div class="grid grid-cols-1 gap-4 mt-1 mb-3">
+  {% for account_id, account in account_data.items %}
+    <div>
+      <c-ui.account_card :account="account" :account_id="account_id"
+                         :percentages="account_percentages"></c-ui.account_card>
+    </div>
+  {% empty %}
+    <div>
+    <c-msg.empty
+        title="{% translate "No information to display" %}"></c-msg.empty>
+  {% endfor %}
   </div>
 </div>