diff --git a/app/assets/styles/header.css b/app/assets/styles/header.css index 4a13397..ac98542 100755 --- a/app/assets/styles/header.css +++ b/app/assets/styles/header.css @@ -8,7 +8,7 @@ color: var(--color-darkest); position: sticky; top: 0; - z-index: 1; + z-index: 100; & strong { font-size: 2em; diff --git a/app/assets/styles/priceCard.css b/app/assets/styles/priceCard.css index 1d51c4e..3d2b0e8 100755 --- a/app/assets/styles/priceCard.css +++ b/app/assets/styles/priceCard.css @@ -49,6 +49,10 @@ padding: 1rem; border-radius: var(--radius-default); + &.animated { + transition: var(--transition-default); + } + & > header { display: flex; justify-content: space-between; diff --git a/app/components/Pp/PriceCard.vue b/app/components/Pp/PriceCard.vue index 884b221..2c4e217 100755 --- a/app/components/Pp/PriceCard.vue +++ b/app/components/Pp/PriceCard.vue @@ -11,7 +11,8 @@
@@ -68,14 +69,13 @@ const emit = defineEmits(['remove', 'update']) const top = useTemplateRef('top') const left = shallowRef('0') -const transition = shallowRef('none') const intl = Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', }) -const { lengthX } = useSwipe(top, { +const { lengthX, isSwiping } = useSwipe(top, { passive: false, threshold: 5, onSwipe() { @@ -86,14 +86,7 @@ const { lengthX } = useSwipe(top, { onSwipeEnd() { if (lengthX.value < -50) update() if (lengthX.value > 50) deleteCard() - transition.value = '150ms' - - setTimeout(() => { - left.value = '0' - setTimeout(() => { - transition.value = 'none' - }, 50) - }, 100) + left.value = '0' }, })