Fixed product list page

apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Index.cshtml

@@ -9,17 +9,16 @@
 @inject IOptions<AbpRemoteServiceOptions> options
 
 @{
-    const int productsColumnSize = 4; // TODO: update abp-column helper to plain html for proper row and columns css
     string pageHeader = L["OurProducts"];
 }
 
 @section styles{
-    <abp-style src="/Pages/index.css" />
+    <abp-style src="/Pages/index.css"/>
 }
 
 @section scripts {
-    <abp-script src="/client-proxies/basket-proxy.js" />
+    <abp-script src="/client-proxies/basket-proxy.js"/>
-    <abp-script src="/Pages/index.js" />
+    <abp-script src="/Pages/index.js"/>
 }
 
 @if (Model.HasRemoteServiceError)
@@ -27,50 +26,50 @@
     pageHeader = L["CatalogServiceNotAvailable"];
 }
 
-<div class="row">
+<div class="container">
-    <div class="col-lg-12">
+    <h3 class="pb-4 text-center">@pageHeader</h3>
-        <h3 class="pb-4 text-center">@pageHeader</h3>
+    <div class="">
         <div class="product-list">
-            @for (int i = 0; i < Math.Ceiling(Model.Products.Count / (double)productsColumnSize); i++)
+            @foreach (var product in Model.Products)
             {
-                <abp-row>
+                var productPrice = product.Price.ToString("C", new CultureInfo("en-US"));
-                    @for (int j = 0; j < productsColumnSize; j++)
+                string productImage = !product.ImageName.IsNullOrEmpty() ? $"{options.Value.RemoteServices.Default.BaseUrl}product-images/{product.ImageName}" : $"{options.Value.RemoteServices.Default.BaseUrl}product-images/@product.ImageName";
-                    {
+                string buyText = L["Index:AddToBasket"];
-                        <abp-column size-lg="_3" size-md="_4" size-sm="_6">
+                <div class="product-container">
-                            @if ((i * productsColumnSize) + j < Model.Products.Count)
+                    <div class="product-list-item" data-product-id="@product.Id.ToString()">
+                        <a href="/products/@product.Id.ToString()">
+                            <div class="product-title">
+                                <span>
+                                    <h6>@product.Name</h6>
+                                    <span class="d-block text-muted">@product.Code</span>
+                                </span>
+                            </div>
+                            <div class="product-image">
+                                <img src="@productImage" loading="lazy"/>
+                            </div>
+                            <div class="product-count">
+                                <span class="d-block">@L["StockCount"]: @product.StockCount</span>
+                            </div>
+                        </a>
+                        <div class="product-item-bottom">
+                            <div class="item-added">
+                                <div class="fa fa-check" style="color: yellowgreen; padding-right: 1em;"></div>
+                                <span style="display: flex">Added to cart</span>
+                            </div>
+                            @if (product.StockCount > 0)
                             {
-                                var product = Model.Products[(i * productsColumnSize) + j];
+                                <abp-button class="add-basket-button" button-type="Warning" text="@buyText" data-product-id="@product.Id.ToString()"></abp-button>
-                                var productPrice = product.Price.ToString("C", new CultureInfo("en-US"));
-                                string productImage = !product.ImageName.IsNullOrEmpty() ? $"{options.Value.RemoteServices.Default.BaseUrl}product-images/{product.ImageName}" : $"{options.Value.RemoteServices.Default.BaseUrl}product-images/@product.ImageName";
-                                string buyText = L["Index:AddToBasket"];
-                                <div class="product-list-item" data-product-id="@product.Id.ToString()">
-                                    <a href="/products/@product.Id.ToString()">
-                                        <div class="col">
-                                            <div class="product-info-box">
-                                                <h6>@product.Name</h6>
-                                                <em class="d-block text-muted">@product.Code - @L["StockCount"]: @product.StockCount</em>
-                                            </div>
-                                        </div>
-                                        <img src="@productImage" />
-                                    </a>
-                                    <div class="row mt-5 ">
-                                        @if (product.StockCount > 0)
-                                        {
-                                            <abp-button class="add-basket-button" button-type="Warning" text="@buyText" data-product-id="@product.Id.ToString()"></abp-button>
-                                        }
-                                        else
-                                        {
-                                            <abp-button disabled="true" class="add-basket-button" button-type="Warning" text="@L["Index:OutOfStock"]" />
-                                        }
-                                        <div class="info-section col" style="text-align: center">
-                                            <span class="product-price">@productPrice</span>
-                                        </div>
-                                    </div>
-                                </div>
                             }
-                        </abp-column>
+                            else
-                    }
+                            {
-                </abp-row>
+                                <abp-button disabled="true" class="add-basket-button" button-type="Warning" text="@L["Index:OutOfStock"]"/>
+                            }
+                            <div class="info-section col">
+                                <span class="product-price">@productPrice</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             }
         </div>
     </div>

apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.css

@@ -5,20 +5,54 @@
 a, a:hover, a:visited, a:active {
     color: inherit;
     text-decoration: none;
+    padding-bottom: 1em;
 }
 
-.product-list-item {
+.product-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 1em 2em; /* row-gap column gap */
+}
+
+.product-container {
+    text-align: center;
     background-color: #fff;
-    padding: 2em;
+    padding: 2em 2em 1em 2em;
     border: 1px solid #eee;
     border-radius: 3px;
     box-shadow: 0 0 10px rgba(0, 0, 0, .05);
     margin-bottom: 2em;
     transition: all .2s;
+    display: flex;
+    flex: 0 0 20%;
+    flex-direction: column;
+}
+
+.product-list-item {
+    display: flex;
+    flex-direction: column;
+}
+
+.product-item-bottom {
+    display: flex;
+    flex-direction: column;
+    min-height: 70px;
+}
+
+.product-title {
+    min-height: 70px;
+    padding-bottom: 1em;
 }
 
-.product-list-item:hover {
+.product-count {
-    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
+    display: flex;
+    justify-content: center;
+    padding: 1em 0 1em 0em;
+}
+
+.product-container:hover {
+    box-shadow: 1px 1px 20px rgba(0, 0, 0, .2);
     cursor: pointer;
 }
 
@@ -30,10 +64,6 @@ a, a:hover, a:visited, a:active {
     opacity: .8
 }
 
-.product-info-box {
-    min-height: 80px;
-}
-
 .add-basket-button {
     display: none;
     font-weight: 500;
@@ -41,6 +71,11 @@ a, a:hover, a:visited, a:active {
 
 .product-list-item:hover .add-basket-button {
     display: inline-block;
+    width: -webkit-fill-available;
+}
+
+.info-section {
+    text-align: center;
 }
 
 .product-list-item:hover .info-section {
@@ -51,4 +86,10 @@ a, a:hover, a:visited, a:active {
     font-weight: bolder;
     font-size: larger;
     line-height: 40px;
+}
+
+.item-added {
+    display: none;
+    justify-content: center;
+    align-items: baseline;
 }

apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.js

@@ -17,7 +17,13 @@
                     .data('abp-widget-manager')
                     .refresh();
 
-                abp.notify.success("Added product to your basket.", "Successfully added");
+                abp.notify.success("Added product to your basket.", "Successfully added"); //TODO: localize the msg
+                var $itemAdded = $this.parent(".product-item-bottom").find(".item-added");
+                $($itemAdded).css({display: "flex"});
+                $this.css({opacity: 0.5});
+                $this.animate({opacity: 1}, 2000);
+            }).catch(err => {
+                abp.notify.error(err.message, "Failed while adding item");  //TODO: localize the msg
             });
         });
     });