From cf7d4b140458aa09e36019540893a2232962a215 Mon Sep 17 00:00:00 2001
From: Herculino Trotta <hello@herculino.com>
Date: Sat, 13 Dec 2025 20:47:51 -0300
Subject: [PATCH] feat: improve  transactions action bar animation

---
 .../ui/deleted_transactions_action_bar.html   |  6 ++---
 .../cotton/ui/transactions_action_bar.html    |  6 ++---
 frontend/src/styles/_animations.scss          | 26 +++++++++++++++++++
 frontend/src/styles/_offcanvas.scss           |  2 +-
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/app/templates/cotton/ui/deleted_transactions_action_bar.html b/app/templates/cotton/ui/deleted_transactions_action_bar.html
index efaa839..dc841c0 100644
--- a/app/templates/cotton/ui/deleted_transactions_action_bar.html
+++ b/app/templates/cotton/ui/deleted_transactions_action_bar.html
@@ -3,9 +3,9 @@
         if #actions-bar then
             if no <input[type='checkbox']:checked/> in #transactions-list
               if #actions-bar
-                add .slide-in-bottom-reverse then settle
+                add .slide-in-bottom-short-reverse then settle
                 then add .hidden to #actions-bar
-                then remove .slide-in-bottom-reverse
+                then remove .slide-in-bottom-short-reverse
               end
             else
               if #actions-bar
@@ -16,7 +16,7 @@
             end
           end
         end">
-  <div class="card bg-base-300 shadow slide-in-bottom max-w-[90vw] card-border">
+  <div class="card bg-base-300 shadow slide-in-bottom-short max-w-[90vw] card-border mt-5">
     <div class="card-body flex-row p-2 flex justify-between items-center gap-3 overflow-x-auto">
       {% spaceless %}
       <div class="font-bold text-md ms-2" id="selected-count">0</div>
diff --git a/app/templates/cotton/ui/transactions_action_bar.html b/app/templates/cotton/ui/transactions_action_bar.html
index 9384eff..0dd7159 100644
--- a/app/templates/cotton/ui/transactions_action_bar.html
+++ b/app/templates/cotton/ui/transactions_action_bar.html
@@ -3,9 +3,9 @@
         if #actions-bar then
             if no <input[type='checkbox']:checked/> in #transactions-list
               if #actions-bar
-                add .slide-in-bottom-reverse then settle
+                add .slide-in-bottom-short-reverse then settle
                 then add .hidden to #actions-bar
-                then remove .slide-in-bottom-reverse
+                then remove .slide-in-bottom-short-reverse
               end
             else
               if #actions-bar
@@ -16,7 +16,7 @@
             end
           end
         end">
-  <div class="card bg-base-300 shadow slide-in-bottom max-w-[90vw] card-border">
+  <div class="card bg-base-300 shadow slide-in-bottom-short max-w-[90vw] card-border mt-5">
     <div class="card-body flex-row p-2 flex justify-between items-center gap-3 overflow-x-auto">
       {% spaceless %}
       <div class="font-bold text-md ms-2" id="selected-count">0</div>
diff --git a/frontend/src/styles/_animations.scss b/frontend/src/styles/_animations.scss
index 3236d65..a84ad53 100644
--- a/frontend/src/styles/_animations.scss
+++ b/frontend/src/styles/_animations.scss
@@ -248,6 +248,32 @@
   }
 }
 
+/**
+ * ----------------------------------------
+ * animation slide-in-bottom-short
+ * A variant with smaller translateY for elements at bottom of viewport
+ * ----------------------------------------
+ */
+@keyframes slide-in-bottom-short {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.slide-in-bottom-short {
+  animation: slide-in-bottom-short 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+.slide-in-bottom-short-reverse {
+  animation: slide-in-bottom-short 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
+}
+
 @keyframes disable-pointer-events {
 
   0%,
diff --git a/frontend/src/styles/_offcanvas.scss b/frontend/src/styles/_offcanvas.scss
index 0971ab1..83f40bb 100644
--- a/frontend/src/styles/_offcanvas.scss
+++ b/frontend/src/styles/_offcanvas.scss
@@ -323,4 +323,4 @@ $breakpoints: (
 
 .offcanvas-size-sm {
     --offcanvas-width: min(95vw, 250px);
-}
+}
\ No newline at end of file