diff --git a/src/pages/ContactFormPage/DrawerParent.tsx b/src/pages/ContactFormPage/DrawerParent.tsx index 0d626a39..afe2173b 100644 --- a/src/pages/ContactFormPage/DrawerParent.tsx +++ b/src/pages/ContactFormPage/DrawerParent.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import Box from "@mui/material/Box"; import Drawer from "@mui/material/Drawer"; import Button from "@mui/material/Button"; -import { SxProps, Theme } from "@mui/material"; +import { SxProps, Theme, useMediaQuery, useTheme } from "@mui/material"; interface Props { outerContainerSx?: SxProps; @@ -17,6 +17,8 @@ export default function DrawerNewField({ isOpenDrawer: isOpen, drawerNewFieldHC, }: Props) { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); return ( <> drawerNewFieldHC("")} > - + {children} diff --git a/src/pages/Questions/BranchingModal/BranchingQuestionsModal.tsx b/src/pages/Questions/BranchingModal/BranchingQuestionsModal.tsx index 1ea3f88e..f6a01e5d 100644 --- a/src/pages/Questions/BranchingModal/BranchingQuestionsModal.tsx +++ b/src/pages/Questions/BranchingModal/BranchingQuestionsModal.tsx @@ -12,6 +12,7 @@ import { Typography, useTheme, Checkbox, + useMediaQuery, } from "@mui/material"; import { AnyTypedQuizQuestion, @@ -33,10 +34,11 @@ import { import { updateOpenedModalSettingsId } from "@root/uiTools/actions"; import { useUiTools } from "@root/uiTools/store"; import { enqueueSnackbar } from "notistack"; +import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo"; export default function BranchingQuestions() { const theme = useTheme(); - + const isMobile = useMediaQuery(theme.breakpoints.down(650)); const { openedModalSettingsId } = useUiTools(); const [targetQuestion, setTargetQuestion] = useState( @@ -119,14 +121,22 @@ export default function BranchingQuestions() { {targetQuestion.title} - - - - - + {isMobile ? ( + + ) : ( + + + + + + )} Пользователю будет предложено выбрать дату - - - - - + {isMobile ? ( + + ) : ( + + + + + + )} Пользователь может загрузить любой собственный файл - - - - - + {isMobile ? ( + + ) : ( + + + + + + )} { const quiz = useCurrentQuiz(); - + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(650)); if (!quiz) return null; return ( @@ -29,11 +31,15 @@ export const Result = () => { > Создать результаты - - - - - + {isMobile ? ( + + ) : ( + + + + + + )} ); diff --git a/src/pages/ResultPage/cards/ResultCard.tsx b/src/pages/ResultPage/cards/ResultCard.tsx index fd7d3a3a..be598ad8 100644 --- a/src/pages/ResultPage/cards/ResultCard.tsx +++ b/src/pages/ResultPage/cards/ResultCard.tsx @@ -391,7 +391,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => { - updateQuestion( @@ -401,11 +401,12 @@ export const ResultCard = ({ resultContract, resultData }: Props) => { ) } fullWidth + maxLength={19} placeholder="Например: узнать подробнее" sx={{ "& .MuiInputBase-root": { backgroundColor: "#F2F3F7", - width: "409px", + width: isMobile ? undefined : "409px", height: "48px", borderRadius: "8px", }, diff --git a/src/pages/ResultPage/cards/WhenCard.tsx b/src/pages/ResultPage/cards/WhenCard.tsx index 4559ed43..a32b5ff8 100644 --- a/src/pages/ResultPage/cards/WhenCard.tsx +++ b/src/pages/ResultPage/cards/WhenCard.tsx @@ -205,9 +205,13 @@ export const WhenCard = ({ quizExpand }: Props) => { quiz?.config.resultInfo.when === value ? " white" : "#9A9AAF", - minWidth: isSmallMonitor ? "310px" : "auto", + minWidth: isSmallMonitor + ? isMobile + ? undefined + : "310px" + : "auto", borderRadius: "8px", - width: "220px", + width: isMobile ? "100%" : "220px", height: "44px", fontSize: "17px", border: diff --git a/src/pages/ViewPublicationPage/ContactForm.tsx b/src/pages/ViewPublicationPage/ContactForm.tsx index 681149ce..562d49ba 100644 --- a/src/pages/ViewPublicationPage/ContactForm.tsx +++ b/src/pages/ViewPublicationPage/ContactForm.tsx @@ -7,6 +7,7 @@ import { Link, InputAdornment, useTheme, + useMediaQuery, } from "@mui/material"; import NameIcon from "@icons/ContactFormIcon/NameIcon"; import EmailIcon from "@icons/ContactFormIcon/EmailIcon"; @@ -75,6 +76,7 @@ export const ContactForm = ({ const mode = modes; const { questions } = useQuestionsStore(); const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); const [ready, setReady] = useState(false); const followNextForm = () => { setShowContactForm(false); @@ -108,8 +110,10 @@ export const ContactForm = ({ > { }; const CustomInput = ({ title, desc, Icon }: any) => { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(600)); return ( {title} { ) : null ) : null; - console.log(background) + console.log(background); return ( )} - - - - - + {currentStep === 1 && ( + + + + + + )} )} diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx index 625ec00e..e92e3f0a 100755 --- a/src/pages/startPage/StartPageSettings.tsx +++ b/src/pages/startPage/StartPageSettings.tsx @@ -46,6 +46,7 @@ import ModalSizeImage from "./ModalSizeImage"; import SelectableIconButton from "./SelectableIconButton"; import { DropZone } from "./dropZone"; import Extra from "./extra"; +import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo"; const designTypes = [ [ @@ -68,6 +69,7 @@ const designTypes = [ export default function StartPageSettings() { const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down(650)); const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1500)); const isTablet = useMediaQuery(theme.breakpoints.down(950)); const quiz = useCurrentQuiz(); @@ -302,122 +304,131 @@ export default function StartPageSettings() { -{quiz.config.startpage.background.type === "image" && - + {quiz.config.startpage.background.type === "image" && ( - + + Изображение + + { + uploadQuizImage(quiz.id, file, (quiz, url) => { + quiz.config.startpage.background.desktop = url; + quiz.config.startpage.background.originalDesktop = url; + }); + }} + onImageSaveClick={(file) => { + uploadQuizImage(quiz.id, file, (quiz, url) => { + quiz.config.startpage.background.desktop = url; + }); + }} + onDeleteClick={() => { + updateQuiz(quiz.id, (quiz) => { + quiz.config.startpage.background.desktop = null; + }); + }} + /> + + + + + )} + + {quiz.config.startpage.background.type === "video" && ( + <> + - Изображение - - { - uploadQuizImage(quiz.id, file, (quiz, url) => { - quiz.config.startpage.background.desktop = url; - quiz.config.startpage.background.originalDesktop = url; - }); - }} - onImageSaveClick={(file) => { - uploadQuizImage(quiz.id, file, (quiz, url) => { - quiz.config.startpage.background.desktop = url; - }); - }} - onDeleteClick={() => { - updateQuiz(quiz.id, (quiz) => { - quiz.config.startpage.background.desktop = null; - }); - }} - /> - - - - - -} - -{quiz.config.startpage.background.type === "video" && <> - - - Добавить видео - - - - - - - - - { - const file = event.target.files?.[0]; - if (file) { - uploadQuizImage(quiz.id, file, (quiz, url) => { - quiz.config.startpage.background.video = url; - }); - // setVideo(URL.createObjectURL(file)); - } - - }} - hidden - accept=".mp4" - multiple - type="file" - /> - } + + Добавить видео + + {isMobile ? ( + + ) : ( + + + + + + )} + + + > + { + const file = event.target.files?.[0]; + if (file) { + uploadQuizImage(quiz.id, file, (quiz, url) => { + quiz.config.startpage.background.video = url; + }); + // setVideo(URL.createObjectURL(file)); + } + }} + hidden + accept=".mp4" + multiple + type="file" + /> + } + sx={{ + height: "48px", + width: "48px", + }} + /> - {quiz.config.startpage.background.video ?