webfussel/propapier
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: design adjustments

Browse source 
Smaller name, ellipsis for long name, indicator for number of roles/sheets/layers
This commit is contained in:
Fiona Lena Urban 2025-05-09 20:09:12 +02:00
parent c5be0b6b04
commit 8ccedbed8a
5 changed files with 43 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

13
app/components/Pp/PriceCard.vue
View file

@ -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>