M-Labs
/
web2019
5
0
Fork 2
Code Issues 16 Pull Requests Releases Wiki Activity

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

Signed-off-by: Egor Savkin <es@m-labs.hk>
pull/93/head
Egor Savkin 2023-11-28 12:16:16 +08:00
parent 38541f8928
commit b815c4dd4e
4 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
sass/css/_shop.scss
View File

@ -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

2
static/js/shop.bundle.js
View File

File diff suppressed because one or more lines are too long

11
static/js/shop.jsx
View File

@ -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}

4
static/js/shop_components.jsx
View File

@ -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);
};