From e694079f206e44ca22580700dfb760583ee5c4e4 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 20 Mar 2020 15:56:43 +0100
Subject: [PATCH] wip #3511 @1

---
 resources/styles/common/global.styl           |  4 ++
 .../styles/components/product-gallery.styl    |  4 +-
 .../views/pages/product-detail.blade.php      | 10 +----
 .../views/partials/product-gallery.blade.php  | 37 +++++++++++++++++++
 4 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 resources/views/partials/product-gallery.blade.php

diff --git a/resources/styles/common/global.styl b/resources/styles/common/global.styl
index a8cc346..eeb9dca 100644
--- a/resources/styles/common/global.styl
+++ b/resources/styles/common/global.styl
@@ -22,6 +22,10 @@ p:not(:last-child)
   object-fit contain
   object-position 50% 50%
 
+  &.cover
+    object-fit cover
+  
+
   .no-objectfit & {
     height auto
   }
diff --git a/resources/styles/components/product-gallery.styl b/resources/styles/components/product-gallery.styl
index d3006c8..7e5f044 100644
--- a/resources/styles/components/product-gallery.styl
+++ b/resources/styles/components/product-gallery.styl
@@ -1,7 +1,7 @@
 .product-gallery
 
   &-main
-    @apply bg-white relative border-gray-100 border-4 pb-100p mb-4
+    @apply bg-white relative border-gray-100 border-4 pb-100p mb-4 cursor-zoom-in
 
   &-main-image
     @apply absolute bg-contain bg-center bg-no-repeat
@@ -11,7 +11,7 @@
     left: 15%
 
   &-thumb
-    @apply w-full bg-center bg-cover pb-100p border-4 border-grey-100 cursor-pointer
+    @apply w-full bg-center bg-cover border-4 border-grey-100 cursor-zoom-in
 
   &-current
     @apply border-grey-300
diff --git a/resources/views/pages/product-detail.blade.php b/resources/views/pages/product-detail.blade.php
index ab14a17..25f660a 100644
--- a/resources/views/pages/product-detail.blade.php
+++ b/resources/views/pages/product-detail.blade.php
@@ -23,13 +23,7 @@
         <div class="flex mb-2v sm:block">
 
             {{-- Product images --}}
-            <product-gallery
-                :thumbnails='@json($product->getImageURLList('images', 'thumb', [$product->getEntity()->image_fallback]))'
-                :images='@json($product->getImageURLList('images', 'large', [$product->getEntity()->image_fallback]))'
-                class="flex-grow"
-                style="max-width: 348px">
-            </product-gallery>
-
+            @include('partials.product-gallery')
 
             {{-- Product text --}}
             <text-block class="product-detail-text sm:mt-6">
@@ -88,7 +82,7 @@
                                    class="flex items-center text-grey-dark hover:text-primary">
                                     <img class="mr-4 mb-2"
                                          src="{{asset('images/product-details/icon-'.$document['type'].'.svg')}}"
-                                         alt="{{__('Icône %s',$document['type'])}}">
+                                         alt="{{__('Icône %s',[$document['type']])}}">
                                     {{ $document['label'] }}
                                 </a>
                             </li>
diff --git a/resources/views/partials/product-gallery.blade.php b/resources/views/partials/product-gallery.blade.php
new file mode 100644
index 0000000..2e665c8
--- /dev/null
+++ b/resources/views/partials/product-gallery.blade.php
@@ -0,0 +1,37 @@
+@php
+    $images=$product->getImagesData('images');
+@endphp
+
+<div class="product-gallery flex-grow" style="max-width: 348px;">
+    <div class="product-gallery-main">
+        <div class="product-gallery-main-image">
+            <img src="{{$product->getEntity()->image}}" alt="{{$product->getEntity()->image_alt}}" class="bgimg"/>
+        </div>
+    </div>
+    <div class="grid grid-cols-3 grid-gap-sm">
+        @foreach($images as $image)
+            <div class="product-gallery-thumb">
+                <img src="{{$image['url']}}" alt="{{$image['alt']}}" class="bgimg cover"/>
+            </div>
+        @endforeach
+    </div>
+    <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls " style="display: none;">
+        <div class="slides" style="width: 7680px;"></div>
+        <h3 class="title"></h3>
+        <p class="description"></p> <a class="prev">
+            <svg xmlns="http://www.w3.org/2000/svg" width="38.414" height="26" viewBox="0 0 38.414 26">
+                <g fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2">
+                    <path d="M13.414 25l-12-12 12-12"></path>
+                    <path d="M1.413 13h36.001"></path>
+                </g>
+            </svg>
+        </a> <a class="next">
+            <svg xmlns="http://www.w3.org/2000/svg" width="38.414" height="26" viewBox="0 0 38.414 26">
+                <g fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2">
+                    <path d="M25 1l12 12-12 12"></path>
+                    <path d="M37.001 13H1"></path>
+                </g>
+            </svg>
+        </a> <a class="close">×</a>
+        <ol class="indicator"></ol> <!----></div>
+</div>
-- 
2.39.5