mirror/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2025-12-16 18:26:10 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #440 from eitchtee/dev

Browse Source 
feat: improve  transactions action bar animation
This commit is contained in:
Herculino Trotta
2025-12-13 20:48:25 -03:00
committed by GitHub
parent e9c3af1a85 cf7d4b1404
commit 2dc398f82b
4 changed files with 33 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/templates/cotton/ui/deleted_transactions_action_bar.html
View File

@@ -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>

6
app/templates/cotton/ui/transactions_action_bar.html
View File

@@ -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>

26
frontend/src/styles/_animations.scss
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 {
0%,

2
frontend/src/styles/_offcanvas.scss
View File

@@ -323,4 +323,4 @@ $breakpoints: (
.offcanvas-size-sm {
--offcanvas-width: min(95vw, 250px);
}
}