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

feat: enhance ProgressiveImage component with dynamic error handling and improved no-image state

Browse source 
- Updated the ProgressiveImage component to display a dynamic error message based on the image availability, including a specific message for no-image scenarios.
- Modified ProductCard, ProductDetailDialog, and CheckoutPage components to utilize the enhanced ProgressiveImage, ensuring a consistent user experience when images are unavailable.
- Improved visual feedback by adding a placeholder for missing images across various components.

These changes enhance the user experience by providing clearer messaging and visual cues when images fail to load or are not available.

refactor: update background colors and gradients for theme-aware semantic styling consistency across components

- Changed background colors in ProgressiveImage, ProductCard, ProductDetailDialog, and CheckoutPage components to utilize theme-aware colors instead of fixed values.
- Enhanced gradient backgrounds to ensure better visual integration with the overall theme, improving the user interface and experience.

These updates promote a more cohesive design and improve maintainability by leveraging theme variables.
This commit is contained in:
padreug 2025-09-27 19:14:07 +02:00
parent fae19436b1
commit fe9fbe201b
4 changed files with 72 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/modules/market/components/ProductCard.vue
View file

@ -2,18 +2,27 @@
<Card class="overflow-hidden hover:shadow-lg transition-shadow duration-200">
<!-- Product Image -->
<div class="relative">
<!-- Show actual image if available -->
<ProgressiveImage
:src="product.images?.[0] || '/placeholder-product.png'"
v-if="product.images?.[0]"
:src="product.images[0]"
:alt="product.name"
container-class="w-full h-48 bg-gray-100"
container-class="w-full h-48 bg-muted/50"
image-class="w-full h-48 object-cover"
:background-color="'#f3f4f6'"
:blur-radius="8"
:transition-duration="400"
loading="lazy"
:show-loading-indicator="false"
@error="handleImageError"
/>
<!-- Show placeholder when no image -->
<div v-else class="w-full h-48 bg-gradient-to-br from-muted/50 to-muted flex items-center justify-center">
<div class="text-center">
<Package class="w-12 h-12 mx-auto text-muted-foreground mb-2" />
<span class="text-xs text-muted-foreground">No image available</span>
</div>
</div>
<!-- Add to Cart Button -->
<Button
@ -111,7 +120,7 @@ import { Card, CardContent, CardFooter, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import ProgressiveImage from '@/components/ui/ProgressiveImage.vue'
import { ShoppingCart } from 'lucide-vue-next'
import { ShoppingCart, Package } from 'lucide-vue-next'
import type { Product } from '@/modules/market/stores/market'
interface Props {

9
src/modules/market/components/ProductDetailDialog.vue
View file

@ -18,15 +18,17 @@
:alt="product.name"
container-class="w-full h-full"
image-class="w-full h-full object-cover"
:background-color="'#f3f4f6'"
:blur-radius="12"
:transition-duration="500"
loading="lazy"
:show-loading-indicator="true"
@error="handleImageError"
/>
<div v-else class="w-full h-full flex items-center justify-center">
<Package class="w-24 h-24 text-gray-300" />
<div v-else class="w-full h-full bg-gradient-to-br from-muted/50 to-muted flex items-center justify-center">
<div class="text-center">
<Package class="w-24 h-24 mx-auto text-muted-foreground mb-4" />
<span class="text-sm text-muted-foreground">No image available</span>
</div>
</div>
</div>
@ -44,7 +46,6 @@
:alt="`${product.name} - Image ${index + 1}`"
container-class="w-full h-full"
image-class="w-full h-full object-cover"
:background-color="'#f3f4f6'"
:blur-radius="6"
:transition-duration="300"
loading="lazy"

18
src/modules/market/views/CheckoutPage.vue
View file

@ -54,14 +54,19 @@
<div class="flex items-center space-x-4">
<!-- Product Image -->
<div class="w-16 h-16 bg-muted rounded-lg flex items-center justify-center">
<img
<ProgressiveImage
v-if="item.product.images?.[0]"
:src="item.product.images[0]"
:alt="item.product.name"
class="w-full h-full object-cover rounded-lg"
container-class="w-full h-full"
image-class="w-full h-full object-cover rounded-lg"
:blur-radius="4"
:transition-duration="300"
loading="lazy"
/>
<Package v-else class="w-8 h-8 text-muted-foreground" />
<div v-else class="w-full h-full flex items-center justify-center">
<Package class="w-8 h-8 text-muted-foreground" />
</div>
</div>
<!-- Product Details -->
@ -285,9 +290,10 @@ import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'
import {
Package,
CheckCircle
import ProgressiveImage from '@/components/ui/ProgressiveImage.vue'
import {
Package,
CheckCircle
} from 'lucide-vue-next'
const route = useRoute()