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

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2023-11-28 12:16:16 +08:00
parent 38541f8928
commit b815c4dd4e
4 changed files with 20 additions and 9 deletions

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

@ -318,7 +318,7 @@ export function FilterOptions(options, data) {
return target 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 [show, setShow] = useState(false);
const ref = useClickAway((e) => { const ref = useClickAway((e) => {
if (e.type === "mousedown") // ignore touchstart 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) => { const handleClick = (event) => {
setShow(!show); setShow(!show);
}; };