Product image gallery. WIP #2768 @6

diff --git a/.gitignore b/.gitignore
index a1ac577d16c7f1bc55d84ffd473ab8a4be57753e..eb84a4e89277d2be8b818f1650c406df5fd468e1 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@
 /vendor
 /.idea
 /_doc
+/.proxy-address*
 .env
 .phpunit.result.cache
 Homestead.json

diff --git a/resources/js/components/ProductGallery.vue b/resources/js/components/ProductGallery.vue
new file mode 100644 (file)
index 0000000..6733217
--- /dev/null
+++ b/resources/js/components/ProductGallery.vue
@@ -0,0 +1,52 @@
+<template>
+    <div class="product-gallery" v-show="images.length > 0">
+        <div class="product-gallery-main">
+            <div class="product-gallery-main-image" :style="`background-image:url(${images[currentImage]})`"></div>
+        </div>
+        <div class="grid grid-cols-3 grid-gap-sm" v-show="images.length > 1">
+            <div v-for="(image, i) in images"
+                 :key="i"
+                 :style="`background-image:url(${image})`"
+                 :class="{ 'product-gallery-current' : currentImage === i }"
+                 class="product-gallery-thumb"
+                 @click="currentImage = i"
+            >
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    export default {
+
+        props: {
+            images: {
+                required: true,
+            }
+        },
+        data: () => ({
+            currentImage: 0,
+        }),
+
+        computed: {
+
+        },
+
+        created() {
+
+        },
+
+        mounted() {
+
+        },
+
+        methods: {
+
+            selectImage(imageIndex, event) {
+                this.currentImage = imageIndex;
+            },
+        },
+
+    }
+</script>

diff --git a/resources/styles/components/product-gallery.styl b/resources/styles/components/product-gallery.styl
new file mode 100644 (file)
index 0000000..bb22291
--- /dev/null
+++ b/resources/styles/components/product-gallery.styl
@@ -0,0 +1,17 @@
+.product-gallery
+
+  &-main
+    @apply bg-white relative border-gray-100 border-4 pb-100p mb-4
+
+  &-main-image
+    @apply absolute bg-contain bg-center bg-no-repeat
+    width: 70%
+    height: 70%
+    top: 15%
+    left: 15%
+
+  &-thumb
+    @apply w-full bg-center bg-cover pb-100p border-4 border-grey-100 cursor-pointer
+
+  &-current
+    @apply border-grey-300
\ No newline at end of file

diff --git a/resources/styles/components/products.styl b/resources/styles/components/products.styl
index 1d263de08faa7ea605f9d6fd353e313e73d80e26..629b5020ee45fff7b2106cd13be29c487791a653 100644 (file)
--- a/resources/styles/components/products.styl
+++ b/resources/styles/components/products.styl
@@ -1,8 +1,6 @@
 .products
 
-
   // Grid view of products
-
   &-grid
     // When in auto grid mode, make the minimum width a bit
     // larger so we end up with 3 cols at the largest size.
@@ -15,39 +13,23 @@
 
 
     .product-highlights
-      height 42px // 3 lines
-      overflow hidden
+      height: 42px // 3 lines
+      overflow: hidden
 
       li
-        margin-bottom: 0
-
-    // all lines have the same size, it allows the last line not to be half croped
+        margin-bottom: 0 // avoids last line being partially cropped
 
     h3
-      height 21px
-      overflow hidden
+      height: 21px
+      overflow: hidden
+
 
 .product-img-holder
-  @apply bg-white
-  position: relative
-
-  &:before
-    content: "";
-    display: block
-    padding-top: 100%
-
-  > *
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    color: white;
-    text-align: center;
+  @apply bg-white relative pb-100p
 
   .product-img
-    @apply bg-contain bg-center bg-no-repeat
+    @apply absolute bg-contain bg-center bg-no-repeat
     width: 70%
     height: 70%
-    top: 15%;
-    left: 15%;
+    top: 15%
+    left: 15%
\ No newline at end of file

diff --git a/resources/views/pages/product-detail.blade.php b/resources/views/pages/product-detail.blade.php
index 6b534c876e5f9db317a29c957cbf93ae85d59442..e71d3cc24762dd08010b8ab1aac747ead00dcbf6 100644 (file)
--- a/resources/views/pages/product-detail.blade.php
+++ b/resources/views/pages/product-detail.blade.php
@@ -17,28 +17,10 @@
         <div class="flex mb-2v sm:block">
 
             {{-- Product images --}}
-            <div class="product-detail-images-wrapper flex-grow" style="max-width: 348px">
-                <div class="product-img-holder border-gray-100 border-4">
-                    <div class="product-img"
-                         style="background-image: url({{$product->getImageUrl('images','',asset('images/product-details/product-placeholder.svg')) }})"></div>
-                </div>
-{{--                <div--}}
-{{--                    class="product-detail-images-main border-gray-100 border-4 pb-100p w-full bg-center bg-contain bg-no-repeat mb-3"--}}
-{{--                    style="background-image: url({{ $product->getImageUrl('images','',asset('images/product-details/product-placeholder.svg')) }});">--}}
-{{--                </div>--}}
-
-                <grid cols="3" gap="sm">
-                    @foreach ($product->getImageURLList('images') as $key=>$url)
-                        @if ($key==0)
-                            continue;
-                        @endif
-                        <div
-                            class="product-detail-images-main border-gray-100 border-4 pb-100p w-full bg-center bg-cover"
-                            style="background-image: url({{ $url }});">
-                        </div>
-                    @endforeach
-                </grid>
-            </div>
+            <product-gallery :images='@json($product->getImageURLList('images', '', [asset('images/product-details/product-placeholder.svg')]))'
+                             class="flex-grow"
+                             style="max-width: 348px">
+            </product-gallery>
 
 
             {{-- Product text --}}
@@ -57,8 +39,7 @@
                 @if(config('features.quote'))
                     <link-button href="#" class="align-middle">{{__('Ajouter à ma sélection')}}</link-button>
 
-                    <span
-                        class="font-display text-lg inline-block align-middle rounded-full border-grey-dark border-2 h-8 w-8 text-center ml-6">?</span>
+                    <span class="font-display text-lg inline-block align-middle rounded-full border-grey-dark border-2 h-8 w-8 text-center ml-6">?</span>
                 @endif
 
             </text-block>

diff --git a/yarn.lock b/yarn.lock
index 53392418d050ad1c46ea3c8da69a3029c2ab43f9..ed8025459e9d8ec9ddebb762f5a563cb5763c7b2 100644 (file)
--- a/yarn.lock
+++ b/yarn.lock
@@ -3152,7 +3152,7 @@ glob-to-regexp@^0.3.0:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
   integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
 
-glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@~7.1.2:
+glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3:
   version "7.1.4"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255"
   integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==
@@ -6164,7 +6164,7 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
-"safer-buffer@>= 2.1.2 < 3":
+"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -6208,6 +6208,11 @@ selfsigned@^1.10.4:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b"
   integrity sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==
 
+semver@^6.0.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.2.0.tgz#4d813d9590aaf8a9192693d6c85b9344de5901db"
+  integrity sha512-jdFC1VdUGT/2Scgbimf7FSx9iJLXoqfglSF+gJeuNWVpiE37OIbc1jywR/GJyFdz3mnkz2/id0L0J/cr0izR5A==
+
 semver@^6.1.0, semver@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.1.1.tgz#53f53da9b30b2103cd4f15eab3a18ecbcb210c9b"
@@ -6540,7 +6545,7 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@~0.7.2:
+source-map@^0.7.3:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
@@ -6796,12 +6801,10 @@ stylus-loader@^3.0.2:
   dependencies:
     css-parse "~2.0.0"
     debug "~3.1.0"
-    glob "^7.1.3"
+    glob "~7.1.2"
     mkdirp "~0.5.x"
-    safer-buffer "^2.1.2"
     sax "~1.2.4"
-    semver "^6.0.0"
-    source-map "^0.7.3"
+    source-map "~0.7.2"
 
 supports-color@^2.0.0:
   version "2.0.0"