From 11bcdce6cbd0f3648432256cacf43cc71dd5177c Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Sat, 10 May 2025 13:32:28 +0200
Subject: [PATCH] add: new list layout design

New design, custom uuid, better handling of swipe
---
 app/assets/styles/buttonGroup.css | 10 ----------
 app/assets/styles/general.css     | 10 ----------
 app/assets/styles/priceCard.css   |  6 +-----
 app/components/Pp/PriceCard.vue   | 13 +++++++------
 app/pages/index.vue               |  7 +++----
 app/utils/number.ts               |  4 +++-
 app/utils/uuid.ts                 |  7 +++++++
 7 files changed, 21 insertions(+), 36 deletions(-)
 create mode 100644 app/utils/uuid.ts

diff --git a/app/assets/styles/buttonGroup.css b/app/assets/styles/buttonGroup.css
index 91eb4bc..f36e007 100644
--- a/app/assets/styles/buttonGroup.css
+++ b/app/assets/styles/buttonGroup.css
@@ -1,8 +1,6 @@
 .ButtonGroup {
     display: flex;
     background: var(--color-main);
-    border-radius: var(--radius-default);
-    overflow: hidden;
     box-shadow: var(--box-shadow-z2);
 
     & button {
@@ -24,13 +22,5 @@
             --color: var(--color-lightest);
             --background: var(--color-main-dark);
         }
-
-        &:first-child {
-            border-radius: var(--radius-default) 0 0 var(--radius-default);
-        }
-
-        &:last-child {
-            border-radius: 0 var(--radius-default) var(--radius-default) 0;
-        }
     }
 }
\ No newline at end of file
diff --git a/app/assets/styles/general.css b/app/assets/styles/general.css
index 50e8dc6..5b917b1 100755
--- a/app/assets/styles/general.css
+++ b/app/assets/styles/general.css
@@ -104,19 +104,9 @@ body {
 }
 
 .content {
-    padding: 1rem;
     min-height: 100dvh;
 }
 
-.filter-bar {
-    margin-bottom: 1rem;
-}
-
-.pc-wrapper {
-    gap: 1rem;
-    margin-bottom: 1rem;
-}
-
 .flex-col {
     display: flex;
     flex-direction: column;
diff --git a/app/assets/styles/priceCard.css b/app/assets/styles/priceCard.css
index b8702ea..efaa638 100755
--- a/app/assets/styles/priceCard.css
+++ b/app/assets/styles/priceCard.css
@@ -1,11 +1,8 @@
 .PriceCard {
     position: relative;
-    overflow: hidden;
     width: 100%;
-    transition: 150ms;
-    opacity: 1;
     color: var(--color-darkest);
-    background: black;
+    border-bottom: 1px solid var(--color-light);
 
     .bottom {
         position: absolute;
@@ -47,7 +44,6 @@
         z-index: 2;
         gap: 1rem;
         padding: 1rem;
-        border-radius: var(--radius-default);
 
         &.animated {
             transition: var(--transition-default);
diff --git a/app/components/Pp/PriceCard.vue b/app/components/Pp/PriceCard.vue
index c4236e6..f1400ba 100755
--- a/app/components/Pp/PriceCard.vue
+++ b/app/components/Pp/PriceCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <article class="PriceCard card">
+  <article class="PriceCard">
     <div class="bottom">
       <div class="bg-edit">
         <Icon class="icon" name="uil:pen" mode="svg" />
@@ -75,15 +75,16 @@ const intl = Intl.NumberFormat('de-DE', {
   currency: 'EUR',
 })
 
-const { lengthX, isSwiping } = useSwipe(top, {
-  passive: false,
+const { lengthX, direction, isSwiping } = useSwipe(top, {
+  passive: true,
   threshold: 30,
   onSwipe() {
-    if (lengthX.value > 50 || lengthX.value < -50) {
-      left.value = `${-clamp(lengthX.value, -100, 100)}px`
-    }
+    console.log(direction.value)
+    if (['down', 'up'].includes(direction.value)) return
+    left.value = `${-clamp(lengthX.value, -100, 100)}px`
   },
   onSwipeEnd() {
+    if (['down', 'up'].includes(direction.value)) return
     if (lengthX.value < -50) update()
     if (lengthX.value > 50) deleteCard()
     left.value = '0'
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 5e39a87..7572b4d 100755
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -17,7 +17,7 @@
         @click="sort"
       />
     </aside>
-    <div class="pc-wrapper flex-col" role="list">
+    <div class="flex-col" role="list">
       <PpPriceCard
         v-for="(card, index) in cards"
         :key="card.uuid"
@@ -70,7 +70,7 @@ const createCard = (uuid : string) : Card => ({
 })
 
 const cards = useState<Card[]>('cards', () => [
-  createCard(crypto.randomUUID()),
+  createCard(randomUUID()),
 ])
 
 const addCard = (card : Card) => {
@@ -102,8 +102,7 @@ const updateCard = () => {
 const openModal = (createNew : boolean, index : number) => {
   if (createNew) {
     currentCardIndex.value = -1
-    currentCard.value = createCard(crypto.randomUUID())
-
+    currentCard.value = createCard(randomUUID())
     modal.value?.$el.showModal()
     return
   }
diff --git a/app/utils/number.ts b/app/utils/number.ts
index fb31fe2..07fba9c 100644
--- a/app/utils/number.ts
+++ b/app/utils/number.ts
@@ -1,3 +1,5 @@
 export const replaceComma = (value: string | number) => `${value}`.replace(',', '.')
 
-export const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)
\ No newline at end of file
+export const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)
+
+export const between = (value: number, min: number, max: number) => value >= min && value <= max
\ No newline at end of file
diff --git a/app/utils/uuid.ts b/app/utils/uuid.ts
new file mode 100644
index 0000000..7d0849d
--- /dev/null
+++ b/app/utils/uuid.ts
@@ -0,0 +1,7 @@
+export const randomUUID = (): string => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  })
+}
-- 
2.34.1