Browse Source

fix(issue#16): Adds class inverted to flip warning when:

4 slots remains and current card is at almost the end of the crate

aka when the warnings is about a card that is at the end of the crate
master
sovanna 3 months ago
parent
commit
2adb262fb0
2 changed files with 14 additions and 2 deletions
  1. +5
    -0
      sass/css/_shop.scss
  2. +9
    -2
      static/js/shop.jsx

+ 5
- 0
sass/css/_shop.scss View File

@@ -403,6 +403,7 @@ button {
.progress-container {
width: 100%;
text-align: center;
position: relative;

> .alert-warning {
background-color: inherit;
@@ -450,6 +451,10 @@ button {
}
}
}

.k-popup-warning.inverted {
right: 0;
}
}

.overlayRemove {


+ 9
- 2
static/js/shop.jsx View File

@@ -522,6 +522,7 @@ class ProductCartItem extends React.PureComponent {
onToggleWarning: PropTypes.func,
onToggleOverlayRemove: PropTypes.func,
onClickRemoveItem: PropTypes.func,
shouldTooltipWarningClassInverted: PropTypes.bool,
};
}

@@ -602,6 +603,7 @@ class ProductCartItem extends React.PureComponent {
model,
data,
index,
shouldTooltipWarningClassInverted,
} = this.props;

let warning;
@@ -678,8 +680,8 @@ class ProductCartItem extends React.PureComponent {
<img className="alert-warning" src={warning ? `/images${warning.icon}` : null} />
)}

{warning && model.showWarning && (
<div className="k-popup-warning">
{warning && (
<div className={`k-popup-warning ${shouldTooltipWarningClassInverted ? 'inverted': ''}`}>
<p className="rule warning">
<i>{warning.message}</i>
</p>
@@ -817,6 +819,10 @@ class Cart extends React.PureComponent {
onClickRemoveItem,
} = this.props;

const nbrOccupied = nbrOccupiedSlotsInCrate(data.items);

const shouldTooltipWarningClassInverted = nbrSlots - nbrOccupied < 5;

const products = data.items.map((item, index) => {
let itemData;
if (data.itemsData && index in data.itemsData) {
@@ -829,6 +835,7 @@ class Cart extends React.PureComponent {
key={item.id}
index={index}
data={itemData}
shouldTooltipWarningClassInverted={shouldTooltipWarningClassInverted && index > 10}
onToggleProgress={onToggleProgress}
onToggleWarning={onToggleWarning}
onToggleOverlayRemove={onToggleOverlayRemove}


Loading…
Cancel
Save