padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: Improve ticket ID display in PurchaseTicketDialog and MyTickets

Browse source 
- Update PurchaseTicketDialog.vue and MyTickets.vue to enhance the presentation of ticket IDs.
- Wrap ticket ID text in a styled container for better visibility and formatting.
- Ensure consistent styling across components for a unified user experience.
This commit is contained in:
padreug 2025-08-01 21:56:17 +02:00
parent de8db6a12b
commit 72e51ea10c
2 changed files with 17 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/events/PurchaseTicketDialog.vue
View file

@ -229,9 +229,11 @@ onUnmounted(() => {
<div class="bg-muted/50 rounded-lg p-4"> <div class="bg-muted/50 rounded-lg p-4">
<div class="flex flex-col items-center space-y-3"> <div class="flex flex-col items-center space-y-3">
<img :src="ticketQRCode" alt="Ticket QR code" class="w-48 h-48 border rounded-lg" /> <img :src="ticketQRCode" alt="Ticket QR code" class="w-48 h-48 border rounded-lg" />
<div class="text-center"> <div class="text-center w-full">
<p class="text-xs text-muted-foreground">Ticket ID</p> <p class="text-xs text-muted-foreground mb-1">Ticket ID</p>
<p class="text-xs font-mono">{{ purchasedTicketId }}</p> <div class="bg-background border rounded px-2 py-1 max-w-full">
<p class="text-xs font-mono break-all">{{ purchasedTicketId }}</p>
</div>
</div> </div>
</div> </div>
</div> </div>

16
src/pages/MyTickets.vue
View file

@ -190,7 +190,9 @@ onMounted(async () => {
</div> </div>
<div class="text-center"> <div class="text-center">
<p class="text-xs text-muted-foreground">Ticket ID</p> <p class="text-xs text-muted-foreground">Ticket ID</p>
<p class="text-xs font-mono">{{ ticket.id }}</p> <div class="bg-background border rounded px-2 py-1 max-w-full mt-1">
<p class="text-xs font-mono break-all">{{ ticket.id }}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -262,7 +264,9 @@ onMounted(async () => {
</div> </div>
<div class="text-center"> <div class="text-center">
<p class="text-xs text-muted-foreground">Ticket ID</p> <p class="text-xs text-muted-foreground">Ticket ID</p>
<p class="text-xs font-mono">{{ ticket.id }}</p> <div class="bg-background border rounded px-2 py-1 max-w-full mt-1">
<p class="text-xs font-mono break-all">{{ ticket.id }}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -330,7 +334,9 @@ onMounted(async () => {
</div> </div>
<div class="text-center"> <div class="text-center">
<p class="text-xs text-muted-foreground">Ticket ID</p> <p class="text-xs text-muted-foreground">Ticket ID</p>
<p class="text-xs font-mono">{{ ticket.id }}</p> <div class="bg-background border rounded px-2 py-1 max-w-full mt-1">
<p class="text-xs font-mono break-all">{{ ticket.id }}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -402,7 +408,9 @@ onMounted(async () => {
</div> </div>
<div class="text-center"> <div class="text-center">
<p class="text-xs text-muted-foreground">Ticket ID</p> <p class="text-xs text-muted-foreground">Ticket ID</p>
<p class="text-xs font-mono">{{ ticket.id }}</p> <div class="bg-background border rounded px-2 py-1 max-w-full mt-1">
<p class="text-xs font-mono break-all">{{ ticket.id }}</p>
</div>
</div> </div>
</div> </div>
</div> </div>