fix: design adjustments

Smaller name, ellipsis for long name, indicator for number of roles/sheets/layers

app/assets/styles/general.css

@@ -1,5 +1,6 @@
 :root {
     --padding-default: 1rem;
+    --padding-small: .5rem;
     --radius-default: 5px;
     --transition-default: 150ms;
 
@@ -143,6 +144,11 @@ body {
     padding: var(--padding-default);
 }
 
+.padding-small {
+    gap: 1rem;
+    padding: var(--padding-small);
+}
+
 dialog {
     top: 50%;
     left: 50%;

app/assets/styles/priceCard.css

@@ -1,10 +1,10 @@
 .PriceCard {
     width: 100%;
-    display: grid;
     transition: 150ms;
-    grid-template-rows: auto 1fr auto;
-    max-height: 400px;
     opacity: 1;
+    color: var(--color-white);
+    gap: 1rem;
+    padding: 1rem;
 
     &.deleting {
         max-height: 0;
@@ -12,30 +12,32 @@
     }
 
     & > header {
-        color: var(--color-white);
         display: flex;
         justify-content: space-between;
         align-items: center;
-        font-size: 1.5rem;
 
         & .icon {
-            font-size: 1.2rem;
+            font-size: 1rem;
             cursor: pointer;
         }
+    }
 
-        & > .name-price {
-            display: flex;
-            gap: .5rem;
+    & .name-price {
+        display: flex;
+        gap: .5rem;
 
-            & > span:nth-child(2)::before {
-                content: '•';
-                margin-right: .5rem;
-                opacity: .5;
-            }
+        & > span:nth-child(1) {
+            font-weight: bold;
+            max-width: 150px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
-        & > .Button {
-            color: var(--color-white);
+        & > span:nth-child(2)::before {
+            content: '•';
+            margin-right: .5rem;
+            opacity: .5;
         }
     }
 
@@ -45,7 +47,6 @@
         width: 100%;
         gap: 1rem;
         justify-content: space-between;
-        padding-top: 0;
 
         & > * {
             flex-basis: 10%;
@@ -53,7 +54,6 @@
         }
 
         & > .info {
-            color: var(--color-white);
             align-items: center;
             gap: .25rem;
 

app/components/Pp/PriceCard.vue

@@ -1,10 +1,10 @@
 <template>
   <article
     ref="root"
-    class="PriceCard card bg-blue"
+    class="PriceCard card bg-blue flex-col"
     :class="{ deleting }"
   >
-    <header class="padding">
+    <header>
       <div class="name-price">
         <span>{{ card.name || 'Kein Name' }}</span>
         <span>{{ intl.format(+replaceComma(card.price))}}</span>
@@ -18,27 +18,28 @@
         </PpButton>
       </div>
     </header>
-    <main class="wrapper padding">
+
+    <main class="wrapper">
       <div class="info flex-col">
         <div class="price">
           <Icon class="icon" name="uil:toilet-paper" mode="svg" />
           <span class="value">{{ intl.format(card.ppr) }}</span>
         </div>
-        <span class="pro">Pro 1</span>
+        <span class="pro">Pro 1 {{ card.roles ? `(${card.roles})` : '' }}</span>
       </div>
       <div class="info flex-col">
         <div class="price">
           <Icon class="icon" name="uil:file-landscape" mode="svg" />
           <span class="value">{{ intl.format(card.pps) }}</span>
         </div>
-        <span class="pro">Pro 10</span>
+        <span class="pro">Pro 100 {{ card.sheets ? `(${card.sheets})` : '' }}</span>
       </div>
       <div class="info flex-col">
         <div class="price">
           <Icon class="icon" name="uil:layer-group" mode="svg" />
           <span class="value">{{ intl.format(card.ppl) }}</span>
         </div>
-        <span class="pro">Pro 100</span>
+        <span class="pro">Pro 100 {{ card.layers ? `(${card.layers})` : '' }}</span>
       </div>
     </main>
   </article>

app/pages/index.vue

@@ -69,7 +69,7 @@ const createCard = (uuid : string) : Card => ({
   ppl: 0,
 })
 
-const cards = useState('cards', () => [
+const cards = useState<Card[]>('cards', () => [
   createCard(crypto.randomUUID()),
 ])
 
@@ -120,7 +120,10 @@ const openDeleteModal = () => {
 }
 
 const updateLocalStorage = () => {
-  localStorage.setItem('cards', JSON.stringify(cards.value))
+  localStorage.setItem('cards', JSON.stringify(cards.value.map(card => {
+    const { uuid, name, price, roles, sheets, layers } = card
+    return { uuid, name, price, roles, sheets, layers }
+  })))
   localStorage.setItem('sort', JSON.stringify(currentSort.value))
 }
 
@@ -166,14 +169,14 @@ const sort = (index : number) => {
 
 const calculate = (card : Card) => {
   const ppr = +replaceComma(card.price) / +card.roles
-  const pps = (ppr / +card.sheets) * 10
-  const ppl = (pps / +card.layers) * 10
+  const pps = (ppr / +card.sheets) * 100
+  const ppl = (pps / +card.layers)
 
   return { ppr, pps, ppl }
 }
 
 onMounted(() => {
-  const cardsFromStorage = JSON.parse(localStorage.getItem('cards') ?? '[]')
+  const cardsFromStorage = JSON.parse(localStorage.getItem('cards') ?? '[]').map((card : Card) => ({ ...card, ...calculate(card) }))
   cards.value = cardsFromStorage.length !== 0 ? cardsFromStorage : cards.value
   const sortFromStorage = +JSON.parse(localStorage.getItem('sort') ?? '0')
   sort(sortFromStorage)

shared/Card.ts

@@ -1,11 +1,11 @@
 export type Card = {
+  ppr: number
+  pps: number
+  ppl: number
   uuid: string
   name: string
   price: string
   roles: string
   sheets: string
   layers: string
-  ppr: number
-  pps: number
-  ppl: number
 }