starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-07-12 07:42:53 +02:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

feat: improve transactions action bar animation

Browse Source
This commit is contained in:
Herculino Trotta
2025-12-13 20:47:51 -03:00
parent 606e6b3843
commit cf7d4b1404
4 changed files with 33 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/cotton/ui/deleted_transactions_action_bar.html
+3 -3
View File
@@ -3,9 +3,9 @@
if #actions-bar then if #actions-bar then
if no <input[type='checkbox']:checked/> in #transactions-list if no <input[type='checkbox']:checked/> in #transactions-list
if #actions-bar 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 add .hidden to #actions-bar
then remove .slide-in-bottom-reverse then remove .slide-in-bottom-short-reverse
end end
else else
if #actions-bar if #actions-bar
@@ -16,7 +16,7 @@
end end
end 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"> <div class="card-body flex-row p-2 flex justify-between items-center gap-3 overflow-x-auto">
{% spaceless %} {% spaceless %}
<div class="font-bold text-md ms-2" id="selected-count">0</div> <div class="font-bold text-md ms-2" id="selected-count">0</div>
app/templates/cotton/ui/transactions_action_bar.html
+3 -3
View File
@@ -3,9 +3,9 @@
if #actions-bar then if #actions-bar then
if no <input[type='checkbox']:checked/> in #transactions-list if no <input[type='checkbox']:checked/> in #transactions-list
if #actions-bar 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 add .hidden to #actions-bar
then remove .slide-in-bottom-reverse then remove .slide-in-bottom-short-reverse
end end
else else
if #actions-bar if #actions-bar
@@ -16,7 +16,7 @@
end end
end 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"> <div class="card-body flex-row p-2 flex justify-between items-center gap-3 overflow-x-auto">
{% spaceless %} {% spaceless %}
<div class="font-bold text-md ms-2" id="selected-count">0</div> <div class="font-bold text-md ms-2" id="selected-count">0</div>
frontend/src/styles/_animations.scss
+26
View File
@@ -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 { @keyframes disable-pointer-events {
0%, 0%,
frontend/src/styles/_offcanvas.scss
+1 -1
View File
@@ -323,4 +323,4 @@ $breakpoints: (
.offcanvas-size-sm { .offcanvas-size-sm {
--offcanvas-width: min(95vw, 250px); --offcanvas-width: min(95vw, 250px);
} }