From b5f236857c0d3442d109370f2dde74ca2dbee4ff Mon Sep 17 00:00:00 2001
From: abhisheks <abhisheks@consultbop.com>
Date: Fri, 3 Nov 2023 17:44:55 +0530
Subject: [PATCH] refactor: update product images preview styles

---
 .../_partials/product-cover-thumbnails.tpl     | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index b6553cd..aaf8111 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -22,25 +22,18 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-<div class="images-container">
+<div class="images-container flex flex-row-reverse justify-center gap-6 flex-wrap lg:flex-nowrap">
   {block name='product_cover'}
     <div class="product-cover">
-      {if $product.cover}
-        <img class="js-qv-product-cover" src="{$product.cover.bySize.large_default.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">
-        <div class="layer hidden-sm-down" data-toggle="modal" data-target="#product-modal">
-          <i class="material-icons zoom-in">&#xE8FF;</i>
-        </div>
-      {else}
-        <img src="{$urls.no_picture_image.bySize.large_default.url}" style="width:100%;">
-      {/if}
+        <img class="js-qv-product-cover max-w-2xl bg-gray-100" src="{$product.cover.bySize.large_default.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">
     </div>
   {/block}
 
   {block name='product_images'}
-    <div class="js-qv-mask mask">
-      <ul class="product-images js-qv-product-images">
+    <div class="js-qv-mask mask"" >
+      <ul class="product-images js-qv-product-images flex flex-row lg:flex-col gap-6">
         {foreach from=$product.images item=image}
-          <li class="thumb-container">
+          <li class="thumb-container w-14 md:w-24">
             <img
               class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}"
               data-image-medium-src="{$image.bySize.medium_default.url}"
@@ -48,7 +41,6 @@
               src="{$image.bySize.home_default.url}"
               alt="{$image.legend}"
               title="{$image.legend}"
-              width="100"
               itemprop="image"
             >
           </li>