add: new design (wip)

New design as WIP, swipe controls

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;

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;

app/components/Pp/PriceCard.vue

@@ -11,7 +11,8 @@
     <div
       ref="top"
       class="top flex-col"
-      :style="{ left, transition }"
+      :class="{ 'animated' : !isSwiping }"
+      :style="{ left }"
     >
       <header>
         <div class="name-price">
@@ -68,14 +69,13 @@ const emit = defineEmits(['remove', 'update'])
 
 const top = useTemplateRef('top')
 const left = shallowRef<string>('0')
-const transition = shallowRef<string>('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'
   },
 })