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

add: new design (wip)

Browse source 
New design as WIP, swipe controls
This commit is contained in:
Fiona Lena Urban 2025-05-10 11:07:06 +02:00
parent 259adf53f6
commit 7af148058e
15 changed files with 354 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/components/Pp/ButtonGroup.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="ButtonGroup">
<div class="ButtonGroup z-2">
<button
v-for="(button, index) in buttons"
@click="click(index)"

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

@ -1,47 +1,57 @@
<template>
<article
ref="root"
class="PriceCard card bg-blue flex-col"
:class="{ deleting }"
>
<header>
<div class="name-price">
<span>{{ card.name || 'Kein Name' }}</span>
<span>{{ intl.format(+replaceComma(card.price))}}</span>
<article class="PriceCard card">
<div class="bottom">
<div class="bg-edit">
<Icon class="icon" name="uil:pen" mode="svg" />
</div>
<div class="flex-row gap-default">
<PpButton class="icon-button" @click="update()">
<Icon class="icon" name="uil:pen" mode="svg" />
</PpButton>
<PpButton class="icon-button" @click="deleteCard()">
<Icon class="icon" name="uil:times" mode="svg" />
</PpButton>
<div class="bg-delete">
<Icon class="icon" name="uil:trash-alt" mode="svg" />
</div>
</header>
</div>
<div
ref="top"
class="top flex-col"
:style="{ left, transition }"
>
<header>
<div class="name-price">
<span>{{ card.name || 'Kein Name' }}</span>
<span>{{ intl.format(+replaceComma(card.price))}}</span>
</div>
<div v-if="$device.isDesktop" class="flex-row gap-default">
<PpButton class="icon-button" @click="update()">
<Icon class="icon" name="uil:pen" mode="svg" />
</PpButton>
<PpButton class="icon-button" @click="deleteCard()">
<Icon class="icon" name="uil:trash-alt" mode="svg" />
</PpButton>
</div>
</header>
<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>
<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 {{ card.roles ? `(${card.roles})` : '' }}</span>
</div>
<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 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 100 {{ card.sheets ? `(${card.sheets})` : '' }}</span>
</div>
<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 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 {{ card.layers ? `(${card.layers})` : '' }}</span>
</div>
<span class="pro">Pro 100 {{ card.layers ? `(${card.layers})` : '' }}</span>
</div>
</main>
</main>
</div>
</article>
</template>
@ -56,14 +66,37 @@ type Props = {
const { card } = defineProps<Props>()
const emit = defineEmits(['remove', 'update'])
const root = ref<HTMLElement>()
const deleting = ref<boolean>(false)
const top = useTemplateRef('top')
const left = shallowRef<string>('0')
const transition = shallowRef<string>('none')
const intl = Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR',
})
const { lengthX } = useSwipe(top, {
passive: false,
threshold: 5,
onSwipe() {
if (lengthX.value != 0) {
left.value = `${-clamp(lengthX.value, -100, 100)}px`
}
},
onSwipeEnd() {
if (lengthX.value < -50) update()
if (lengthX.value > 50) deleteCard()
transition.value = '150ms'
setTimeout(() => {
left.value = '0'
setTimeout(() => {
transition.value = 'none'
}, 50)
}, 100)
},
})
const update = () => emit('update')
const deleteCard = () => emit('remove')