окошко для загрузки изображений в мобильной версии в зависимости от чека

This commit is contained in:
Tamara 2023-07-02 02:33:35 +03:00
parent 404b3edeb1
commit e842f1de5c
3 changed files with 30 additions and 6 deletions

@ -84,6 +84,7 @@ export default function QuestionsPage() {
background: theme.palette.brightPurple.main,
fontSize: "18px",
}}
onClick={handleNext}
>
Следующий шаг
</Button>

@ -108,6 +108,11 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
updateQuizesList(params, {config: SPageClone })
}
const [mobileVersion, setMobileVersion] = React.useState(false);
const MobileVersionHC = (bool:boolean) => {
setMobileVersion(bool)
}
return (
<>
<Typography variant="h5" sx={{marginTop: "60px"}}>Стартовая страница</Typography>
@ -238,16 +243,23 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
display: backgroundType === "image" ? "flex" : "none",
flexDirection: "column"
}}>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
Изображение</Typography>
<DropZone text={"5 MB максимум"} heightImg={"110px"}/>
<Box sx={{
display: mobileVersion ? "none" : "flex",
flexDirection: "column"
}}>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>
Изображение</Typography>
<DropZone text={"5 MB максимум"} heightImg={"110px"}/>
</Box>
<ModalSizeImage/>
<Box sx={{
mt: "20px",
display: "flex",
gap: "10px",
alignItems: "center",
flexDirection: "column"
}}>
<FormControlLabel
@ -264,8 +276,18 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
ml: "-9px",
userSelect: "none",
}}
onClick={() => {MobileVersionHC(!mobileVersion)}}
/>
{mobileVersion ?
<Box sx={{display: "flex", flexDirection: "column"}}>
<Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "11px", mb: "14px" }}>
Изображение для мобильной версии</Typography>
<DropZone text={"5 MB максимум"} heightImg={"110px"}/>
</Box>
:
<></>
}
</Box>
</Box>

@ -3,6 +3,7 @@ import StepOne from "../pages/startPage/stepOne";
import Steptwo from "../pages/startPage/steptwo";
import StartPageSettings from "../pages/startPage/StartPageSettings";
import QuestionsPage from "../pages/Questions/QuestionsPage";
import ContactFormPage from "../pages/ContactFormPage/ContactFormPage";
interface Props {
activeStep: number,
@ -25,7 +26,7 @@ export default function SwitchStepPages({activeStep = 1, handleNext }: Props) {
return (<QuestionsPage/>);
break;
case 5:
return (<StartPageSettings handleNext={handleNext}/>);
return (<ContactFormPage/>);
break;
case 6:
return (<StartPageSettings handleNext={handleNext}/>);