add: inputmode for better UI

Reviewed-on: #1

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

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;

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

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'

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
   }

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)
+
+export const between = (value: number, min: number, max: number) => value >= min && value <= max

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