From 3200c29c2f7c33ef28a2b5a11e247f7c9f6a0441 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Sat, 10 May 2025 11:13:25 +0200
Subject: [PATCH] add: new design (wip)

New design as WIP, swipe controls
---
 app/assets/styles/header.css    |  2 +-
 app/assets/styles/priceCard.css |  4 ++++
 app/components/Pp/PriceCard.vue | 15 ++++-----------
 3 files changed, 9 insertions(+), 12 deletions(-)

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 @@
     <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'
   },
 })