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

33
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,11 +252,7 @@ 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>{{
<span class="text-sm text-muted-foreground">{{
(() => {
try {
if (tx.timestamp instanceof Date && !isNaN(tx.timestamp.getTime())) {
@ -275,23 +271,28 @@ onMounted(() => {
}
})()
}}</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>
</div>
<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>