diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx index 62a9a75..7375631 100644 --- a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx +++ b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx @@ -1,16 +1,16 @@ -import { Box } from "@mui/material"; +import {Box} from "@mui/material"; -import { useRootContainerSize } from "@contexts/RootContainerWidthContext"; -import { useQuizData } from "@contexts/QuizDataContext"; +import {useRootContainerSize} from "@contexts/RootContainerWidthContext"; +import {useQuizData} from "@contexts/QuizDataContext"; -import { notReachable } from "@utils/notReachable"; -import { quizThemes } from "@utils/themes/Publication/themePublication"; +import {notReachable} from "@utils/notReachable"; +import {quizThemes} from "@utils/themes/Publication/themePublication"; import type { QuizStartpageAlignType, QuizStartpageType, } from "@model/settingsData"; -import { DESIGN_LIST } from "@/utils/designList"; +import {DESIGN_LIST} from "@/utils/designList"; type StartPageDesktopProps = { quizHeaderBlock: JSX.Element; @@ -28,6 +28,7 @@ const StandartLayout = ({ quizMainBlock, backgroundBlock, }: LayoutProps) => { + const isTablet = useRootContainerSize() < 1100; const { settings } = useQuizData(); return ( @@ -47,6 +48,7 @@ const StandartLayout = ({ width: 0, }, overflowY: "auto", + padding: isTablet ? "15px" : "0", }} > {settings.cfg.startpage.background.desktop && ( - {backgroundBlock} + img": { width: "100%", borderRadius: "12px" }, + }} + >{backgroundBlock} )} ); @@ -89,8 +100,14 @@ const ExpandedLayout = ({ - {quizHeaderBlock} + {alignType !== "center" && quizHeaderBlock} {quizMainBlock} diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx index a3e7769..166465f 100644 --- a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx +++ b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx @@ -1,12 +1,12 @@ -import { Box } from "@mui/material"; +import {Box} from "@mui/material"; -import { useQuizData } from "@contexts/QuizDataContext"; +import {useQuizData} from "@contexts/QuizDataContext"; -import { notReachable } from "@utils/notReachable"; -import { quizThemes } from "@utils/themes/Publication/themePublication"; +import {notReachable} from "@utils/notReachable"; +import {quizThemes} from "@utils/themes/Publication/themePublication"; -import type { QuizStartpageType } from "@model/settingsData"; -import { DESIGN_LIST } from "@/utils/designList"; +import type {QuizStartpageType} from "@model/settingsData"; +import {DESIGN_LIST} from "@/utils/designList"; type StartPageMobileProps = { quizHeaderBlock: JSX.Element; @@ -28,7 +28,7 @@ const StandartMobileLayout = ({ + {quizHeaderBlock} + + {settings.cfg.startpage.background.desktop && ( + + img": { width: "100%", borderRadius: "12px" }, + }} + > + {backgroundBlock} + + + )} - {settings.cfg.startpage.background.desktop && ( - {backgroundBlock} - )} ); }; @@ -118,7 +132,6 @@ const ExpandedMobileLayout = ({ "&::-webkit-scrollbar-thumb": { backgroundColor: "#b8babf" }, }} > - {quizHeaderBlock} + {quizHeaderBlock} {quizMainBlock} diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx index 836a6d3..b6f9a3b 100644 --- a/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx +++ b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx @@ -8,18 +8,18 @@ import { useTheme, } from "@mui/material"; -import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType"; +import {QuizPreviewLayoutByType} from "./QuizPreviewLayoutByType"; import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe"; -import { useQuizData } from "@contexts/QuizDataContext"; -import { useRootContainerSize } from "@contexts/RootContainerWidthContext"; +import {useQuizData} from "@contexts/QuizDataContext"; +import {useRootContainerSize} from "@contexts/RootContainerWidthContext"; -import { useUADevice } from "@utils/hooks/useUADevice"; -import { quizThemes } from "@utils/themes/Publication/themePublication"; +import {useUADevice} from "@utils/hooks/useUADevice"; +import {quizThemes} from "@utils/themes/Publication/themePublication"; -import { NameplateLogo } from "@icons/NameplateLogo"; -import { useQuizViewStore } from "@/stores/quizView"; -import { DESIGN_LIST } from "@/utils/designList"; +import {NameplateLogo} from "@icons/NameplateLogo"; +import {useQuizViewStore} from "@/stores/quizView"; +import {DESIGN_LIST} from "@/utils/designList"; export const StartPageViewPublication = () => { const theme = useTheme(); @@ -82,6 +82,48 @@ export const StartPageViewPublication = () => { ) : null ) : null; + const quizHeaderBlock = ( + + {settings.cfg.startpage.logo && + + } + + {settings.cfg.info.orgname} + + + ) + const realQuestionsCount = questions.filter((question) => question.type !== null && question.type !== "result").length; return ( @@ -104,48 +146,7 @@ export const StartPageViewPublication = () => { }} > - - {settings.cfg.startpage.logo && - - } - - {settings.cfg.info.orgname} - - - + quizHeaderBlock={quizHeaderBlock } quizMainBlock={ <> @@ -164,12 +165,13 @@ export const StartPageViewPublication = () => { : "start" : "start", marginTop: "28px", - width: "100%", + width:settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile? "50%" : settings.cfg.startpageType === "centered" && !isMobile? "50%" : "100%", }} > { { variant="contained" disabled={realQuestionsCount === 0} sx={{ + fontFamily: "Helvetica Neue", fontSize: "18px", - padding: "10px 30px", + padding: "10px 20px", width: "auto", background: theme.palette.primary.main, + borderRadius: "12px", }} onClick={() => setCurrentQuizStep("question")} > @@ -229,11 +235,10 @@ export const StartPageViewPublication = () => { : "Пройти тест"} - + { : 0, gap: "20px", alignItems: "flex-end", - justifyContent: "space-between", + justifyContent: settings.cfg.startpageType === "centered" && isMobile? "center" :"space-between", width: "100%", - flexWrap: "wrap", + flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "nowrap" :"wrap", }} > - + {settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"&& !isMobile && quizHeaderBlock} + {settings.cfg.info.site && ( - + { { { ) : ( { )}