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> <MudTd>
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center"> <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
<AppImage Path="@GetImageUrl(context.ImageUrl)" Alt="@context.Title" <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> <MudText>@context.Title</MudText>
</MudStack> </MudStack>
</MudTd> </MudTd>
@@ -82,7 +82,7 @@
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center"> <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center"> <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
<AppImage Path="@GetImageUrl(item.ImageUrl)" Alt="@item.Title" <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> <MudText Typo="Typo.subtitle2">@item.Title</MudText>
</MudStack> </MudStack>
<MudChip T="string" Color="Color.Error" Variant="Variant.Outlined" Size="Size.Small"> <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 Spacing="1">
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center"> <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
<AppImage Path="@GetImageUrl(item.ImageUrl)" Alt="@item.Title" <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" Style="flex:1; margin:0 8px;">@item.Title</MudText>
<MudText Typo="Typo.subtitle2">@FormatPrice(item.FinalPrice)</MudText> <MudText Typo="Typo.subtitle2">@FormatPrice(item.FinalPrice)</MudText>
</MudStack> </MudStack>
src/FrontOffice.Main/Pages/DiscountStore/ProductDetail.razor
+2 -2
View File
@@ -24,8 +24,8 @@
<MudItem xs="12" md="5"> <MudItem xs="12" md="5">
<MudPaper Class="pa-2 rounded-xl" Elevation="1"> <MudPaper Class="pa-2 rounded-xl" Elevation="1">
<AppImage Path="@_selectedImage" Alt="@_product.Title" <AppImage Path="@_selectedImage" Alt="@_product.Title"
ObjectFit="ObjectFit.Contain" ObjectFit="ObjectFit.Cover"
Style="width:100%; max-height:400px; border-radius:12px;" /> Style="width:100%; aspect-ratio:1/1; border-radius:12px;" />
@if (_product.Images.Count > 1) @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" <MudItem xs="6" sm="6" md="3"
onclick="@(() => NavigateToProduct(p.Id))"> onclick="@(() => NavigateToProduct(p.Id))">
<MudCard Class="rounded-lg h-100 d-flex flex-column overflow-hidden" <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"> <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) @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;"> <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;">
src/FrontOffice.Main/Pages/Store/Cart.razor
+2 -2
View File
@@ -31,7 +31,7 @@
<MudStack Spacing="1"> <MudStack Spacing="1">
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center"> <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
<AppImage Path="@GetProductImageUrl(context.ImageUrl)" Alt="@context.Title" <AppImage Path="@GetProductImageUrl(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> <MudText>@context.Title</MudText>
</MudStack> </MudStack>
@if (context.Discount > 0 || !string.IsNullOrWhiteSpace(context.Created) || !string.IsNullOrWhiteSpace(context.Description)) @if (context.Discount > 0 || !string.IsNullOrWhiteSpace(context.Created) || !string.IsNullOrWhiteSpace(context.Description))
@@ -87,7 +87,7 @@
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center"> <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center"> <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
<AppImage Path="@GetProductImageUrl(item.ImageUrl)" Alt="@item.Title" <AppImage Path="@GetProductImageUrl(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> <MudText Typo="Typo.subtitle2">@item.Title</MudText>
</MudStack> </MudStack>
@if (item.Discount > 0) @if (item.Discount > 0)
src/FrontOffice.Main/Pages/Store/CheckoutSummary.razor
+1 -1
View File
@@ -86,7 +86,7 @@
<MudStack Spacing="1"> <MudStack Spacing="1">
<MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center"> <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
<AppImage Path="@GetProductImageUrl(item.ImageUrl)" Alt="@item.Title" <AppImage Path="@GetProductImageUrl(item.ImageUrl)" Alt="@item.Title"
ImgWidth="48" ImgHeight="48" Class="rounded-circle" /> ImgWidth="48" ImgHeight="48" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
<MudText Typo="Typo.subtitle2">@item.Title</MudText> <MudText Typo="Typo.subtitle2">@item.Title</MudText>
<MudText Typo="Typo.subtitle2">@FormatPrice(item.LineTotal)</MudText> <MudText Typo="Typo.subtitle2">@FormatPrice(item.LineTotal)</MudText>
</MudStack> </MudStack>
src/FrontOffice.Main/Pages/Store/OrderDetail.razor
+2 -2
View File
@@ -47,7 +47,7 @@ else
<MudTd> <MudTd>
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center"> <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
<AppImage Path="@GetProductImageUrl(context.ProductThumbnailPath)" Alt="@context.ProductTitle" <AppImage Path="@GetProductImageUrl(context.ProductThumbnailPath)" Alt="@context.ProductTitle"
ImgWidth="60" ImgHeight="60" Class="rounded-circle" /> ImgWidth="60" ImgHeight="60" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
<MudText>@context.ProductTitle</MudText> <MudText>@context.ProductTitle</MudText>
</MudStack> </MudStack>
</MudTd> </MudTd>
@@ -66,7 +66,7 @@ else
<MudStack Spacing="1"> <MudStack Spacing="1">
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center"> <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
<AppImage Path="@GetProductImageUrl(it.ProductThumbnailPath)" Alt="@it.ProductTitle" <AppImage Path="@GetProductImageUrl(it.ProductThumbnailPath)" Alt="@it.ProductTitle"
ImgWidth="60" ImgHeight="60" Class="rounded-circle" /> ImgWidth="60" ImgHeight="60" Class="rounded-lg" ObjectFit="ObjectFit.Cover" />
<MudText>@it.ProductTitle</MudText> <MudText>@it.ProductTitle</MudText>
</MudStack> </MudStack>
<MudStack Row="true" Justify="Justify.SpaceBetween"> <MudStack Row="true" Justify="Justify.SpaceBetween">
src/FrontOffice.Main/Pages/Store/ProductDetail.razor
+1 -1
View File
@@ -33,7 +33,7 @@ else
{ {
<AppImage Path="@MainImageUrl" Alt="@MainImageAlt" <AppImage Path="@MainImageUrl" Alt="@MainImageAlt"
ObjectFit="ObjectFit.Cover" ObjectFit="ObjectFit.Cover"
Style="width:100%; max-height:400px; border-radius:12px;" /> Style="width:100%; aspect-ratio:1/1; border-radius:12px;" />
} }
else else
{ {
src/FrontOffice.Main/Pages/Store/Products.razor
+2 -2
View File
@@ -120,11 +120,11 @@
<MudItem xs="6" sm="6" md="3" <MudItem xs="6" sm="6" md="3"
onclick="@(() => Navigation.NavigateTo($"{RouteConstants.Store.ProductDetail}{p.Id}"))"> onclick="@(() => Navigation.NavigateTo($"{RouteConstants.Store.ProductDetail}{p.Id}"))">
<MudCard Class="rounded-lg h-100 d-flex flex-column overflow-hidden" <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"> <MudCardContent Class="d-flex flex-column pa-1 h-100">
<div style="height: 60%;background-image: url('@p.ImageUrl');background-size: cover; background-position: center;border-radius: 0.5rem; position: relative;"> <div style="aspect-ratio:1/1;width:100%;background-image: url('@p.ImageUrl');background-size: cover; background-position: center;border-radius: 0.5rem; position: relative;">
@if (p.RemainingCount <= 0) @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;"> <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;">