From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 13 Apr 2022 07:38:21 +0000 (+0200)
Subject: wip #4259 @0.75
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=9a7a240aba2c0264500c88ceba93541b2d3469ae;p=fluidbook-html5.git

wip #4259 @0.75
---

diff --git a/js/libs/fluidbook/fluidbook.cart.js b/js/libs/fluidbook/fluidbook.cart.js
index 506e992b..73c2b3a9 100644
--- a/js/libs/fluidbook/fluidbook.cart.js
+++ b/js/libs/fluidbook/fluidbook.cart.js
@@ -78,24 +78,39 @@ FluidbookCart.prototype = {
 
         if (this.fluidbook.settings.cartLinkAppearance === 'overlay') {
             $('a[data-cart-ref]').each(function () {
-                var small = false;
-                var smallwidth = false;
-                var smallheight = false;
-                if ($(this).outerWidth() < 280) {
-                    smallwidth = small = true;
-                    $(this).addClass('small').addClass('smallwidth');
+                var size = 2;
+                var c=[];
+                if ($(this).outerWidth() < 200) {
+                    size = Math.min(size, 0);
+                    c.push('small-w');
+                } else if ($(this).outerWidth() < 280) {
+                    size = Math.min(size, 1);
+                    c.push('medium-w');
                 }
-                if ($(this).outerHeight() < 130) {
-                    smallheight = small = true;
-                    $(this).addClass('small').addClass('smallheight');
+                if ($(this).outerHeight() < 100) {
+                    size = Math.min(size, 0);
+                    c.push('small-h');
+                } else if ($(this).outerHeight() < 130) {
+                    size = Math.min(size, 1);
+                    c.push('medium-h');
+                }
+
+                if($(this).outerHeight() < 300){
+                    c.push('condensed-h');
                 }
 
                 var bw = 250;
                 var bh = 100;
-                if (small) {
+                if (size === 0) {
+                    bw = 130;
+                    bh = 60;
+                    $(this).addClass('small');
+                } else if (size === 1) {
                     bw = 170;
                     bh = 80;
+                    $(this).addClass('medium');
                 }
+                $(this).addClass(c);
 
                 var paddingTop = 0.5 * ($(this).outerHeight() - bh);
                 var paddingLeft = 0.5 * ($(this).outerWidth() - bw);
diff --git a/style/cart.less b/style/cart.less
index 86779139..5672ee84 100644
--- a/style/cart.less
+++ b/style/cart.less
@@ -2,9 +2,20 @@
 
 a[data-cart-ref] {
   &.overlay {
+    white-space: nowrap;
+    overflow: hidden;
     color: #fff;
 
-    &.small {
+    &.condensed-h {
+      div {
+        &.infos {
+          bottom: 15px;
+          right: 15px;
+        }
+      }
+    }
+
+    &.medium {
       div {
         &.infos {
           bottom: 15px;
@@ -24,6 +35,29 @@ a[data-cart-ref] {
       }
     }
 
+    &.small {
+      div {
+        &.infos {
+          width: 40px;
+          height: 40px;
+          bottom: 10px;
+          right: 10px;
+        }
+
+        @w: 60px;
+
+        &.add {
+          margin-left: unit(10, px);
+        }
+
+        &.add, &.remove {
+          width: @w;
+          height: @w;
+        }
+      }
+    }
+
+
     div {
       &.infos {
         @w: 50px;