From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 22 Feb 2021 20:39:14 +0000 (+0100)
Subject: wip #4286 @0:45
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=36e9ee0e50320c01c1b90c276443c8b3fccd7f67;p=fluidbook-html5.git

wip #4286 @0:45
---

diff --git a/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js b/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js
index 73659bcf..2f9c2f9b 100644
--- a/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js
+++ b/js/libs/fluidbook/cart/fluidbook.cart.grandvision.js
@@ -127,12 +127,33 @@ FluidbookCartGrandVision.prototype = {
 
         $("#grandvision-selection .items").perfectScrollbar();
 
+        this.initSortable();
 
         if (cb !== undefined) {
             cb();
         }
     },
 
+    initSortable: function () {
+        new Sortable(document.getElementById('grandvision-selection-items'), {
+            group: {
+                name: 'shared',
+                pull: 'clone', // To clone: set pull to 'clone'
+                put: false,
+            },
+            sort: false,
+            animation: 150
+        });
+
+        new Sortable(document.getElementById('grandvision-selection-slots'), {
+            swap: true,
+            group: {
+                name: 'shared',
+            },
+            animation: 150
+        });
+    },
+
 
     cartSelection: function () {
         var $this = this;
@@ -157,7 +178,7 @@ FluidbookCartGrandVision.prototype = {
             res += '</select>';
         });
         res += '</div>';
-        res += '<div class="items">';
+        res += '<div class="items" id="grandvision-selection-items">';
         res += selection;
         res += '</div>';
         res += '<div id="emptyres">No selected item match filters</div>';
@@ -178,17 +199,17 @@ FluidbookCartGrandVision.prototype = {
         $.each(this.boxes, function (k, b) {
             res += '<div class="box">';
             res += '<h3>' + b.name + '</h3>';
-            res += '<div class="slots">';
+            res += '<div class="slots" id="grandvision-selection-slots">';
             for (var i = 0; i < 10; i++) {
                 if (b.refs[i] === undefined) {
-                    res += '<div class="slot empty" data-tooltip="Drag an item from your selection here"></div>';
+                    res += '<div class="slot" data-tooltip="Drag an item from your selection here"></div>';
                 } else {
                     var data = this.getProductData(b.refs[i]);
                     res += '<div class="slot">';
                     if (data.front) {
                         res += '<img src="data/commerce/' + b.refs[i] + '-front.jpg">';
                     }
-                    res += '<p>' + b.refs[i] + ' | ' + data['Color Description'] + '</p>';
+                    res += '<p>' + b.refs[i] + ' | ' + data['Colour Description'] + '</p>';
                     res += '</div>';
                 }
             }
@@ -224,13 +245,11 @@ FluidbookCartGrandVision.prototype = {
             });
 
             selection += '<div class="item" data-ref="' + item + '" data-brand="' + data.BRAND + '" data-category="' + data.Category + '" data-gender="' + data.Gender + '" data-material="' + data.Material + '">';
-            selection += '<div class="img">';
-            if (data.front) {
-                selection += '<img src="data/commerce/' + item + '-front.jpg" />';
-            }
+            selection += '<div class="img" style="background-image: url(\'data/commerce/'+item+'-front.jpg\');">';
             selection += '</div>';
             selection += '<div class="infos"><h3>' + data['Model Code'] + '</h3>';
             selection += '<p>' + infos.join(' | ') + '</p></div>';
+            selection += '<div class="infos-box">' + item + ' | ' + data['Colour Description'] + '</div>';
             selection += '<a href="#" data-cart-delete="' + item + '">' + getSpriteIcon('interface-close') + '</a>';
             selection += '</div>';
         });
diff --git a/style/cart/grandvision.less b/style/cart/grandvision.less
index a96e9924..9e749b1d 100644
--- a/style/cart/grandvision.less
+++ b/style/cart/grandvision.less
@@ -3,6 +3,33 @@
   background-color: #f3f3f3;
   padding: 0 40px 40px 40px;
 
+  .item {
+    &:hover {
+      [data-cart-delete] {
+        visibility: visible;
+      }
+    }
+
+    [data-cart-delete] {
+      position: absolute;
+      top: 0;
+      right: 0;
+      visibility: hidden;
+      display: block;
+      height: 30px;
+      width: 30px;
+      background-color: @bleu;
+      color: #fff;
+      padding: 10px;
+
+      svg {
+        width: 10px;
+        height: 10px;
+        display: block;
+      }
+    }
+  }
+
   .content {
     color: #000;
     text-align: left;
@@ -150,30 +177,6 @@
           overflow: hidden;
           position: relative;
 
-          &:hover {
-            [data-cart-delete] {
-              visibility: visible;
-            }
-          }
-
-          [data-cart-delete] {
-            position: absolute;
-            top: 0;
-            right: 0;
-            visibility: hidden;
-            display: block;
-            height: 30px;
-            width: 30px;
-            background-color: @bleu;
-            color: #fff;
-            padding: 10px;
-
-            svg {
-              width: 10px;
-              height: 10px;
-              display: block;
-            }
-          }
 
           .infos {
             width: 370px;
@@ -187,12 +190,18 @@
             }
           }
 
+          .infos-box {
+            display: none;
+          }
+
           .img {
             width: 115px;
             height: 57px;
             position: relative;
             top: -13px;
             float: left;
+            background-position: 50% 50%;
+            background-size: cover;
 
             img {
               width: 115px;
@@ -248,38 +257,68 @@
         height: 600px;
         margin-top: 17px;
 
-        h3{
+        h3 {
           margin-bottom: 15px;
         }
 
         .slots {
-          .slot {
+          .slot, .item {
             display: inline-block;
             width: 200px;
-            height: 75px;
-            margin: 0 12px 20px 0;
+            height: 85px;
+            margin: 0 12px 10px 0;
+          }
+
+          .item {
+            position: relative;
+            .img {
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 200px;
+              height: 70px;
+              background-position: 50% 50%;
+              background-size: cover;
+            }
 
-            &.empty {
-              background-color: #f3f3ee;
-              border: 1px solid #cccad0;
+            h3, .infos {
+              display: none;
             }
+
+            .infos-box {
+              font-size: 11px;
+              color: #cccad0;
+              text-align: center;
+              margin-top: 5px;
+              width: 100%;
+              position: absolute;
+              bottom: 2px;
+              left: 0;
+            }
+          }
+
+          .slot {
+            background-color: #f3f3ee;
+            border: 1px solid #cccad0;
           }
         }
 
-        .actions{
+        .actions {
           position: relative;
-          top:-6px;
-          a{
+          top: -6px;
+
+          a {
             display: inline-block;
-            color:@bleu;
+            color: @bleu;
             font-size: 14px;
             margin-right: 25px;
-            svg{
+
+            svg {
               display: inline-block;
-              height:22px;
-              margin-right:5px;
+              height: 22px;
+              margin-right: 5px;
               position: relative;
-              top:6px;
+              top: 6px;
             }
           }
         }