masoodafar-web
94 lines
3.5 KiB
Markdown
94 lines
3.5 KiB
Markdown
# تصاویر مربعی محصولات (Product Images 1:1 Square Ratio)
|
||
|
||
> **تاریخ:** اسفند ۱۴۰۴ (February 2026)
|
||
> **وضعیت:** ✅ پیادهسازی شده — مرج به production
|
||
> **پروژه:** FrontOffice
|
||
|
||
---
|
||
|
||
## ۱. خلاصه
|
||
|
||
تمامی تصاویر محصولات در سمت مشتری (FrontOffice) در هر دو فروشگاه (عادی و اعتباری) به نسبت **1:1 مربعی** تغییر یافت.
|
||
|
||
---
|
||
|
||
## ۲. تغییرات اعمال شده
|
||
|
||
### ۲.۱ لیست محصولات (Products Grid)
|
||
|
||
| صفحه | تغییر |
|
||
|------|-------|
|
||
| `Store/Products.razor` | `height:300px` → حذف ارتفاع ثابت کارت |
|
||
| | `height:60%` → `aspect-ratio:1/1; width:100%` |
|
||
| `DiscountStore/Products.razor` | همان تغییرات |
|
||
|
||
**قبل:**
|
||
```html
|
||
<MudCard Style="cursor:pointer;height: 300px">
|
||
<div style="height: 60%; background-image: url(...)">
|
||
```
|
||
|
||
**بعد:**
|
||
```html
|
||
<MudCard Style="cursor:pointer;">
|
||
<div style="aspect-ratio:1/1; width:100%; background-image: url(...)">
|
||
```
|
||
|
||
### ۲.۲ جزئیات محصول (Product Detail — Main Image)
|
||
|
||
| صفحه | تغییر |
|
||
|------|-------|
|
||
| `Store/ProductDetail.razor` | `max-height:400px` → `aspect-ratio:1/1` |
|
||
| `DiscountStore/ProductDetail.razor` | `ObjectFit.Contain` → `ObjectFit.Cover` + `aspect-ratio:1/1` |
|
||
|
||
### ۲.۳ سبد خرید (Cart)
|
||
|
||
| صفحه | ویو | تغییر |
|
||
|------|-----|-------|
|
||
| `Store/Cart.razor` | Desktop (64×64) | `product-thumb` → `rounded-lg` + `ObjectFit.Cover` |
|
||
| `Store/Cart.razor` | Mobile (50×50) | `rounded-circle` → `rounded-lg` + `ObjectFit.Cover` |
|
||
| `DiscountStore/Cart.razor` | Desktop (64×64) | `product-thumb` → `rounded-lg` + `ObjectFit.Cover` |
|
||
| `DiscountStore/Cart.razor` | Mobile (50×50) | `rounded-circle` → `rounded-lg` + `ObjectFit.Cover` |
|
||
|
||
### ۲.۴ صفحه پرداخت (Checkout Summary)
|
||
|
||
| صفحه | تغییر |
|
||
|------|-------|
|
||
| `Store/CheckoutSummary.razor` (48×48) | `rounded-circle` → `rounded-lg` + `ObjectFit.Cover` |
|
||
| `DiscountStore/Checkout.razor` (40×40) | `rounded-circle` → `rounded-lg` + `ObjectFit.Cover` |
|
||
|
||
### ۲.۵ جزئیات سفارش (Order Detail)
|
||
|
||
| صفحه | ویو | تغییر |
|
||
|------|-----|-------|
|
||
| `Store/OrderDetail.razor` | Desktop (60×60) | `rounded-circle` → `rounded-lg` + `ObjectFit.Cover` |
|
||
| `Store/OrderDetail.razor` | Mobile (60×60) | `rounded-circle` → `rounded-lg` + `ObjectFit.Cover` |
|
||
|
||
---
|
||
|
||
## ۳. خلاصه تکنیکال
|
||
|
||
| الگوی قبلی | الگوی جدید | محل |
|
||
|------------|------------|------|
|
||
| `height: 60%` + `height: 300px` card | `aspect-ratio: 1/1; width: 100%` + no fixed card height | لیست محصولات |
|
||
| `max-height: 400px` | `aspect-ratio: 1/1` | جزئیات محصول |
|
||
| `ObjectFit.Contain` | `ObjectFit.Cover` | تصاویر اعتباری |
|
||
| `Class="rounded-circle"` | `Class="rounded-lg" ObjectFit="ObjectFit.Cover"` | تمام thumbnailها |
|
||
| `Class="product-thumb"` | `Class="rounded-lg" ObjectFit="ObjectFit.Cover"` | سبد خرید Desktop |
|
||
|
||
---
|
||
|
||
## ۴. فایلهای تغییر یافته (۹ فایل)
|
||
|
||
| فایل | تغییر |
|
||
|------|-------|
|
||
| `Pages/Store/Products.razor` | ✏️ |
|
||
| `Pages/Store/ProductDetail.razor` | ✏️ |
|
||
| `Pages/Store/Cart.razor` | ✏️ |
|
||
| `Pages/Store/CheckoutSummary.razor` | ✏️ |
|
||
| `Pages/Store/OrderDetail.razor` | ✏️ |
|
||
| `Pages/DiscountStore/Products.razor` | ✏️ |
|
||
| `Pages/DiscountStore/ProductDetail.razor` | ✏️ |
|
||
| `Pages/DiscountStore/Cart.razor` | ✏️ |
|
||
| `Pages/DiscountStore/Checkout.razor` | ✏️ |
|