Move first and last cards' options popup so that it will be accessible

Signed-off-by: Egor Savkin <es@m-labs.hk>

sass/css/_shop.scss

@@ -530,16 +530,18 @@ button {
                         .form-check {
                             min-height: 1rem;
                         }
-
-                        &.hd68-idc, &.stabilizer, &.clocker {
-                            width: 85px;
-                            left: -11px; // (card width (63) - overlay width (85)) / 2
-                        }
                     }
                 }
 
                 .overlay-smallcard {
                     left: -38.5px; // (card width (63) - overlay width (140)) / 2
+
+                    &.overlay-first {
+                        left: 0;
+                    }
+                    &.overlay-last {
+                        left: -67px;
+                    }
                 }
                 .overlay-bigcard {
                     left: -7px; // (card width (126) - overlay width (140)) / 2

static/js/shop.jsx

@@ -535,6 +535,8 @@ class ProductCartItem extends React.PureComponent {
       isMobile: PropTypes.bool,
       isTouch: PropTypes.bool,
       hovered: PropTypes.bool,
+      first: PropTypes.bool,
+      last: PropTypes.bool,
       index: PropTypes.number.isRequired,
       model: PropTypes.object.isRequired,
       data: PropTypes.object,
@@ -593,6 +595,8 @@ class ProductCartItem extends React.PureComponent {
       model,
       data,
       index,
+      first,
+      last,
       ext_data,
       onCardUpdate,
     } = this.props;
@@ -692,6 +696,8 @@ class ProductCartItem extends React.PureComponent {
                       key={"popover" + index}
                       id={"popover" + index}
                       big={model.size === "big"}
+                      first={first}
+                      last={last}
                       target={{
                         construct: ((outvar, value) => {
                           // console.log("construct", outvar, value, options_data);
@@ -842,13 +848,14 @@ class Cart extends React.PureComponent {
       onCardUpdate,
     } = this.props;
 
+    const nbrOccupied = nbrOccupiedSlotsInCrate(data.items);
+
     const products = data.items.map((item, index) => {
       let itemData;
       let ext_data = FillExtData(data.itemsData, index);
       if (data.itemsData && index in data.itemsData) {
         itemData = data.itemsData[index];
       }
-
       return (
         <ProductCartItem
             isMobile={isMobile}
@@ -857,6 +864,8 @@ class Cart extends React.PureComponent {
             key={item.id}
             id={item.id}
             index={index}
+            first={index === 0}
+            last={index === data.items.length - 1 && nbrOccupied >= nbrSlots}
             data={itemData}
             ext_data={ext_data}
             onToggleOverlayRemove={onToggleOverlayRemove}

static/js/shop_components.jsx

@@ -318,7 +318,7 @@ export function FilterOptions(options, data) {
     return target
 }
 
-export function OptionsDialogPopup({options, data, target, id, big, options_class}) {
+export function OptionsDialogPopup({options, data, target, id, big, first, last, options_class}) {
     const [show, setShow] = useState(false);
     const ref = useClickAway((e) => {
             if (e.type === "mousedown") // ignore touchstart
@@ -326,7 +326,7 @@ export function OptionsDialogPopup({options, data, target, id, big, options_clas
         }
     );
 
-    let div_classes = "overlayVariant border rounded " + (big ? "overlay-bigcard " : "overlay-smallcard ") + (options_class || "");
+    let div_classes = `overlayVariant border rounded ${big ? "overlay-bigcard" : "overlay-smallcard"} ${(!big && first) ? "overlay-first" : ""} ${(!big && last) ? "overlay-last" : ""} ${options_class || ""}`;
     const handleClick = (event) => {
         setShow(!show);
     };