From e96c0dc524f09df4f0c4df06c5d0ab6c865addfd Mon Sep 17 00:00:00 2001
From: sovanna <sovanna.hing@gmail.com>
Date: Mon, 20 Jan 2020 17:43:33 +0100
Subject: [PATCH] fix(mobile/shop): Removes btn delete card from crate because
 no mouseover on mobile

---
 static/css/order-hardware.css | 20 ++++++++++----------
 static/js/shop.jsx            | 15 +++++++++++----
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/static/css/order-hardware.css b/static/css/order-hardware.css
index b8d43cc..fe8e3bf 100644
--- a/static/css/order-hardware.css
+++ b/static/css/order-hardware.css
@@ -174,9 +174,9 @@
   .dropdown-item {
     font-size: .75em;
   }
-  .sticky-top {
+  /*.sticky-top {
     position: fixed;
-  }
+  }*/
   .logo > img {
     height: 20px;
   }
@@ -301,16 +301,16 @@
     z-index: 0;
   }
 
-  /*#root-shop .layout>aside.aside.menu-opened + section.main:after {
+  #root-shop .layout>aside.aside.menu-opened + section.main:after {
     content: '';
     position: absolute;
     height: 100%;
     width: 100%;
-    background-color: rgba(0, 0, 0, .8);
+    background-color: rgba(0, 0, 0, 0);
     top: 0;
     bottom: 0;
     z-index: 10;
-  }*/
+  }
 
   #root-shop .layout>aside.aside {
     /*transform: translate3d(-310px, 0px, 0px);*/
@@ -358,9 +358,9 @@
   .dropdown-item {
     font-size: .75em;
   }
-  .sticky-top {
+  /*.sticky-top {
     position: fixed;
-  }
+  }*/
   .logo > img {
     height: 20px;
   }
@@ -404,15 +404,15 @@
     z-index: 0;
   }
 
-  /*#root-shop .layout>aside.aside.menu-opened + section.main:after {
+  #root-shop .layout>aside.aside.menu-opened + section.main:after {
     content: '';
     position: absolute;
     height: 100%;
     width: 100%;
-    background-color: rgba(0, 0, 0, .8);
+    background-color: rgba(0, 0, 0, 0);
     top: 0;
     bottom: 0;
-  }*/
+  }
 
   #root-shop .layout>aside.aside {
     /*transform: translate3d(-310px, 0px, 0px);*/
diff --git a/static/js/shop.jsx b/static/js/shop.jsx
index 40259c4..9f4550a 100644
--- a/static/js/shop.jsx
+++ b/static/js/shop.jsx
@@ -277,6 +277,7 @@ class ProductCartItem extends React.PureComponent {
 
   static get propTypes() {
     return {
+      isMobile: PropTypes.bool,
       hovered: PropTypes.bool,
       index: PropTypes.number.isRequired,
       model: PropTypes.object.isRequired,
@@ -340,14 +341,14 @@ class ProductCartItem extends React.PureComponent {
   }
 
   handleOnMouseEnterRemoveItem(index, e) {
-    if (this.props.onToggleOverlayRemove) {
+    if (this.props.onToggleOverlayRemove && !this.props.isMobile) {
       this.props.onToggleOverlayRemove(index, true);
     }
     e.preventDefault();
   }
 
   handleOnMouseLeaveRemoveItem(index, e) {
-    if (this.props.onToggleOverlayRemove) {
+    if (this.props.onToggleOverlayRemove && !this.props.isMobile) {
       this.props.onToggleOverlayRemove(index, false);
     }
     e.preventDefault();
@@ -557,6 +558,7 @@ class Cart extends React.PureComponent {
 
   static get propTypes() {
     return {
+      isMobile: PropTypes.bool,
       nbrSlots: PropTypes.number,
       itemHovered: PropTypes.string,
       data: PropTypes.object.isRequired,
@@ -569,6 +571,7 @@ class Cart extends React.PureComponent {
 
   render() {
     const {
+      isMobile,
       nbrSlots,
       itemHovered,
       data,
@@ -585,6 +588,7 @@ class Cart extends React.PureComponent {
       }
       return (
         <ProductCartItem
+            isMobile={isMobile}
             hovered={item.id === itemHovered}
             key={item.id}
             index={index}
@@ -1733,6 +1737,8 @@ class Shop extends React.PureComponent {
       mobileSideMenuShouldOpen,
     } = this.state;
 
+    const isMobile = window.deviceIsMobile();
+
     return (
       <DragDropContext onDragEnd={this.handleOnDragEnd}>
 
@@ -1747,13 +1753,13 @@ class Shop extends React.PureComponent {
                   data={columns['backlog']}
                   onClickAddItem={this.handleClickAddItem}
                   onClickToggleMobileSideMenu={this.handleClickToggleMobileSideMenu}
-                  isMobile={window.deviceIsMobile()}>
+                  isMobile={isMobile}>
               </Backlog>
             }
             main={(
               <OrderPanel
                   onClickToggleMobileSideMenu={this.handleClickToggleMobileSideMenu}
-                  isMobile={window.deviceIsMobile()}
+                  isMobile={isMobile}
                   title="Order hardware"
                   description="
                     Drag and drop the cards you want into the crate below to see how the combination would look like. If you have any issues with this ordering system, or if you need other configurations, email us directly anytime at sales@m-****.hk. The price is estimated and must be confirmed by a quote."
@@ -1769,6 +1775,7 @@ class Shop extends React.PureComponent {
                           <Cart
                               nbrSlots={crateModeSlots[currentMode]}
                               data={columns['cart']}
+                              isMobile={isMobile}
                               itemHovered={currentItemHovered}
                               onToggleProgress={this.handleToggleItemProgress}
                               onToggleWarning={this.handleToggleItemWarning}