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