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

Improve mobile layout and product card design

Browse Source
This commit is contained in:
masoodafar-web
2025-11-28 06:40:35 +03:30
parent 2dc5e4c713
commit 7d545a2849
3 changed files with 40 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/FrontOffice.Main/Pages/Profile/Index.razor
View File

@@ -134,7 +134,7 @@
</MudLink>
</MudItem>
<MudItem xs="6" sm="6" md="3">
<MudLink Href="@RouteConstants.Store.Products" Disabled="true" Underline="Underline.None" Class="tile-link">
<MudLink Href="@RouteConstants.Store.Products" Underline="Underline.None" Class="tile-link">
<MudCard Elevation="1" Class="rounded-lg profile-tile">
<MudCardContent Class="d-flex flex-column align-center pa-4">
<MudIcon Icon="@Icons.Material.Filled.Storefront" Size="Size.Large" Color="Color.Primary" />

16
src/FrontOffice.Main/Pages/Store/ProductDetail.razor
View File

@@ -44,15 +44,19 @@ else
</MudHidden>
<!-- Mobile actions: stacked and full-width -->
<MudHidden Breakpoint="Breakpoint.MdAndUp">
<MudStack Spacing="2">
</MudStack>
</MudItem>
</MudGrid>
</MudContainer>
<MudHidden Breakpoint="Breakpoint.MdAndUp" Style="position: absolute; bottom: 0; left: 0; width: 100%">
<MudStack Spacing="2 " Class="d-flex flex-row-">
<MudNumericField T="int" @bind-Value="_qty" Min="1" Max="20" Immediate="true" HideSpinButtons="true" Class="w-100-mobile" />
<MudButton Class="w-100-mobile" Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.AddShoppingCart" OnClick="AddToCart">افزودن به سبد</MudButton>
<MudButton Class="w-100-mobile" Variant="Variant.Outlined" Color="Color.Secondary" OnClick="() => Navigation.NavigateTo(RouteConstants.Store.Cart)">مشاهده سبد</MudButton>
</MudStack>
</MudHidden>
</MudStack>
</MudItem>
</MudGrid>
</MudContainer>
}

45
src/FrontOffice.Main/Pages/Store/Products.razor
View File

@@ -3,7 +3,7 @@
<PageTitle>محصولات</PageTitle>
<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
<MudContainer MaxWidth="MaxWidth.Large" Class="pa-2 pa-md-6 ">
<MudPaper Elevation="1" Class="pa-4 mb-4 rounded-lg">
<MudGrid Spacing="2" AlignItems="AlignItems.Center">
<MudItem xs="12" md="8">
@@ -13,10 +13,11 @@
Adornment="Adornment.Start"
Immediate="true"
OnKeyUp="OnQueryChanged"
Class="w-100" />
Class="w-100"/>
</MudItem>
<MudItem xs="12" md="4" Class="d-flex justify-end">
<MudButton Class="w-100-mobile" Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.ShoppingCart" Href="@RouteConstants.Store.Cart">
<MudButton Class="w-100-mobile" Variant="Variant.Filled" Color="Color.Primary"
StartIcon="@Icons.Material.Filled.ShoppingCart" Href="@RouteConstants.Store.Cart">
سبد خرید (@Cart.Count)
</MudButton>
</MudItem>
@@ -26,7 +27,7 @@
@if (_loading)
{
<MudStack AlignItems="AlignItems.Center" Class="py-6">
<MudProgressCircular Color="Color.Primary" Indeterminate="true" />
<MudProgressCircular Color="Color.Primary" Indeterminate="true"/>
<MudText Class="mt-2 mud-text-secondary">در حال بارگذاری...</MudText>
</MudStack>
}
@@ -36,22 +37,32 @@
}
else
{
<MudGrid Spacing="3">
<MudGrid Spacing="1">
@foreach (var p in _products)
{
<MudItem xs="12" sm="6" md="4">
<MudCard Class="rounded-lg h-100 d-flex flex-column">
<MudPaper Class="pa-0">
<MudImage Src="@p.ImageUrl" Alt="@p.Title" Style="width:100%;height:160px;object-fit:cover" />
</MudPaper>
<MudCardContent Class="d-flex flex-column gap-2">
<MudText Typo="Typo.h6">@p.Title</MudText>
<MudText Typo="Typo.body2" Class="mud-text-secondary">@p.Description</MudText>
<MudText Typo="Typo.subtitle1" Color="Color.Primary">@FormatPrice(p.Price)</MudText>
<MudItem xs="6" sm="6" md="3"
onclick="@(() => Navigation.NavigateTo($"{RouteConstants.Store.ProductDetail}{p.Id}"))">
<MudCard Class="rounded-lg h-100 d-flex flex-column overflow-hidden"
Style="cursor:pointer;height: 300px">
<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">
</div>
<div class="pa-1 flex-grow-1 d-flex flex-column justify-space-between">
<MudText Typo="Typo.subtitle1">@p.Title</MudText>
<MudText Typo="Typo.subtitle2" Color="Color.Primary">@FormatPrice(p.Price)</MudText>
</div>
</MudCardContent>
<MudCardActions Class="mt-auto d-flex justify-space-between pa-3">
<MudButton Variant="Variant.Text" Color="Color.Secondary" Href="@($"{RouteConstants.Store.ProductDetail}{p.Id}")">جزئیات</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="() => AddToCart(p)" StartIcon="@Icons.Material.Filled.AddShoppingCart">افزودن</MudButton>
<MudCardActions Class="mt-auto d-flex justify-space-between pa-2">
@* <MudButton Variant="Variant.Text" Color="Color.Secondary" *@
@* Href="@($"{RouteConstants.Store.ProductDetail}{p.Id}")">جزئیات *@
@* </MudButton> *@
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="() => AddToCart(p)"
StartIcon="@Icons.Material.Filled.AddShoppingCart">افزودن
</MudButton>
</MudCardActions>
</MudCard>
</MudItem>