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

Extend shop description to 80% and fix notification on mobiles when sidemenu is open

Browse Source 
Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2024-01-15 15:51:04 +08:00
parent 4f702e9064
commit 7ceba1d461
5 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sass/css/_shop.scss
View File

@ -213,7 +213,7 @@ button {
font-size: .8rem; font-size: .8rem;
> .description { > .description {
width: 50%; width: 80%;
padding-right: 30px; padding-right: 30px;
} }
} }

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

File diff suppressed because one or more lines are too long

7
static/js/shop/OptionsWrapper.jsx
View File

@ -8,7 +8,9 @@ export function OptionsDialogWrapper({crate_index, card_index, first, last}) {
const options = useShopStore((state) => state.crates[crate_index].items[card_index].options); const options = useShopStore((state) => state.crates[crate_index].items[card_index].options);
const options_data = useShopStore((state) => state.crates[crate_index].items[card_index].options_data); const options_data = useShopStore((state) => state.crates[crate_index].items[card_index].options_data);
const card_size = useShopStore((state) => state.crates[crate_index].items[card_index].size); const card_size = useShopStore((state) => state.crates[crate_index].items[card_index].size);
const card_id = useShopStore((state) => state.crates[crate_index].items[card_index].id);
const options_class = useShopStore((state) => state.crates[crate_index].items[card_index].options_class); const options_class = useShopStore((state) => state.crates[crate_index].items[card_index].options_class);
const sideMenuIsOpen = useShopStore((state) => state.sideMenuIsOpen);
const onOptionsUpdate = useShopStore((state) => state.updateOptions); const onOptionsUpdate = useShopStore((state) => state.updateOptions);
@ -17,11 +19,12 @@ export function OptionsDialogWrapper({crate_index, card_index, first, last}) {
options={options} options={options}
data={options_data} data={options_data}
options_class={options_class} options_class={options_class}
key={"popover" + crate_id +card_index} key={"popover" + crate_id +card_id}
id={"popover"+ crate_id + card_index} id={"popover"+ crate_id + card_id}
big={card_size === "big"} big={card_size === "big"}
first={first} first={first}
last={last} last={last}
sideMenuIsOpen={sideMenuIsOpen}
target={{ target={{
construct: ((outvar, value) => { construct: ((outvar, value) => {
// #!options_log // #!options_log

3
static/js/shop/options/DialogPopup.jsx
View File

@ -3,7 +3,7 @@ import {useClickAway} from "./useClickAway";
import {ProcessOptions} from "./Options"; import {ProcessOptions} from "./Options";
import {Notification} from "./Notification"; import {Notification} from "./Notification";
export function DialogPopup({options, data, target, id, big, first, last, options_class}) { export function DialogPopup({options, data, target, id, big, first, last, options_class, sideMenuIsOpen}) {
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
@ -21,6 +21,7 @@ export function DialogPopup({options, data, target, id, big, first, last, option
<Notification <Notification
id={"processed_options_notification" + id} id={"processed_options_notification" + id}
tip="Customization options available" tip="Customization options available"
sideMenuIsOpen={sideMenuIsOpen}
content={ content={
<img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"} <img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
onClick={handleClick}/> onClick={handleClick}/>

7
static/js/shop/options/Notification.jsx
View File

@ -1,8 +1,7 @@
import {OverlayTrigger, Tooltip} from "react-bootstrap"; import {OverlayTrigger, Tooltip} from "react-bootstrap";
import React, {useEffect, useState, useRef} from "react"; import React, {useEffect, useState} from "react";
import {useClickAway} from "./useClickAway";
export function Notification({id, tip, content}) { export function Notification({id, tip, content, sideMenuIsOpen}) {
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
useEffect(() => { useEffect(() => {
@ -23,7 +22,7 @@ export function Notification({id, tip, content}) {
show={show} show={show}
onToggle={() => setShow(false)} onToggle={() => setShow(false)}
overlay={<Tooltip id={id}>{tip}</Tooltip>} overlay={<Tooltip id={id}>{tip}</Tooltip>}
rootClose rootClose={!sideMenuIsOpen}
> >
{content} {content}
</OverlayTrigger> </OverlayTrigger>