diff --git a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx index 01da051a..33b8ad76 100644 --- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx +++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx @@ -147,7 +147,7 @@ export const AnswerItem = ({ style={{ color: "#9A9AAF", fontSize: "30px" }} /> - {additionalContent} + {icon && icon} ), endAdornment: ( @@ -166,13 +166,11 @@ export const AnswerItem = ({ /> - {additionalMobile} )} diff --git a/src/pages/Questions/DataOptions/DataOptions.tsx b/src/pages/Questions/DataOptions/DataOptions.tsx index a25b260f..ec5bc20d 100644 --- a/src/pages/Questions/DataOptions/DataOptions.tsx +++ b/src/pages/Questions/DataOptions/DataOptions.tsx @@ -43,7 +43,7 @@ export default function DataOptions({ totalIndex }: Props) { gap: isMobile ? "18px" : "20px", }} > - + { @@ -67,7 +67,7 @@ export default function DataOptions({ totalIndex }: Props) { Использовать маску - + @@ -92,9 +92,13 @@ export default function SettingsData({ totalIndex }: SettingsDataProps) { }); }} /> - + { diff --git a/src/pages/Questions/DraggableList/QuestionPageCard.tsx b/src/pages/Questions/DraggableList/QuestionPageCard.tsx index ddcf5acb..8da7a88a 100644 --- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx +++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx @@ -120,7 +120,7 @@ export default function QuestionsPageCard({ totalIndex, draggableProps, isDraggi display: "flex", alignItems: "center", justifyContent: "space-between", - padding: isTablet ? (isMobile ? "20px 20px 0px 20px" : "20px 10px 20px 20px ") : "20px 10px 20px 20px", + padding: isTablet ? (isMobile ? "10px 20px 0px 20px" : "20px 10px 20px 20px ") : "20px 10px 20px 20px", flexDirection: isMobile ? "column-reverse" : null, }} > @@ -243,9 +243,7 @@ export default function QuestionsPageCard({ totalIndex, draggableProps, isDraggi onClick={() => { const removedId = listQuestions[quizId][totalIndex].id; if (listQuestions[quizId][totalIndex].deleteTimeoutId) { - clearTimeout( - listQuestions[quizId][totalIndex].deleteTimeoutId - ); + clearTimeout(listQuestions[quizId][totalIndex].deleteTimeoutId); } removeQuestion(quizId, totalIndex); diff --git a/src/pages/Questions/DropDown/DropDown.tsx b/src/pages/Questions/DropDown/DropDown.tsx index 5113ccca..83e3e837 100644 --- a/src/pages/Questions/DropDown/DropDown.tsx +++ b/src/pages/Questions/DropDown/DropDown.tsx @@ -59,7 +59,7 @@ export default function DropDown({ totalIndex }: Props) { sx={{ display: "flex", alignItems: "center", - marginBottom: "17px", + marginBottom: "20px", }} > - + ); diff --git a/src/pages/Questions/DropDown/settingDropDown.tsx b/src/pages/Questions/DropDown/settingDropDown.tsx index cdc28e09..ab90697f 100644 --- a/src/pages/Questions/DropDown/settingDropDown.tsx +++ b/src/pages/Questions/DropDown/settingDropDown.tsx @@ -116,8 +116,8 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) { pr: isFigmaTablte ? "19px" : "20px", display: "flex", flexDirection: "column", - gap: isMobile ? "13px" : "14px", - width: "100%", + gap: "14px", + width: isMobile ? "auto" : "100%", }} > - + { @@ -169,7 +168,7 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) { ("setting"); const [open, setOpen] = useState(false); - const [anchorElement, setAnchorElement] = useState( - null - ); + const [anchorElement, setAnchorElement] = useState(null); const [currentIndex, setCurrentIndex] = useState(0); const { listQuestions } = questionStore(); const quizId = Number(useParams().quizId); @@ -183,9 +181,7 @@ export default function Emoji({ totalIndex }: Props) { { setOpen(false); - const cloneVariants = [ - ...listQuestions[quizId][totalIndex].content.variants, - ]; + const cloneVariants = [...listQuestions[quizId][totalIndex].content.variants]; cloneVariants[currentIndex] = { ...cloneVariants[currentIndex], @@ -201,7 +197,7 @@ export default function Emoji({ totalIndex }: Props) { }} /> - + - + ); diff --git a/src/pages/Questions/Emoji/settingEmoji.tsx b/src/pages/Questions/Emoji/settingEmoji.tsx index 6732d8b4..028f58ee 100644 --- a/src/pages/Questions/Emoji/settingEmoji.tsx +++ b/src/pages/Questions/Emoji/settingEmoji.tsx @@ -77,8 +77,8 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) { pr: isFigmaTablte ? "30px" : "20px", display: "flex", flexDirection: "column", - gap: isMobile ? "13px" : "14px", - width: "100%", + gap: "14px", + width: isMobile ? "auto" : "100%", }} > @@ -94,9 +94,13 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) { }); }} /> - + { diff --git a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx index aea79644..8ab4624d 100644 --- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx +++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx @@ -63,19 +63,6 @@ export default function OptionsAndPicture({ totalIndex }: Props) { } }; - const addNewAnswer = () => { - const answerNew = - listQuestions[quizId][totalIndex].content.variants.slice(); - answerNew.push({ answer: "", hints: "", emoji: "", image: "" }); - - updateQuestionsList(quizId, totalIndex, { - content: { - ...listQuestions[quizId][totalIndex].content, - variants: answerNew, - }, - }); - }; - return ( <> @@ -363,7 +350,32 @@ export default function OptionsAndPicture({ totalIndex }: Props) { backgroundColor: "#7E2AEA", }} > - + + + + + + + )} diff --git a/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx b/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx index 74fe9b1a..e9a27341 100644 --- a/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx +++ b/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx @@ -46,7 +46,7 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP > { diff --git a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx index 2d824220..6e89c368 100644 --- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx +++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx @@ -6,7 +6,7 @@ import { Typography, Button, useTheme, - useMediaQuery, + useMediaQuery } from "@mui/material"; import ButtonsOptions from "../ButtonsOptions"; @@ -31,6 +31,7 @@ export default function OptionsPicture({ totalIndex }: Props) { const [currentIndex, setCurrentIndex] = useState(0); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(790)); + const isTablet = useMediaQuery(theme.breakpoints.down(790)); const quizId = Number(useParams().quizId); const [switchState, setSwitchState] = useState("setting"); const { listQuestions } = questionStore(); @@ -235,15 +236,8 @@ export default function OptionsPicture({ totalIndex }: Props) { )} - - + + ); } diff --git a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx index 3463c4e8..e50b87c0 100644 --- a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx +++ b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx @@ -227,6 +227,7 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP Настройки вопросов @@ -246,6 +247,7 @@ export default function SettingOpytionsPict({ totalIndex }: SettingOpytionsPictP }} > diff --git a/src/pages/Questions/OwnTextField/OwnTextField.tsx b/src/pages/Questions/OwnTextField/OwnTextField.tsx index 504a9964..41f75fb3 100644 --- a/src/pages/Questions/OwnTextField/OwnTextField.tsx +++ b/src/pages/Questions/OwnTextField/OwnTextField.tsx @@ -39,7 +39,7 @@ export default function OwnTextField({ totalIndex }: Props) { width: "auto", maxWidth: "745px", display: "flex", - pb: "15px", + pb: "20px", pl: "20px", pr: "20px", flexDirection: "column", @@ -50,9 +50,9 @@ export default function OwnTextField({ totalIndex }: Props) { placeholder={"Пример ответа"} text={listQuestions[quizId][totalIndex].content.placeholder} onChange={({ target }) => debounced(target.value)} - sx={{ maxWidth: isFigmaTablte ? "549px" : "640px", width: "100%" }} + sx={{ maxWidth: isFigmaTablte ? "549px" : "640px", width: "100%", mt: isMobile ? "15px" : "0px" }} /> - + Настройки вопросов { @@ -127,7 +131,11 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps) }} /> { @@ -136,9 +144,14 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps) }); }} /> - + { diff --git a/src/pages/Questions/PageOptions/PageOptions.tsx b/src/pages/Questions/PageOptions/PageOptions.tsx index 40a6c17a..23a3fe5f 100644 --- a/src/pages/Questions/PageOptions/PageOptions.tsx +++ b/src/pages/Questions/PageOptions/PageOptions.tsx @@ -52,13 +52,14 @@ export default function PageOptions({ disableInput, totalIndex }: Props) { gap: isMobile ? "25px" : "20px", }} > - + debounced(target.value)} /> + {isMobile ? ( - + + + + + + + + + ) : ( {isMobile ? ( - + + + + + + + + + ) : ( Настройки вопроса - + diff --git a/src/pages/Questions/SliderOptions/SliderOptions.tsx b/src/pages/Questions/SliderOptions/SliderOptions.tsx index d4e27796..7c4aedb7 100644 --- a/src/pages/Questions/SliderOptions/SliderOptions.tsx +++ b/src/pages/Questions/SliderOptions/SliderOptions.tsx @@ -31,30 +31,34 @@ export default function SliderOptions({ totalIndex }: Props) { maxWidth: "673.8px", display: "flex", pl: "20px", - pr: "20px", + pr: isMobile ? "13px" : "20px", pb: isMobile ? "30px" : "20px", flexDirection: "column", - gap: "20px", + gap: isMobile ? "25px" : "20px", }} > - + Выбор значения из диапазона - + { const clonContent = listQuestions[quizId][totalIndex].content; - clonContent.range = `${target.value}—${ - listQuestions[quizId][totalIndex].content.range.split("—")[1] - }`; + clonContent.range = `${target.value}—${listQuestions[quizId][totalIndex].content.range.split("—")[1]}`; updateQuestionsList(quizId, totalIndex, { content: clonContent, }); @@ -62,16 +66,12 @@ export default function SliderOptions({ totalIndex }: Props) { onBlur={({ target }) => { const start = listQuestions[quizId][totalIndex].content.start; const min = Number(target.value); - const max = Number( - listQuestions[quizId][totalIndex].content.range.split("—")[1] - ); + const max = Number(listQuestions[quizId][totalIndex].content.range.split("—")[1]); if (min >= max) { const clonContent = listQuestions[quizId][totalIndex].content; clonContent.range = `${max - 1 >= 0 ? max - 1 : 0}—${ - listQuestions[quizId][totalIndex].content.range.split( - "—" - )[1] + listQuestions[quizId][totalIndex].content.range.split("—")[1] }`; updateQuestionsList(quizId, totalIndex, { content: clonContent, @@ -94,14 +94,10 @@ export default function SliderOptions({ totalIndex }: Props) { placeholder={"100"} min={0} max={100} - value={ - listQuestions[quizId][totalIndex].content.range.split("—")[1] - } + value={listQuestions[quizId][totalIndex].content.range.split("—")[1]} onChange={({ target }) => { const clonContent = listQuestions[quizId][totalIndex].content; - clonContent.range = `${ - listQuestions[quizId][totalIndex].content.range.split("—")[0] - }—${target.value}`; + clonContent.range = `${listQuestions[quizId][totalIndex].content.range.split("—")[0]}—${target.value}`; updateQuestionsList(quizId, totalIndex, { content: clonContent, }); @@ -109,19 +105,15 @@ export default function SliderOptions({ totalIndex }: Props) { onBlur={({ target }) => { const start = listQuestions[quizId][totalIndex].content.start; const step = listQuestions[quizId][totalIndex].content.step; - const min = Number( - listQuestions[quizId][totalIndex].content.range.split("—")[0] - ); + const min = Number(listQuestions[quizId][totalIndex].content.range.split("—")[0]); const max = Number(target.value); const range = max - min; if (max <= min) { const clonContent = listQuestions[quizId][totalIndex].content; - clonContent.range = `${ - listQuestions[quizId][totalIndex].content.range.split( - "—" - )[0] - }—${min + 1 >= 100 ? 100 : min + 1}`; + clonContent.range = `${listQuestions[quizId][totalIndex].content.range.split("—")[0]}—${ + min + 1 >= 100 ? 100 : min + 1 + }`; updateQuestionsList(quizId, totalIndex, { content: clonContent, }); @@ -145,11 +137,7 @@ export default function SliderOptions({ totalIndex }: Props) { }); if (range % step) { - setStepError( - `Шаг должен делить без остатка диапазон ${max} - ${min} = ${ - max - min - }` - ); + setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`); } else { setStepError(""); } @@ -168,18 +156,14 @@ export default function SliderOptions({ totalIndex }: Props) { }} > - + Начальное значение { const clonContent = listQuestions[quizId][totalIndex].content; @@ -216,12 +200,8 @@ export default function SliderOptions({ totalIndex }: Props) { }); }} onBlur={({ target }) => { - const min = Number( - listQuestions[quizId][totalIndex].content.range.split("—")[0] - ); - const max = Number( - listQuestions[quizId][totalIndex].content.range.split("—")[1] - ); + const min = Number(listQuestions[quizId][totalIndex].content.range.split("—")[0]); + const max = Number(listQuestions[quizId][totalIndex].content.range.split("—")[1]); const range = max - min; const step = Number(target.value); @@ -235,11 +215,7 @@ export default function SliderOptions({ totalIndex }: Props) { } if (range % step) { - setStepError( - `Шаг должен делить без остатка диапазон ${max} - ${min} = ${ - max - min - }` - ); + setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`); } else { setStepError(""); } @@ -248,11 +224,7 @@ export default function SliderOptions({ totalIndex }: Props) { - + ); diff --git a/src/pages/Questions/SliderOptions/settingSlider.tsx b/src/pages/Questions/SliderOptions/settingSlider.tsx index e4bf757e..91e50911 100644 --- a/src/pages/Questions/SliderOptions/settingSlider.tsx +++ b/src/pages/Questions/SliderOptions/settingSlider.tsx @@ -34,19 +34,23 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { Настройки ползунка { @@ -64,15 +68,15 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { pr: isFigmaTablte ? (isMobile ? "20px" : "12px") : "20px", display: "flex", flexDirection: "column", - gap: isMobile ? "13px" : "14px", - width: "100%", + gap: "14px", + width: isMobile ? "auto" : "100%", }} > Настройки вопросов { @@ -85,11 +89,15 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) { sx={{ width: isMobile ? "90%" : "auto", display: "flex", - alignItems: "center", + alignItems: "flex-start", }} > { diff --git a/src/pages/Questions/UploadFile/UploadFile.tsx b/src/pages/Questions/UploadFile/UploadFile.tsx index 73680c4e..419d2ad9 100644 --- a/src/pages/Questions/UploadFile/UploadFile.tsx +++ b/src/pages/Questions/UploadFile/UploadFile.tsx @@ -71,7 +71,7 @@ export default function UploadFile({ totalIndex }: Props) { flexDirection: "column", }} > - + Настройки вопроса { @@ -49,7 +50,7 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) { }} /> { @@ -58,9 +59,9 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) { }); }} /> - + { diff --git a/src/pages/Questions/answerOptions/AnswerOptions.tsx b/src/pages/Questions/answerOptions/AnswerOptions.tsx index 7c04e8d5..b488b628 100755 --- a/src/pages/Questions/answerOptions/AnswerOptions.tsx +++ b/src/pages/Questions/answerOptions/AnswerOptions.tsx @@ -92,11 +92,7 @@ export default function AnswerOptions({ totalIndex }: Props) { )} - + ); diff --git a/src/pages/Questions/answerOptions/responseSettings.tsx b/src/pages/Questions/answerOptions/responseSettings.tsx index e56e236b..bc0d4709 100644 --- a/src/pages/Questions/answerOptions/responseSettings.tsx +++ b/src/pages/Questions/answerOptions/responseSettings.tsx @@ -15,6 +15,7 @@ export default function ResponseSettings({ totalIndex }: Props) { const { listQuestions } = questionStore(); const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down(900)); + const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); const isMobile = useMediaQuery(theme.breakpoints.down(790)); const debounced = useDebouncedCallback((value) => { @@ -86,11 +87,11 @@ export default function ResponseSettings({ totalIndex }: Props) { sx={{ pt: isMobile ? "0px" : "20px", pb: "20px", - pl: isFigmaTablte ? (isMobile ? "20px" : "34px") : "28px", + pl: isFigmaTablte ? (isTablet ? "20px" : "34px") : "28px", pr: isFigmaTablte ? "19px" : "20px", display: "flex", flexDirection: "column", - gap: isMobile ? "13px" : "14px", + gap: "14px", width: "100%", }} > @@ -125,14 +126,13 @@ export default function ResponseSettings({ totalIndex }: Props) { }); }} /> - {isMobile || - (!isFigmaTablte && ( - - - - - - ))} + {isMobile && ( + + + + + + )} {listQuestions[quizId][totalIndex].content.innerNameCheck && (