diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx
index c1b0d330..69546533 100755
--- a/src/pages/startPage/StartPageSettings.tsx
+++ b/src/pages/startPage/StartPageSettings.tsx
@@ -64,11 +64,11 @@ export default function StartPageSettings() {
const [mobileVersion, setMobileVersion] = useState(false);
if (!quiz) return null; // TODO throw and catch with error boundary
-
+
const MobileVersionHC = (bool: boolean) => {
setMobileVersion(bool);
};
-
+
const designType = quiz?.config?.startpageType;
const favIconDropZoneElement = (
@@ -475,36 +475,37 @@ export default function StartPageSettings() {
>
Расположение элементов
-
- updateQuiz(quiz.id, quiz => {
- quiz.config.startpage.position = "left";
- })}
- isActive={quiz.config.startpage.position === "left"}
- Icon={AlignLeftIcon}
- />
- updateQuiz(quiz.id, quiz => {
- quiz.config.startpage.position = "center";
- })}
- isActive={quiz.config.startpage.position === "center"}
- Icon={AlignCenterIcon}
- sx={{ display: designType === "centered" ? "flex" : "none" }}
- />
- updateQuiz(quiz.id, quiz => {
- quiz.config.startpage.position = "right";
- })}
- isActive={quiz.config.startpage.position === "right"}
- Icon={AlignRightIcon}
- />
-
-
+ {designType !== "centered" &&
+
+ updateQuiz(quiz.id, quiz => {
+ quiz.config.startpage.position = "left";
+ })}
+ isActive={quiz.config.startpage.position === "left"}
+ Icon={AlignLeftIcon}
+ />
+ updateQuiz(quiz.id, quiz => {
+ quiz.config.startpage.position = "center";
+ })}
+ isActive={quiz.config.startpage.position === "center"}
+ Icon={AlignCenterIcon}
+ sx={{ display: designType === "standard" ? "none" : "flex" }}
+ />
+ updateQuiz(quiz.id, quiz => {
+ quiz.config.startpage.position = "right";
+ })}
+ isActive={quiz.config.startpage.position === "right"}
+ Icon={AlignRightIcon}
+ />
+
+ }
{(isTablet || !isSmallMonitor) && (
<>
{
+ navigator.clipboard.writeText(quiz.config.info.phonenumber);
+ };
+
+ const background = quiz.config.startpage.background.type === "image"
+ ? quiz.config.startpage.background.desktop
+ ? (
+ 
+ )
+ : null
+ : quiz.config.startpage.background.type === "video"
+ ? quiz.config.startpage.background.video
+ ? (
+
+ )
+ : null
+ : null;
return (
-
-
+
-
+ alignItems: "center",
+ gap: "20px",
+ }}>
{quiz.config.startpage.logo && (
-
+ }
+ quizMainBlock={<>
+
{quiz.name}
{quiz.config.startpage.description}
@@ -89,42 +95,146 @@ export default function QuizPreviewLayout() {
padding: "10px 15px",
}}
>
- {quiz.config.startpage.button ? quiz.config.startpage.button : "Пройти тест"}
+ {quiz.config.startpage.button.trim() ? quiz.config.startpage.button : "Пройти тест"}
-
- {quiz.config.info.phonenumber}
-
+ {quiz.config.info.clickable ? (
+ isMobileDevice ? (
+
+
+ {quiz.config.info.phonenumber}
+
+
+ ) : (
+
+
+ {quiz.config.info.phonenumber}
+
+
+ )
+ ) : (
+
+ {quiz.config.info.phonenumber}
+
+ )}
{quiz.config.info.law}
-
- {!isTablet && isMediaFileExist && (
-
- {quiz.config.startpage.background.type === "image" &&
- quiz.config.startpage.background.desktop && (
-
- )}
- {quiz.config.startpage.background.type === "video" &&
- quiz.config.startpage.background.video && (
-
- )}
-
- )}
-
+ }
+ backgroundBlock={background}
+ startpageType={quiz.config.startpageType}
+ alignType={quiz.config.startpage.position}
+ />
);
}
+
+function QuizPreviewLayoutByType({ quizHeaderBlock, quizMainBlock, backgroundBlock, startpageType, alignType }: {
+ quizHeaderBlock: JSX.Element;
+ quizMainBlock: JSX.Element;
+ backgroundBlock: JSX.Element | null;
+ startpageType: QuizStartpageType;
+ alignType: QuizStartpageAlignType;
+}) {
+ const theme = useTheme();
+ const isTablet = useMediaQuery(theme.breakpoints.down(630));
+
+ switch (startpageType) {
+ case null:
+ case "standard": {
+ return (
+
+
+ {quizHeaderBlock}
+ {quizMainBlock}
+
+
+ {backgroundBlock}
+
+
+ );
+ }
+ case "expanded": {
+ return (
+
+
+ {quizHeaderBlock}
+ {quizMainBlock}
+
+
+ {backgroundBlock}
+
+
+ );
+ }
+ case "centered": {
+ return (
+
+ {quizHeaderBlock}
+ {backgroundBlock &&
+
+ {backgroundBlock}
+
+ }
+ {quizMainBlock}
+
+ );
+ }
+ default: notReachable(startpageType);
+ }
+}
+
+const startpageAlignTypeToJustifyContent: Record = {
+ left: "start",
+ center: "center",
+ right: "end",
+};
diff --git a/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx b/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx
index 6f43440f..5e83bf19 100644
--- a/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx
+++ b/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx
@@ -17,6 +17,7 @@ export default function YoutubeEmbedIframe({ videoUrl }: Props) {
{
topLeft: {
top: "-1px",
left: "-1px",
+ zIndex: 100,
},
}}
style={{
diff --git a/src/utils/hooks/useUADevice.ts b/src/utils/hooks/useUADevice.ts
new file mode 100644
index 00000000..d50db9eb
--- /dev/null
+++ b/src/utils/hooks/useUADevice.ts
@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+
+export function useUADevice(): { isMobileDevice: boolean; } {
+ const [isMobileDevice, setIsMobileDevice] = useState(false);
+
+ useEffect(() => {
+ const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+
+ setIsMobileDevice(isMobile);
+ }, [navigator.userAgent]);
+
+ return { isMobileDevice };
+}