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

Refactor WalletPage layout for improved transaction display and responsiveness

Browse source 
- Enhanced the desktop layout for better space management and alignment of transaction items.
- Updated transaction description and timestamp handling for improved readability and flexibility.
- Adjusted styling for transaction amounts to ensure consistent visibility and formatting.

These changes contribute to a more organized and user-friendly interface in the WalletPage, enhancing the overall user experience.
This commit is contained in:
padreug 2025-09-15 00:11:48 +02:00
parent 3d428719be
commit bff5a7cb37
1 changed files with 37 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/modules/wallet/views/WalletPage.vue
View file

@ -240,9 +240,9 @@ onMounted(() => {
</div> </div>
</div> </div>
<!-- Desktop Layout: Original horizontal layout --> <!-- Desktop Layout: Better space management -->
<div class="hidden sm:flex items-center justify-between"> <div class="hidden sm:flex items-start gap-4">
<div class="flex items-center gap-4"> <div class="flex items-center gap-3 flex-shrink-0">
<div <div
class="p-2 rounded-full bg-background border" class="p-2 rounded-full bg-background border"
:class="getTransactionColor(tx.type, tx.status)" :class="getTransactionColor(tx.type, tx.status)"
@ -252,46 +252,47 @@ onMounted(() => {
class="h-4 w-4" class="h-4 w-4"
/> />
</div> </div>
<span class="text-sm text-muted-foreground">{{
<div class="min-w-0 flex-1"> (() => {
<p class="font-medium truncate">{{ tx.description }}</p> try {
<div class="flex items-center gap-2 text-sm text-muted-foreground"> if (tx.timestamp instanceof Date && !isNaN(tx.timestamp.getTime())) {
<span>{{ return format(tx.timestamp, 'HH:mm')
(() => { } else if (tx.timestamp) {
try { // Try to parse as string or number
if (tx.timestamp instanceof Date && !isNaN(tx.timestamp.getTime())) { const date = new Date(tx.timestamp)
return format(tx.timestamp, 'HH:mm') if (!isNaN(date.getTime())) {
} else if (tx.timestamp) { return format(date, 'HH:mm')
// Try to parse as string or number
const date = new Date(tx.timestamp)
if (!isNaN(date.getTime())) {
return format(date, 'HH:mm')
}
}
return '--:--'
} catch (error) {
console.warn('Failed to format timestamp:', tx.timestamp, error)
return '--:--'
} }
})() }
}}</span> return '--:--'
<Badge v-if="tx.tag" variant="outline" class="text-xs"> } catch (error) {
{{ tx.tag }} console.warn('Failed to format timestamp:', tx.timestamp, error)
</Badge> return '--:--'
</div> }
})()
}}</span>
</div>
<!-- Description with flexible width -->
<div class="min-w-0 flex-1">
<p class="font-medium break-words leading-tight pr-2">{{ tx.description }}</p>
<div class="flex items-center gap-2 text-xs text-muted-foreground mt-1">
<Badge v-if="tx.tag" variant="outline" class="text-xs">
{{ tx.tag }}
</Badge>
<span v-if="tx.fee" class="text-xs text-muted-foreground">
Fee: {{ tx.fee }} sats
</span>
</div> </div>
</div> </div>
<div class="text-right ml-4"> <!-- Amount - fixed width, always visible -->
<div class="text-right flex-shrink-0 min-w-[100px]">
<p <p
class="font-semibold" class="font-semibold whitespace-nowrap"
:class="getTransactionColor(tx.type, tx.status)" :class="getTransactionColor(tx.type, tx.status)"
> >
{{ tx.type === 'received' ? '+' : '-' }} {{ tx.type === 'received' ? '+' : '-' }}{{ tx.amount.toLocaleString() }} sats
{{ tx.amount.toLocaleString() }} sats
</p>
<p v-if="tx.fee" class="text-xs text-muted-foreground">
Fee: {{ tx.fee }} sats
</p> </p>
</div> </div>
</div> </div>