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 {