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