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

Refactor StallView layout for improved responsiveness and visual clarity

Browse source 
- Adjusted padding, margins, and font sizes throughout the StallView component to enhance mobile responsiveness and overall user experience.
- Updated the styling of various elements, including buttons, statistics, and category badges, to ensure better alignment with the design system and improved accessibility.
- Enhanced the layout of the stall information and search/filter bar for a more cohesive appearance across different screen sizes.

These changes provide a more visually appealing and user-friendly interface in the StallView component.
This commit is contained in:
padreug 2025-09-26 10:43:49 +02:00
parent a82360b283
commit 0a94c7b23d
1 changed files with 21 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,13 +1,13 @@
<template>
<div class="container mx-auto px-4 py-6">
<div class="container mx-auto px-4 py-3 sm:py-6">
<!-- Stall Header -->
<div class="mb-8">
<div class="mb-4 sm:mb-8">
<!-- Back to Market Button -->
<Button
@click="goBackToMarket"
variant="ghost"
size="sm"
class="mb-4"
class="mb-2 sm:mb-4"
>
<ArrowLeft class="w-4 h-4 mr-2" />
Back to Market
@ -15,10 +15,10 @@
<!-- Stall Info Card -->
<Card class="overflow-hidden">
<div class="relative h-48 bg-gradient-to-r from-primary/80 to-accent">
<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-32 h-32 rounded-full bg-background p-2 shadow-lg">
<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"
@ -26,43 +26,43 @@
@error="handleLogoError"
/>
</div>
<div v-else class="w-32 h-32 rounded-full bg-background/95 flex items-center justify-center shadow-lg">
<Store class="w-16 h-16 text-muted-foreground" />
<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-20 pb-6">
<CardContent class="pt-10 sm:pt-20 pb-4 sm:pb-6">
<div class="text-center">
<h1 class="text-3xl font-bold mb-2 text-foreground">{{ stall?.name || 'Unknown Stall' }}</h1>
<p v-if="stall?.description" class="text-muted-foreground mb-4 max-w-2xl mx-auto">
<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-8 mt-6">
<div class="flex justify-center gap-4 sm:gap-8 mt-3 sm:mt-6">
<div class="text-center">
<div class="text-2xl font-bold text-primary">{{ productCount }}</div>
<div class="text-sm text-muted-foreground">Products</div>
<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>
</div>
<div class="text-center">
<div class="text-2xl font-bold text-foreground">{{ stall?.currency || 'sats' }}</div>
<div class="text-sm text-muted-foreground">Currency</div>
<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-2xl font-bold text-foreground">{{ stall.shipping.length }}</div>
<div class="text-sm text-muted-foreground">Shipping Zones</div>
<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>
</div>
<!-- Categories -->
<div v-if="stallCategories.length > 0" class="mt-6">
<div class="flex flex-wrap justify-center gap-2">
<div v-if="stallCategories.length > 0" class="mt-3 sm:mt-6">
<div class="flex flex-wrap justify-center gap-1 sm:gap-2">
<Badge
v-for="category in stallCategories"
:key="category"
variant="secondary"
class="cursor-pointer hover:bg-primary hover:text-primary-foreground transition-colors"
class="text-xs sm:text-sm px-2 py-1 cursor-pointer hover:bg-primary hover:text-primary-foreground transition-colors"
@click="toggleCategoryFilter(category)"
:class="{ 'bg-primary text-primary-foreground': selectedCategories.includes(category) }"
>
@ -76,7 +76,7 @@
</div>
<!-- Search and Filter Bar -->
<div class="mb-6 flex flex-col sm:flex-row gap-4">
<div class="mb-4 sm:mb-6 flex flex-col sm:flex-row gap-2 sm:gap-4">
<div class="flex-1">
<FuzzySearch
:data="stallProducts"