admin/FrontOffice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: make all product images 1:1 square ratio across both stores
Build and Deploy to Kubernetes / build-and-deploy (push) Successful in 6m18s
Details

Browse Source 
- Store/Products.razor: aspect-ratio:1/1 instead of height:60%
- DiscountStore/Products.razor: same square ratio
- Store/ProductDetail.razor: aspect-ratio:1/1 instead of max-height:400px
- DiscountStore/ProductDetail.razor: ObjectFit.Cover + aspect-ratio:1/1
- Store/Cart.razor: rounded-lg instead of rounded-circle (desktop+mobile)
- Store/CheckoutSummary.razor: rounded-lg + ObjectFit.Cover
- Store/OrderDetail.razor: rounded-lg + ObjectFit.Cover (desktop+mobile)
- DiscountStore/Cart.razor: rounded-lg + ObjectFit.Cover (desktop+mobile)
- DiscountStore/Checkout.razor: rounded-lg + ObjectFit.Cover
This commit is contained in:
masoodafar-web
2026-02-18 01:00:42 +03:30
parent bf0eb089bb
commit 22203fd8f4
9 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/FrontOffice.Main/Pages/DiscountStore/Cart.razor
+2 -2
View File
@@ -33,7 +33,7 @@
<MudTd>
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
<AppImage Path="@GetImageUrl(context.ImageUrl)" Alt="@context.Title"
ImgWidth="64" ImgHeight="64" Class="product-thumb" />
ImgWidth="64" ImgHeight="64" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
<MudText>@context.Title</MudText>
</MudStack>
</MudTd>
@@ -82,7 +82,7 @@
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
<AppImage Path="@GetImageUrl(item.ImageUrl)" Alt="@item.Title"
ImgWidth="50" ImgHeight="50" Class="rounded-circle" />
ImgWidth="50" ImgHeight="50" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
<MudText Typo="Typo.subtitle2">@item.Title</MudText>
</MudStack>
<MudChip T="string" Color="Color.Error" Variant="Variant.Outlined" Size="Size.Small">
src/FrontOffice.Main/Pages/DiscountStore/Checkout.razor
+1 -1
View File
@@ -80,7 +80,7 @@
<MudStack Spacing="1">
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
<AppImage Path="@GetImageUrl(item.ImageUrl)" Alt="@item.Title"
ImgWidth="40" ImgHeight="40" Class="rounded-circle" />
ImgWidth="40" ImgHeight="40" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
<MudText Typo="Typo.subtitle2" Style="flex:1; margin:0 8px;">@item.Title</MudText>
<MudText Typo="Typo.subtitle2">@FormatPrice(item.FinalPrice)</MudText>
</MudStack>
src/FrontOffice.Main/Pages/DiscountStore/ProductDetail.razor
+2 -2
View File
@@ -24,8 +24,8 @@
<MudItem xs="12" md="5">
<MudPaper Class="pa-2 rounded-xl" Elevation="1">
<AppImage Path="@_selectedImage" Alt="@_product.Title"
ObjectFit="ObjectFit.Contain"
Style="width:100%; max-height:400px; border-radius:12px;" />
ObjectFit="ObjectFit.Cover"
Style="width:100%; aspect-ratio:1/1; border-radius:12px;" />
@if (_product.Images.Count > 1)
{
src/FrontOffice.Main/Pages/DiscountStore/Products.razor
+2 -2
View File
@@ -77,9 +77,9 @@
<MudItem xs="6" sm="6" md="3"
onclick="@(() => NavigateToProduct(p.Id))">
<MudCard Class="rounded-lg h-100 d-flex flex-column overflow-hidden"
Style="cursor:pointer;height: 300px">
Style="cursor:pointer;">
<MudCardContent Class="d-flex flex-column pa-1 h-100">
<div style="height: 60%;background-image: url('@(string.IsNullOrWhiteSpace(p.ThumbnailUrl) ? "/images/product-placeholder.svg" : p.ThumbnailUrl)');background-size: cover; background-position: center;border-radius: 0.5rem; position: relative;">
<div style="aspect-ratio:1/1;width:100%;background-image: url('@(string.IsNullOrWhiteSpace(p.ThumbnailUrl) ? "/images/product-placeholder.svg" : p.ThumbnailUrl)');background-size: cover; background-position: center;border-radius: 0.5rem; position: relative;">
@if (p.RemainingCount <= 0)
{
<div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;border-radius:0.5rem;">