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

Refactor StallView component for enhanced layout and visual appeal

Browse source 
- Redesigned the Stall Info Card to improve responsiveness and aesthetics, incorporating a more compact layout and enhanced logo display.
- Updated the styling of stall statistics and category badges for better alignment with the design system, improving user interaction.
- Enhanced the overall structure and clarity of stall information, making it more visually engaging and user-friendly.

These changes provide a more cohesive and appealing interface in the StallView component, improving the overall user experience.
This commit is contained in:
padreug 2025-09-26 10:49:37 +02:00
parent 0a94c7b23d
commit 0e6a4a7451
1 changed files with 50 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

95
src/modules/market/views/StallView.vue
View file

@ -13,65 +13,70 @@
Back to Market
</Button>
<!-- Stall Info Card -->
<Card class="overflow-hidden">
<div class="relative h-24 sm:h-48 bg-gradient-to-r from-primary/80 to-accent">
<!-- Stall Banner/Logo -->
<div class="absolute inset-0 flex items-center justify-center">
<div v-if="stall?.logo" class="w-16 h-16 sm:w-32 sm:h-32 rounded-full bg-background p-1 sm:p-2 shadow-lg">
<img
:src="stall.logo"
:alt="stall.name"
class="w-full h-full object-contain rounded-full"
@error="handleLogoError"
/>
</div>
<div v-else class="w-16 h-16 sm:w-32 sm:h-32 rounded-full bg-background/95 flex items-center justify-center shadow-lg">
<Store class="w-8 h-8 sm:w-16 sm:h-16 text-muted-foreground" />
</div>
</div>
</div>
<CardContent class="pt-10 sm:pt-20 pb-4 sm:pb-6">
<div class="text-center">
<h1 class="text-lg sm:text-3xl font-bold mb-1 sm:mb-2 text-foreground">{{ stall?.name || 'Unknown Stall' }}</h1>
<p v-if="stall?.description" class="text-sm sm:text-base text-muted-foreground mb-3 sm:mb-4 max-w-2xl mx-auto px-2">
{{ stall.description }}
</p>
<!-- Stall Stats -->
<div class="flex justify-center gap-4 sm:gap-8 mt-3 sm:mt-6">
<div class="text-center">
<div class="text-lg sm:text-2xl font-bold text-primary">{{ productCount }}</div>
<div class="text-xs sm:text-sm text-muted-foreground">Products</div>
<!-- Compact Stall Info Card -->
<Card class="relative overflow-hidden border-l-4 border-l-primary/60 bg-gradient-to-r from-primary/5 via-background to-accent/5 shadow-md">
<div class="relative p-3 sm:p-4">
<div class="flex items-start gap-3">
<!-- Stall Logo (Enhanced) -->
<div class="flex-shrink-0">
<div v-if="stall?.logo" class="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-gradient-to-br from-primary/20 to-accent/20 border-2 border-primary/20 shadow-lg overflow-hidden ring-2 ring-primary/10">
<img
:src="stall.logo"
:alt="stall.name"
class="w-full h-full object-cover"
@error="handleLogoError"
/>
</div>
<div class="text-center">
<div class="text-lg sm:text-2xl font-bold text-foreground">{{ stall?.currency || 'sats' }}</div>
<div class="text-xs sm:text-sm text-muted-foreground">Currency</div>
</div>
<div v-if="stall?.shipping?.length" class="text-center">
<div class="text-lg sm:text-2xl font-bold text-foreground">{{ stall.shipping.length }}</div>
<div class="text-xs sm:text-sm text-muted-foreground">Shipping Zones</div>
<div v-else class="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-gradient-to-br from-primary/20 to-accent/20 flex items-center justify-center shadow-lg ring-2 ring-primary/10 border-2 border-primary/20">
<Store class="w-6 h-6 sm:w-7 sm:h-7 text-primary" />
</div>
</div>
<!-- Categories -->
<div v-if="stallCategories.length > 0" class="mt-3 sm:mt-6">
<div class="flex flex-wrap justify-center gap-1 sm:gap-2">
<!-- Stall Info -->
<div class="flex-1 min-w-0">
<!-- Title and Description -->
<div class="mb-2">
<h1 class="text-lg sm:text-xl font-bold bg-gradient-to-r from-foreground to-foreground/80 bg-clip-text text-transparent truncate">{{ stall?.name || 'Unknown Stall' }}</h1>
<p v-if="stall?.description" class="text-sm text-muted-foreground/90 line-clamp-2 mt-1">
{{ stall.description }}
</p>
</div>
<!-- Enhanced Stats Row -->
<div class="flex flex-wrap gap-2 mb-3">
<Badge class="text-xs font-medium bg-gradient-to-r from-primary to-primary/80 text-primary-foreground shadow-sm hover:shadow-md transition-shadow">
<span class="font-bold">{{ productCount }}</span>
<span class="ml-1 opacity-90">Products</span>
</Badge>
<Badge class="text-xs font-medium bg-gradient-to-r from-accent to-accent/80 text-accent-foreground shadow-sm">
<span class="font-bold">{{ stall?.currency || 'sats' }}</span>
<span class="ml-1 opacity-90">Currency</span>
</Badge>
<Badge v-if="stall?.shipping?.length" class="text-xs font-medium bg-gradient-to-r from-green-500 to-green-600 text-white shadow-sm">
<span class="font-bold">{{ stall.shipping.length }}</span>
<span class="ml-1 opacity-90">Shipping</span>
</Badge>
</div>
<!-- Categories (Enhanced) -->
<div v-if="stallCategories.length > 0" class="flex flex-wrap gap-1">
<Badge
v-for="category in stallCategories"
:key="category"
variant="secondary"
class="text-xs sm:text-sm px-2 py-1 cursor-pointer hover:bg-primary hover:text-primary-foreground transition-colors"
:variant="selectedCategories.includes(category) ? 'default' : 'secondary'"
class="text-xs px-2 py-0.5 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-sm"
:class="{
'bg-gradient-to-r from-primary to-primary/90 text-primary-foreground shadow-md': selectedCategories.includes(category),
'hover:bg-primary/10 hover:border-primary/50': !selectedCategories.includes(category)
}"
@click="toggleCategoryFilter(category)"
:class="{ 'bg-primary text-primary-foreground': selectedCategories.includes(category) }"
>
{{ category }}
</Badge>
</div>
</div>
</div>
</CardContent>
</div>
</Card>
</div>