From a6c3c77b091446b752f2867035e9667bdfec3683 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 12 Apr 2022 16:36:56 +0200
Subject: [PATCH] wip #4259 @1.5

---
 images/symbols/cart-overlay.svg     | 31 ++++++++++++-----------------
 js/libs/fluidbook/fluidbook.cart.js | 25 ++++++++++++++++++++---
 style/cart.less                     | 25 +++++++++++++++++++++--
 3 files changed, 58 insertions(+), 23 deletions(-)

diff --git a/images/symbols/cart-overlay.svg b/images/symbols/cart-overlay.svg
index 4088fa1a..85287f65 100644
--- a/images/symbols/cart-overlay.svg
+++ b/images/symbols/cart-overlay.svg
@@ -1,25 +1,20 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
-    <symbol id="link-cart-add" viewBox="0 0 35 35">
-        <path d="M17.5,0.5c-9.4,0-17,7.6-17,17c0,9.4,7.6,17,17,17c9.4,0,17-7.6,17-17C34.5,8.1,26.9,0.5,17.5,0.5z M26.2,18.5
-		h-7.8v7.8h-2v-7.8H8.8v-2h7.8V8.8h2v7.8h7.8V18.5z"/>
+    <symbol id="link-cart-add" viewBox="0 0 37 37">
+        <path d="M18.5,1.5c-9.4,0-17,7.6-17,17s7.6,17,17,17s17-7.6,17-17S27.9,1.5,18.5,1.5z M27.2,19.5h-7.8v7.8h-2v-7.8H9.8v-2h7.8V9.8h2v7.8h7.8v1.9H27.2z"/>
     </symbol>
-    <symbol id="link-cart-remove" viewBox="0 0 35 35">
-        <path d="M17.5,0.5c-9.4,0-17,7.6-17,17c0,9.4,7.6,17,17,17s17-7.6,17-17C34.5,8.1,26.9,0.5,17.5,0.5z M26.2,18.5H8.8
-		v-2h17.5V18.5z"/>
+    <symbol id="link-cart-remove" viewBox="0 0 37 37">
+        <path d="M18.5,1.5c-9.4,0-17,7.6-17,17s7.6,17,17,17s17-7.6,17-17S27.9,1.5,18.5,1.5z M27.2,19.5H9.8v-2h17.5L27.2,19.5L27.2,19.5z"/>
     </symbol>
-    <symbol id="link-cart-add-hover" viewBox="0 0 35 35">
-        <path d="M17.5,0C7.9,0,0,7.9,0,17.5S7.9,35,17.5,35S35,27.1,35,17.5S27.1,0,17.5,0z M17.5,34C8.4,34,1,26.6,1,17.5
-		S8.4,1,17.5,1S34,8.4,34,17.5S26.6,34,17.5,34z"/>
-        <polygon points="18.5,8.8 16.5,8.8 16.5,16.5 8.8,16.5 8.8,18.5 16.5,18.5 16.5,26.2 18.5,26.2 18.5,18.5 26.3,18.5
-		26.3,16.5 18.5,16.5 	"/>
+    <symbol id="link-cart-add-hover" viewBox="0 0 37 37">
+        <path d="M18.5,1C8.9,1,1,8.9,1,18.5S8.9,36,18.5,36S36,28.1,36,18.5S28.1,1,18.5,1z M18.5,35C9.4,35,2,27.6,2,18.5S9.4,2,18.5,2S35,9.4,35,18.5S27.6,35,18.5,35z"/>
+        <polygon points="19.5,9.8 17.5,9.8 17.5,17.5 9.8,17.5 9.8,19.5 17.5,19.5 17.5,27.2 19.5,27.2 19.5,19.5 27.3,19.5 27.3,17.5 19.5,17.5 "/>
     </symbol>
-    <symbol id="link-cart-remove-hover" viewBox="0 0 35 35">
-        <path d="M17.5,0C7.9,0,0,7.9,0,17.5S7.9,35,17.5,35S35,27.1,35,17.5S27.1,0,17.5,0z M17.5,34C8.4,34,1,26.6,1,17.5
-		S8.4,1,17.5,1S34,8.4,34,17.5S26.6,34,17.5,34z"/>
-        <rect x="8.7" y="16.5" width="17.5" height="2"/>
+    <symbol id="link-cart-remove-hover" viewBox="0 0 37 37">
+        <path d="M18.5,1C8.9,1,1,8.9,1,18.5S8.9,36,18.5,36S36,28.1,36,18.5S28.1,1,18.5,1z M18.5,35C9.4,35,2,27.6,2,18.5S9.4,2,18.5,2S35,9.4,35,18.5S27.6,35,18.5,35z"/>
+        <rect x="9.7" y="17.5" width="17.5" height="2"/>
     </symbol>
-    <symbol id="link-cart-info" viewBox="0 0 20 20">
-        <path d="M10,1.43c4.73,0,8.57,3.85,8.57,8.57s-3.85,8.57-8.57,8.57S1.43,14.73,1.43,10,5.27,1.43,10,1.43m0-1.43C4.48,0,0,4.48,0,10s4.48,10,10,10,10-4.48,10-10S15.52,0,10,0h0Z"/>
-        <path d="M9.27,5.67c-.19-.19-.29-.42-.29-.69s.1-.51,.29-.7,.44-.29,.73-.29,.54,.09,.73,.28c.19,.18,.29,.41,.29,.68s-.1,.52-.29,.71-.44,.29-.73,.29-.54-.09-.73-.28Zm-.02,1.89h1.51V15.88h-1.51V7.56Z"/>
+    <symbol id="link-cart-info" viewBox="0 0 22 22">
+        <path d="M11,2.4c4.7,0,8.6,3.8,8.6,8.6s-3.9,8.6-8.6,8.6S2.4,15.7,2.4,11S6.3,2.4,11,2.4 M11,1C5.5,1,1,5.5,1,11s4.5,10,10,10s10-4.5,10-10S16.5,1,11,1L11,1z"/>
+        <path d="M10.3,6.7C10.1,6.5,10,6.2,10,6s0.1-0.5,0.3-0.7S10.7,5,11,5s0.5,0.1,0.7,0.3C11.9,5.5,12,5.7,12,6s-0.1,0.5-0.3,0.7S11.3,7,11,7S10.5,6.9,10.3,6.7z M10.2,8.6h1.5v8.3h-1.5V8.6z"/>
     </symbol>
 </svg>
diff --git a/js/libs/fluidbook/fluidbook.cart.js b/js/libs/fluidbook/fluidbook.cart.js
index 7e295077..506e992b 100644
--- a/js/libs/fluidbook/fluidbook.cart.js
+++ b/js/libs/fluidbook/fluidbook.cart.js
@@ -78,12 +78,31 @@ FluidbookCart.prototype = {
 
         if (this.fluidbook.settings.cartLinkAppearance === 'overlay') {
             $('a[data-cart-ref]').each(function () {
-                var paddingTop = 0.5 * ($(this).outerHeight() - 100);
-                var paddingLeft = 0.5 * ($(this).outerWidth() - 250);
+                var small = false;
+                var smallwidth = false;
+                var smallheight = false;
+                if ($(this).outerWidth() < 280) {
+                    smallwidth = small = true;
+                    $(this).addClass('small').addClass('smallwidth');
+                }
+                if ($(this).outerHeight() < 130) {
+                    smallheight = small = true;
+                    $(this).addClass('small').addClass('smallheight');
+                }
+
+                var bw = 250;
+                var bh = 100;
+                if (small) {
+                    bw = 170;
+                    bh = 80;
+                }
+
+                var paddingTop = 0.5 * ($(this).outerHeight() - bh);
+                var paddingLeft = 0.5 * ($(this).outerWidth() - bw);
                 $(this).attr('data-tooltip', null).addClass('overlay').css({
                     paddingTop: paddingTop,
                     paddingLeft: paddingLeft
-                }).html('<div class="remove">' + getSpriteIcon('link-cart-remove') + getSpriteIcon('link-cart-remove-hover') + '</div><div class="add">' + getSpriteIcon('link-cart-add') + getSpriteIcon('link-cart-add-hover') + '</div><div class="infos">' + getSpriteIcon('link-cart-info')+'</div>');
+                }).html('<div class="remove">' + getSpriteIcon('link-cart-remove') + getSpriteIcon('link-cart-remove-hover') + '</div><div class="add">' + getSpriteIcon('link-cart-add') + getSpriteIcon('link-cart-add-hover') + '</div><div class="infos">' + getSpriteIcon('link-cart-info') + '</div>');
             });
         }
     },
diff --git a/style/cart.less b/style/cart.less
index b30420d2..86779139 100644
--- a/style/cart.less
+++ b/style/cart.less
@@ -4,6 +4,26 @@ a[data-cart-ref] {
   &.overlay {
     color: #fff;
 
+    &.small {
+      div {
+        &.infos {
+          bottom: 15px;
+          right: 15px;
+        }
+
+        @w: 80px;
+
+        &.add {
+          margin-left: unit(10, px);
+        }
+
+        &.add, &.remove {
+          width: @w;
+          height: @w;
+        }
+      }
+    }
+
     div {
       &.infos {
         @w: 50px;
@@ -17,6 +37,7 @@ a[data-cart-ref] {
       }
 
       @w: 100px;
+
       &.add {
         margin-left: unit(@w*0.5, px);
       }
@@ -31,8 +52,8 @@ a[data-cart-ref] {
         svg {
           top: 0;
           left: 0;
-          width: @w;
-          height: @w;
+          width: 100%;
+          height: 100%;
           overflow: visible;
           position: absolute;
           display: block;
-- 
2.39.5