engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

Add green flash animation on queue-add button click

Browse source 
Visual feedback when adding items to the queue: the "+" button
pops to 1.3x scale with a green background, then eases back.
Reflow trick allows re-triggering on repeated clicks.
This commit is contained in:
russell@unturf.com 2026-02-12 12:48:38 -05:00
parent fd39b2ae80
commit 11056cf208
2 changed files with 11 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

8
make_post_sell/static/css/common.css
View file

@ -3154,6 +3154,14 @@ textarea {
color: var(--text-primary, #333);
}
@keyframes queue-added-flash {
0% { background: var(--green-color, #a3c765); color: #fff; transform: scale(1.3); }
100% { background: transparent; color: inherit; transform: scale(1); }
}
.queue-add-btn.queue-added {
animation: queue-added-flash 0.5s ease-out;
}
/* Footer */
.mps-footer {
background-color: var(--bg-secondary, #f8f9fa);

3
make_post_sell/static/js/watch.js
View file

@ -1564,6 +1564,9 @@
media_type: queueBtn.getAttribute('data-media-type'),
thumbnail_url: queueBtn.getAttribute('data-thumbnail')
});
queueBtn.classList.remove('queue-added');
void queueBtn.offsetWidth; // reflow to restart animation
queueBtn.classList.add('queue-added');
return;
}