diff --git a/frontend/vue-app/src/components/child/ChildView.vue b/frontend/vue-app/src/components/child/ChildView.vue index c58c12b..0da971f 100644 --- a/frontend/vue-app/src/components/child/ChildView.vue +++ b/frontend/vue-app/src/components/child/ChildView.vue @@ -213,12 +213,16 @@ const triggerReward = (reward: RewardStatus) => { if (reward.redeeming) { dialogReward.value = reward - showCancelDialog.value = true + setTimeout(() => { + showCancelDialog.value = true + }, 150) return } if (reward.points_needed <= 0) { dialogReward.value = reward - showRewardDialog.value = true + setTimeout(() => { + showRewardDialog.value = true + }, 150) } } diff --git a/frontend/vue-app/src/components/child/ParentView.vue b/frontend/vue-app/src/components/child/ParentView.vue index eb0638c..cfa29d5 100644 --- a/frontend/vue-app/src/components/child/ParentView.vue +++ b/frontend/vue-app/src/components/child/ParentView.vue @@ -563,7 +563,9 @@ const triggerTask = (task: Task) => { showPendingRewardDialog.value = true return } - showConfirm.value = true + setTimeout(() => { + showConfirm.value = true + }, 150) } async function cancelRewardById(rewardId: string) { @@ -629,7 +631,9 @@ const triggerReward = (reward: RewardStatus) => { return } selectedReward.value = reward - showRewardConfirm.value = true + setTimeout(() => { + showRewardConfirm.value = true + }, 150) } const confirmTriggerReward = async () => { diff --git a/frontend/vue-app/src/components/shared/ScrollingList.vue b/frontend/vue-app/src/components/shared/ScrollingList.vue index 687cbb6..baa3a78 100644 --- a/frontend/vue-app/src/components/shared/ScrollingList.vue +++ b/frontend/vue-app/src/components/shared/ScrollingList.vue @@ -178,7 +178,11 @@ onBeforeUnmount(() => {
@@ -279,11 +283,25 @@ onBeforeUnmount(() => { align-items: center; cursor: pointer; user-select: none; /* Prevent image selection */ + -webkit-tap-highlight-color: transparent; /* Suppress native mobile tap flash */ } -.item-card:hover { - transform: translateY(-4px); - box-shadow: var(--item-card-hover-shadow, 0 8px 20px rgba(0, 0, 0, 0.12)); +/* Only apply hover lift on true pointer (non-touch) devices */ +@media (hover: hover) { + .item-card:hover { + transform: translateY(-4px); + 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 {