From aae3c415fce6813a56b11636bfebfb1d1989765e Mon Sep 17 00:00:00 2001
From: Dinesh Salunke <dineshsalunke@consultbop.com>
Date: Tue, 7 Nov 2023 12:03:47 +0530
Subject: [PATCH] refactor: replace grid with flex

---
 .../views/templates/hook/ps_categoryproducts.tpl          | 8 ++++----
 .../views/templates/hook/ps_featuredproducts.tpl          | 2 +-
 templates/catalog/_partials/miniatures/product.tpl        | 4 ++--
 templates/catalog/_partials/products.tpl                  | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/modules/ps_categoryproducts/views/templates/hook/ps_categoryproducts.tpl b/modules/ps_categoryproducts/views/templates/hook/ps_categoryproducts.tpl
index 3139444..e4b9049 100644
--- a/modules/ps_categoryproducts/views/templates/hook/ps_categoryproducts.tpl
+++ b/modules/ps_categoryproducts/views/templates/hook/ps_categoryproducts.tpl
@@ -22,15 +22,15 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-<section class="featured-products clearfix mt-3">
-  <h2>
+<section class="flex flex-col mt-16">
+  <span class="text-lg mt-16 font-medium">
     {if $products|@count == 1}
       {l s='%s other product in the same category:' sprintf=[$products|@count] d='Shop.Theme.Catalog'}
     {else}
       {l s='%s other products in the same category:' sprintf=[$products|@count] d='Shop.Theme.Catalog'}
     {/if}
-  </h2>
-  <div class="products">
+  </span>
+  <div class="products flex flex-wrap">
       {foreach from=$products item="product"}
           {include file="catalog/_partials/miniatures/product.tpl" product=$product}
       {/foreach}
diff --git a/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl b/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl
index 544d208..1f18155 100644
--- a/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl
+++ b/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl
@@ -26,7 +26,7 @@
   <h2 class="products-section-title text-2xl font-bold">
     {l s='Popular Products' d='Shop.Theme.Catalog'}
   </h2>
-  <div class="products grid grid-cols-1 md:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
+  <div class="products flex flex-wrap">
     {foreach from=$products item="product"}
       {include file="catalog/_partials/miniatures/product.tpl" product=$product}
     {/foreach}
diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
index 68a9a0d..4680e24 100644
--- a/templates/catalog/_partials/miniatures/product.tpl
+++ b/templates/catalog/_partials/miniatures/product.tpl
@@ -23,7 +23,7 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 {block name='product_miniature_item'}
-<a href="{$product.url}"  class="group w-full flex flex-col">
+<a href="{$product.url}"  class="group w-full md:w-1/2 lg:w-1/3 xl:w-1/4 flex flex-col p-4">
   {block name='product_thumbnail'}
     {if $product.cover}
       <div class="thumbnail product-thumbnail w-full aspect-[342/513] bg-gray-100">
@@ -52,7 +52,7 @@
       </div>
     {/block}
     {block name='product_name'}
-        <span class="text-xl font-medium" itemprop="name">{$product.name|truncate:30:'...'}</span>
+        <span class="text-lg font-light" itemprop="name">{$product.name|truncate:30:'...'}</span>
     {/block}
   </div>
 </a>
diff --git a/templates/catalog/_partials/products.tpl b/templates/catalog/_partials/products.tpl
index 8aebc8a..9c1f5ff 100644
--- a/templates/catalog/_partials/products.tpl
+++ b/templates/catalog/_partials/products.tpl
@@ -23,7 +23,7 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 <div id="js-product-list flex flex-col">
-  <div class="products grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+  <div class="products flex flex-wrap">
     {foreach from=$listing.products item="product"}
       {block name='product_miniature'}
         {include file='catalog/_partials/miniatures/product.tpl' product=$product}