From 7d545a28499d2bbcf33c40cc083e8b9482a86a23 Mon Sep 17 00:00:00 2001
From: masoodafar-web <masoud.afarin.moghaddam@outlook.com>
Date: Fri, 28 Nov 2025 06:40:35 +0330
Subject: [PATCH] Improve mobile layout and product card design

---
 .../Pages/Profile/Index.razor                 |  2 +-
 .../Pages/Store/ProductDetail.razor           | 18 +++++---
 .../Pages/Store/Products.razor                | 45 ++++++++++++-------
 3 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/src/FrontOffice.Main/Pages/Profile/Index.razor b/src/FrontOffice.Main/Pages/Profile/Index.razor
index 8053db4..03b28eb 100644
--- a/src/FrontOffice.Main/Pages/Profile/Index.razor
+++ b/src/FrontOffice.Main/Pages/Profile/Index.razor
@@ -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" />
diff --git a/src/FrontOffice.Main/Pages/Store/ProductDetail.razor b/src/FrontOffice.Main/Pages/Store/ProductDetail.razor
index d0bfdd3..4cb0e0f 100644
--- a/src/FrontOffice.Main/Pages/Store/ProductDetail.razor
+++ b/src/FrontOffice.Main/Pages/Store/ProductDetail.razor
@@ -44,15 +44,19 @@ else
                     </MudHidden>
 
                     <!-- Mobile actions: stacked and full-width -->
-                    <MudHidden Breakpoint="Breakpoint.MdAndUp">
-                        <MudStack Spacing="2">
-                            <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>
+    <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>
 }
diff --git a/src/FrontOffice.Main/Pages/Store/Products.razor b/src/FrontOffice.Main/Pages/Store/Products.razor
index cca4b83..d2fce25 100644
--- a/src/FrontOffice.Main/Pages/Store/Products.razor
+++ b/src/FrontOffice.Main/Pages/Store/Products.razor
@@ -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>