feat: add delay before showing dialogs and enhance item card styles for better user feedback
Some checks failed
Chore App Build, Test, and Push Docker Images / build-and-push (push) Failing after 1m11s

This commit is contained in:
2026-02-27 14:05:09 -05:00
parent f12940dc11
commit 65e987ceb6
3 changed files with 34 additions and 8 deletions

View File

@@ -213,12 +213,16 @@ const triggerReward = (reward: RewardStatus) => {
if (reward.redeeming) { if (reward.redeeming) {
dialogReward.value = reward dialogReward.value = reward
setTimeout(() => {
showCancelDialog.value = true showCancelDialog.value = true
}, 150)
return return
} }
if (reward.points_needed <= 0) { if (reward.points_needed <= 0) {
dialogReward.value = reward dialogReward.value = reward
setTimeout(() => {
showRewardDialog.value = true showRewardDialog.value = true
}, 150)
} }
} }

View File

@@ -563,7 +563,9 @@ const triggerTask = (task: Task) => {
showPendingRewardDialog.value = true showPendingRewardDialog.value = true
return return
} }
setTimeout(() => {
showConfirm.value = true showConfirm.value = true
}, 150)
} }
async function cancelRewardById(rewardId: string) { async function cancelRewardById(rewardId: string) {
@@ -629,7 +631,9 @@ const triggerReward = (reward: RewardStatus) => {
return return
} }
selectedReward.value = reward selectedReward.value = reward
setTimeout(() => {
showRewardConfirm.value = true showRewardConfirm.value = true
}, 150)
} }
const confirmTriggerReward = async () => { const confirmTriggerReward = async () => {

View File

@@ -178,7 +178,11 @@ onBeforeUnmount(() => {
<div <div
v-for="item in items" v-for="item in items"
:key="item.id" :key="item.id"
:class="['item-card', props.getItemClass?.(item)]" :class="[
'item-card',
props.getItemClass?.(item),
{ 'item-ready': props.readyItemId === item.id },
]"
:ref="(el) => (itemRefs[item.id] = el)" :ref="(el) => (itemRefs[item.id] = el)"
@click.stop="handleClicked(item)" @click.stop="handleClicked(item)"
> >
@@ -279,12 +283,26 @@ onBeforeUnmount(() => {
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
user-select: none; /* Prevent image selection */ user-select: none; /* Prevent image selection */
-webkit-tap-highlight-color: transparent; /* Suppress native mobile tap flash */
} }
/* Only apply hover lift on true pointer (non-touch) devices */
@media (hover: hover) {
.item-card:hover { .item-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: var(--item-card-hover-shadow, 0 8px 20px rgba(0, 0, 0, 0.12)); box-shadow: var(--item-card-hover-shadow, 0 8px 20px rgba(0, 0, 0, 0.12));
} }
}
/* Brief press feedback on touch devices */
.item-card:active {
transform: scale(0.97);
transition: transform 0.08s ease;
}
.item-card.item-ready {
animation: ready-glow 0.25s ease forwards;
}
.edit-button { .edit-button {
position: absolute; position: absolute;