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);
+ })
+}