diff --git a/src/pages/Questions/QuestionSwitchWindowTool.tsx b/src/pages/Questions/QuestionSwitchWindowTool.tsx index 10f89bae..b0b4ab3c 100644 --- a/src/pages/Questions/QuestionSwitchWindowTool.tsx +++ b/src/pages/Questions/QuestionSwitchWindowTool.tsx @@ -13,11 +13,13 @@ import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions"; interface Props { openBranchingPage: boolean; setOpenBranchingPage: (a: boolean) => void; + widthMain: number; } export const QuestionSwitchWindowTool = ({ openBranchingPage, setOpenBranchingPage, + widthMain, }: Props) => { const { questions } = useQuestionsStore.getState(); const theme = useTheme(); @@ -54,6 +56,7 @@ export const QuestionSwitchWindowTool = ({ )} diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx index 5e16966b..115523de 100755 --- a/src/pages/Questions/QuestionsPage.tsx +++ b/src/pages/Questions/QuestionsPage.tsx @@ -32,11 +32,13 @@ import { useNavigate } from "react-router-dom"; interface Props { openBranchingPage: boolean; setOpenBranchingPage: (a: boolean) => void; + widthMain: number; } export default function QuestionsPage({ openBranchingPage, setOpenBranchingPage, + widthMain, }: Props) { const theme = useTheme(); const { openedModalSettingsId } = useUiTools(); @@ -86,6 +88,7 @@ export default function QuestionsPage({ void; + widthMain: number; } export const SwitchBranchingPanel = ({ openBranchingPage, setOpenBranchingPage, + widthMain, }: Props) => { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(660)); const isTablet = useMediaQuery(theme.breakpoints.down(1446)); - return openBranchingPage ? ( - {isTablet || ( + {widthMain > 1216 && ( (false); const [nextStep, setNextStep] = useState(0); @@ -94,6 +95,21 @@ export default function Main({ sidebar, header, footer, Page }: Props) { setCurrentStep(index); }; + const [widthMain, setWidthMain] = useState(null); + const mainBlock = useRef(0); + + const observer = useRef( + new ResizeObserver((entries) => { + const { width } = entries[0].contentRect; + setWidthMain(width); + }), + ); + + useEffect(() => { + observer.current.observe(mainBlock.current); + }, [mainBlock, observer]); + console.log(widthMain); + return ( <>
@@ -125,6 +141,7 @@ export default function Main({ sidebar, header, footer, Page }: Props) { }} > @@ -157,17 +175,19 @@ export default function Main({ sidebar, header, footer, Page }: Props) { }} > {isConditionMet && - (isBranchingLogic ? ( + (isBranchingLogicSmall ? ( - ) : ( + ) : widthMain < 1216 || !openBranchingPage ? ( + ) : ( + <> ))} {/* Кнопка тестового просмотра */} diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index b733aad7..39778e3f 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -45,10 +45,12 @@ import { checkQuestionHint } from "@utils/checkQuestionHint"; interface Props { openBranchingPage: boolean; setOpenBranchingPage: (a: boolean) => void; + widthMain: number; } export default function EditPage({ openBranchingPage, setOpenBranchingPage, + widthMain, }: Props) { const quiz = useCurrentQuiz(); const { editQuizId } = useQuizStore(); @@ -148,6 +150,7 @@ export default function EditPage({ quizStartPageType={quizConfig.startpageType} openBranchingPage={openBranchingPage} setOpenBranchingPage={setOpenBranchingPage} + widthMain={widthMain} /> )} diff --git a/src/ui_kit/switchStepPages.tsx b/src/ui_kit/switchStepPages.tsx index 5ab7229c..b2e87051 100755 --- a/src/ui_kit/switchStepPages.tsx +++ b/src/ui_kit/switchStepPages.tsx @@ -21,6 +21,7 @@ interface Props { quizResults: QuizResultsType; openBranchingPage: boolean; setOpenBranchingPage: (a: boolean) => void; + widthMain: number; } export default function SwitchStepPages({ @@ -30,6 +31,7 @@ export default function SwitchStepPages({ quizResults, openBranchingPage, setOpenBranchingPage, + widthMain, }: Props) { switch (activeStep) { case 0: { @@ -44,6 +46,7 @@ export default function SwitchStepPages({ ); case 2: