diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx
new file mode 100644
index 0000000..41a9ac4
--- /dev/null
+++ b/lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx
@@ -0,0 +1,72 @@
+import { Box } from "@mui/material";
+
+type StartPageMobileProps = {
+ quizHeaderBlock: JSX.Element;
+ quizMainBlock: JSX.Element;
+ backgroundBlock: JSX.Element | null;
+ startpageType: "standard" | "expanded" | "centered";
+};
+
+export const StartPageMobile = ({
+ quizHeaderBlock,
+ quizMainBlock,
+ backgroundBlock,
+ startpageType,
+}: StartPageMobileProps) => {
+ return (
+
+
+ {quizHeaderBlock}
+
+ {quizMainBlock}
+
+
+
+ {backgroundBlock}
+
+
+ );
+};
diff --git a/lib/components/ViewPublicationPage/StartPageViewPublication.tsx b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
similarity index 86%
rename from lib/components/ViewPublicationPage/StartPageViewPublication.tsx
rename to lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
index 0168f29..d38fb0d 100644
--- a/lib/components/ViewPublicationPage/StartPageViewPublication.tsx
+++ b/lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
@@ -1,573 +1,505 @@
-import {
- Box,
- Button,
- ButtonBase,
- Link,
- Paper,
- Typography,
- useTheme,
-} from "@mui/material";
-import { useUADevice } from "../../utils/hooks/useUADevice";
-import { notReachable } from "../../utils/notReachable";
-import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
-
-import { NameplateLogo } from "@icons/NameplateLogo";
-import { QuizStartpageAlignType, QuizStartpageType } from "@model/settingsData";
-import { useQuizData } from "@contexts/QuizDataContext";
-import { quizThemes } from "@utils/themes/Publication/themePublication";
-import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
-import { setCurrentQuizStep } from "@stores/quizView";
-
-import PenaLogo from "@icons/PenaLogo.png";
-
-export const StartPageViewPublication = () => {
- const theme = useTheme();
- const { settings } = useQuizData();
- const { isMobileDevice } = useUADevice();
- const isMobile = useRootContainerSize() < 700;
- const isTablet = useRootContainerSize() < 800;
-
- const handleCopyNumber = () => {
- navigator.clipboard.writeText(settings.cfg.info.phonenumber);
- };
- console.log(settings.cfg.startpage.background.type);
-
- const background =
- settings.cfg.startpage.background.type === "image" ? (
- settings.cfg.startpage.background.desktop ? (
- 
- ) : null
- ) : settings.cfg.startpage.background.type === "video" ? (
- settings.cfg.startpage.background.video ? (
-
- ) : null
- ) : null;
-
- return (
-
-
-
- 
-
- {settings.cfg.info.orgname}
-
-
-
- }
- quizMainBlock={
- <>
-
-
- {settings.name}
-
-
- {settings.cfg.startpage.description}
-
-
-
-
-
-
-
-
- {settings.cfg.info.site && (
-
-
- {settings.cfg.info.site}
-
-
- )}
- {settings.cfg.info.clickable ? (
- isMobileDevice ? (
-
-
- {settings.cfg.info.phonenumber}
-
-
- ) : (
-
-
- {settings.cfg.info.phonenumber}
-
-
- )
- ) : (
-
- {settings.cfg.info.phonenumber}
-
- )}
-
- {settings.cfg.info.law}
-
-
-
-
-
-
- Сделано на PenaQuiz
-
-
-
-
- }
- backgroundBlock={background}
- startpageType={settings.cfg.startpageType}
- alignType={settings.cfg.startpage.position}
- />
-
- );
-};
-
-function QuizPreviewLayoutByType({
- quizHeaderBlock,
- quizMainBlock,
- backgroundBlock,
- startpageType,
- alignType,
-}: {
- quizHeaderBlock: JSX.Element;
- quizMainBlock: JSX.Element;
- backgroundBlock: JSX.Element | null;
- startpageType: QuizStartpageType;
- alignType: QuizStartpageAlignType;
-}) {
- const isTablet = useRootContainerSize() < 1100;
- const isMobile = useRootContainerSize() < 700;
-
- function StartPageMobile() {
- return (
-
-
- {quizHeaderBlock}
-
- {quizMainBlock}
-
-
-
- {backgroundBlock}
-
-
- );
- }
-
- switch (startpageType) {
- case null:
- case "standard": {
- return (
- <>
- {isMobile ? (
-
- ) : (
-
-
- {quizHeaderBlock}
- {quizMainBlock}
-
-
-
- {backgroundBlock}
-
-
- )}
-
- );
- }
- case "expanded": {
- return (
- <>
- {isMobile ? (
-
- ) : (
-
-
-
- {quizHeaderBlock}
- {quizMainBlock}
-
-
-
- {backgroundBlock}
-
-
- )}
-
- );
- }
- case "centered": {
- return (
- <>
- {isMobile ? (
-
- ) : (
-
- {quizHeaderBlock}
- {backgroundBlock && (
- img": { width: "100%", borderRadius: "12px" },
- }}
- >
- {backgroundBlock}
-
- )}
- {quizMainBlock}
-
- )}
-
- );
- }
- default:
- notReachable(startpageType);
- }
-}
-
-const startpageAlignTypeToJustifyContent: Record<
- QuizStartpageAlignType,
- "start" | "center" | "end"
-> = {
- left: "start",
- center: "center",
- right: "end",
-};
+import {
+ Box,
+ Button,
+ ButtonBase,
+ Link,
+ Paper,
+ Typography,
+ useTheme,
+} from "@mui/material";
+import { useUADevice } from "../../../utils/hooks/useUADevice";
+import { notReachable } from "../../../utils/notReachable";
+import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";
+
+import { NameplateLogo } from "@icons/NameplateLogo";
+import { QuizStartpageAlignType, QuizStartpageType } from "@model/settingsData";
+import { useQuizData } from "@contexts/QuizDataContext";
+import { quizThemes } from "@utils/themes/Publication/themePublication";
+import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
+import { setCurrentQuizStep } from "@stores/quizView";
+import { StartPageMobile } from "./StartPageMobile";
+
+import PenaLogo from "@icons/PenaLogo.png";
+
+export const StartPageViewPublication = () => {
+ const theme = useTheme();
+ const { settings } = useQuizData();
+ const { isMobileDevice } = useUADevice();
+ const isMobile = useRootContainerSize() < 700;
+ const isTablet = useRootContainerSize() < 800;
+
+ const handleCopyNumber = () => {
+ navigator.clipboard.writeText(settings.cfg.info.phonenumber);
+ };
+
+ const background =
+ settings.cfg.startpage.background.type === "image" ? (
+ settings.cfg.startpage.background.desktop ? (
+
+ ) : null
+ ) : settings.cfg.startpage.background.type === "video" ? (
+ settings.cfg.startpage.background.video ? (
+
+ ) : null
+ ) : null;
+
+ return (
+
+
+
+
+
+ {settings.cfg.info.orgname}
+
+
+
+ }
+ quizMainBlock={
+ <>
+
+
+ {settings.name}
+
+
+ {settings.cfg.startpage.description}
+
+
+
+
+
+
+
+
+ {settings.cfg.info.site && (
+
+
+ {settings.cfg.info.site}
+
+
+ )}
+ {settings.cfg.info.clickable ? (
+ isMobileDevice ? (
+
+
+ {settings.cfg.info.phonenumber}
+
+
+ ) : (
+
+
+ {settings.cfg.info.phonenumber}
+
+
+ )
+ ) : (
+
+ {settings.cfg.info.phonenumber}
+
+ )}
+
+ {settings.cfg.info.law}
+
+
+
+
+
+
+ Сделано на PenaQuiz
+
+
+
+
+ }
+ backgroundBlock={background}
+ startpageType={settings.cfg.startpageType}
+ alignType={settings.cfg.startpage.position}
+ />
+
+ );
+};
+
+function QuizPreviewLayoutByType({
+ quizHeaderBlock,
+ quizMainBlock,
+ backgroundBlock,
+ startpageType,
+ alignType,
+}: {
+ quizHeaderBlock: JSX.Element;
+ quizMainBlock: JSX.Element;
+ backgroundBlock: JSX.Element | null;
+ startpageType: QuizStartpageType;
+ alignType: QuizStartpageAlignType;
+}) {
+ const isTablet = useRootContainerSize() < 1100;
+ const isMobile = useRootContainerSize() < 700;
+
+ switch (startpageType) {
+ case null:
+ case "standard": {
+ return (
+ <>
+ {isMobile ? (
+
+ ) : (
+
+
+ {quizHeaderBlock}
+ {quizMainBlock}
+
+
+
+ {backgroundBlock}
+
+
+ )}
+
+ );
+ }
+ case "expanded": {
+ return (
+ <>
+ {isMobile ? (
+
+ ) : (
+
+
+
+ {quizHeaderBlock}
+ {quizMainBlock}
+
+
+
+ {backgroundBlock}
+
+
+ )}
+
+ );
+ }
+ case "centered": {
+ return (
+ <>
+ {isMobile ? (
+
+ ) : (
+
+ {quizHeaderBlock}
+ {backgroundBlock && (
+ img": { width: "100%", borderRadius: "12px" },
+ }}
+ >
+ {backgroundBlock}
+
+ )}
+ {quizMainBlock}
+
+ )}
+
+ );
+ }
+ default:
+ notReachable(startpageType);
+ }
+}
diff --git a/lib/components/ViewPublicationPage/ViewPublicationPage.tsx b/lib/components/ViewPublicationPage/ViewPublicationPage.tsx
index 952be31..84ac8d1 100644
--- a/lib/components/ViewPublicationPage/ViewPublicationPage.tsx
+++ b/lib/components/ViewPublicationPage/ViewPublicationPage.tsx
@@ -11,88 +11,94 @@ import { Question } from "./Question";
import { ResultForm } from "./ResultForm";
import { StartPageViewPublication } from "./StartPageViewPublication";
-
export default function ViewPublicationPage() {
- const { settings, recentlyCompleted } = useQuizData();
- let currentQuizStep = useQuizViewStore(state => state.currentQuizStep);
- const isMobileMini = useRootContainerSize() < 382;
- const {
- currentQuestion,
- currentQuestionStepNumber,
- isNextButtonEnabled,
- isPreviousButtonEnabled,
- moveToPrevQuestion,
- moveToNextQuestion,
- showResultAfterContactForm,
- } = useQuestionFlowControl();
+ const { settings, recentlyCompleted } = useQuizData();
+ let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep);
+ const isMobileMini = useRootContainerSize() < 382;
+ const {
+ currentQuestion,
+ currentQuestionStepNumber,
+ isNextButtonEnabled,
+ isPreviousButtonEnabled,
+ moveToPrevQuestion,
+ moveToNextQuestion,
+ showResultAfterContactForm,
+ } = useQuestionFlowControl();
- useEffect(function setFaviconAndTitle() {
- const link = document.querySelector('link[rel="icon"]');
- if (link && settings.cfg.startpage.favIcon) {
- link.setAttribute("href", settings.cfg.startpage.favIcon);
- }
+ useEffect(
+ function setFaviconAndTitle() {
+ const link = document.querySelector('link[rel="icon"]');
+ if (link && settings.cfg.startpage.favIcon) {
+ link.setAttribute("href", settings.cfg.startpage.favIcon);
+ }
- document.title = settings.name;
- }, [settings]);
+ document.title = settings.name;
+ },
+ [settings]
+ );
- if (recentlyCompleted) throw new Error("Quiz already completed");
- if (currentQuizStep === "startpage" && settings.cfg.noStartPage) currentQuizStep = "question";
+ if (recentlyCompleted) throw new Error("Quiz already completed");
+ if (currentQuizStep === "startpage" && settings.cfg.noStartPage)
+ currentQuizStep = "question";
- let quizStepElement: ReactElement;
- switch (currentQuizStep) {
- case "startpage": {
- quizStepElement = ;
- break;
- }
- case "question": {
- if (currentQuestion.type === "result") {
- quizStepElement = ;
- break;
- }
-
- quizStepElement = (
-
- {isMobileMini ? "←" : "← Назад"}
-
- }
- nextButton={
-
- }
- />
- );
- break;
- }
- case "contactform": {
- quizStepElement = (
-
- );
- break;
- }
- default: notReachable(currentQuizStep);
+ let quizStepElement: ReactElement;
+ switch (currentQuizStep) {
+ case "startpage": {
+ quizStepElement = ;
+ break;
}
+ case "question": {
+ if (currentQuestion.type === "result") {
+ quizStepElement = ;
+ break;
+ }
- return (
-
- {quizStepElement}
-
- );
-}
+ quizStepElement = (
+
+ {isMobileMini ? "←" : "← Назад"}
+
+ }
+ nextButton={
+
+ }
+ />
+ );
+ break;
+ }
+ case "contactform": {
+ quizStepElement = (
+
+ );
+ break;
+ }
+ default:
+ notReachable(currentQuizStep);
+ }
+
+ return (
+
+ {quizStepElement}
+
+ );
+}