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>
</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,11 +252,7 @@ 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>
<div class="flex items-center gap-2 text-sm text-muted-foreground">
<span>{{
(() => { (() => {
try { try {
if (tx.timestamp instanceof Date && !isNaN(tx.timestamp.getTime())) { if (tx.timestamp instanceof Date && !isNaN(tx.timestamp.getTime())) {
@ -275,23 +271,28 @@ onMounted(() => {
} }
})() })()
}}</span> }}</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"> <Badge v-if="tx.tag" variant="outline" class="text-xs">
{{ tx.tag }} {{ tx.tag }}
</Badge> </Badge>
</div> <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>