updated start page design
This commit is contained in:
aleksandr-raw
parent
d1c70c264d
commit
acb5354b1e
@ -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",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -73,7 +75,16 @@ const StandartLayout = ({
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
{settings.cfg.startpage.background.desktop && (
|
||||
<Box sx={{ width: "60%", overflow: "hidden" }}>{backgroundBlock}</Box>
|
||||
<Box sx={{ width: "60%", overflow: "hidden" }}><Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
padding: alignType === "left"? "25px 25px 25px 15px" : "25px 15px 25px 25px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
"& > img": { width: "100%", borderRadius: "12px" },
|
||||
}}
|
||||
>{backgroundBlock}</Box></Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
@ -89,8 +100,14 @@ const ExpandedLayout = ({
|
||||
<Box
|
||||
sx={{
|
||||
height: "100%",
|
||||
width: "40%",
|
||||
padding: "16px",
|
||||
width: alignType === "center"? "100%": "40%",
|
||||
display: "flex",
|
||||
padding:
|
||||
alignType === "center"
|
||||
? "30px 35px"
|
||||
: alignType === "left"
|
||||
? "25px 0 31px 35px"
|
||||
: "25px 35px 31px 0",
|
||||
margin:
|
||||
alignType === "center"
|
||||
? "0 auto"
|
||||
@ -106,9 +123,16 @@ const ExpandedLayout = ({
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "16px",
|
||||
minHeight: "calc(100% - 32px)",
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
|
||||
padding:
|
||||
alignType === "center"
|
||||
? "0"
|
||||
: alignType === "left"
|
||||
? "0 40px 0 0"
|
||||
: "0 0 0 40px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
@ -121,7 +145,7 @@ const ExpandedLayout = ({
|
||||
},
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{alignType !== "center" && quizHeaderBlock}
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@ -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 = ({
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column-reverse",
|
||||
flexDirection: "column",
|
||||
flexGrow: 1,
|
||||
justifyContent: "flex-end",
|
||||
minHeight: "100%",
|
||||
@ -65,7 +65,24 @@ const StandartMobileLayout = ({
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box sx={{marginBottom: "13px"}}>
|
||||
{quizHeaderBlock}
|
||||
</Box>
|
||||
{settings.cfg.startpage.background.desktop && (
|
||||
<Box sx={{ width: "100%", overflow: "hidden" }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
"& > img": { width: "100%", borderRadius: "12px" },
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
height: "80%",
|
||||
@ -79,9 +96,6 @@ const StandartMobileLayout = ({
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
{settings.cfg.startpage.background.desktop && (
|
||||
<Box sx={{ width: "100%", overflow: "hidden" }}>{backgroundBlock}</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@ -118,7 +132,6 @@ const ExpandedMobileLayout = ({
|
||||
"&::-webkit-scrollbar-thumb": { backgroundColor: "#b8babf" },
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
<Box
|
||||
sx={{
|
||||
padding: "16px",
|
||||
@ -130,6 +143,7 @@ const ExpandedMobileLayout = ({
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@ -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 = (<Box
|
||||
sx={{
|
||||
margin:
|
||||
settings.cfg.startpageType === "centered" ? "0 auto" : null,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "nowrap" : "wrap",
|
||||
gap:"30px",
|
||||
mb: "7px",
|
||||
}}
|
||||
>
|
||||
{settings.cfg.startpage.logo &&
|
||||
<img
|
||||
src={settings.cfg.startpage.logo}
|
||||
style={{
|
||||
height: "40px",
|
||||
maxWidth: "110px",
|
||||
objectFit: "cover",
|
||||
}}
|
||||
alt=""
|
||||
/>
|
||||
}
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "12px",
|
||||
color:
|
||||
settings.cfg.startpageType === "expanded"
|
||||
? "white"
|
||||
: theme.palette.text.primary,
|
||||
wordBreak: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "normal" : "break-word",
|
||||
fontFamily: "Helvetica Neue",
|
||||
}}
|
||||
>
|
||||
{settings.cfg.info.orgname}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>)
|
||||
|
||||
const realQuestionsCount = questions.filter((question) => question.type !== null && question.type !== "result").length;
|
||||
|
||||
return (
|
||||
@ -104,48 +146,7 @@ export const StartPageViewPublication = () => {
|
||||
}}
|
||||
>
|
||||
<QuizPreviewLayoutByType
|
||||
quizHeaderBlock={
|
||||
<Box
|
||||
sx={{
|
||||
margin:
|
||||
settings.cfg.startpageType === "centered" ? "0 auto" : null,
|
||||
padding: settings.cfg.startpageType === "standard" ? "" : "16px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
flexWrap: "wrap",
|
||||
gap: "30px",
|
||||
mb: "7px",
|
||||
}}
|
||||
>
|
||||
{settings.cfg.startpage.logo &&
|
||||
<img
|
||||
src={settings.cfg.startpage.logo}
|
||||
style={{
|
||||
height: "40px",
|
||||
maxWidth: "110px",
|
||||
objectFit: "cover",
|
||||
}}
|
||||
alt=""
|
||||
/>
|
||||
}
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "14px",
|
||||
color:
|
||||
settings.cfg.startpageType === "expanded"
|
||||
? "white"
|
||||
: theme.palette.text.primary,
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
>
|
||||
{settings.cfg.info.orgname}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
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%",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
fontFamily: "Helvetica Neue",
|
||||
fontWeight: "500",
|
||||
fontSize: "26px",
|
||||
fontStyle: "normal",
|
||||
fontStretch: "normal",
|
||||
@ -191,7 +193,9 @@ export const StartPageViewPublication = () => {
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
fontFamily: "Helvetica Neue",
|
||||
fontSize: "17px",
|
||||
fontWeight: "400",
|
||||
margin: "16px 0 30px",
|
||||
overflowWrap: "break-word",
|
||||
width: "100%",
|
||||
@ -217,10 +221,12 @@ export const StartPageViewPublication = () => {
|
||||
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 = () => {
|
||||
: "Пройти тест"}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mt: "46px",
|
||||
display: "flex",
|
||||
flexGrow:
|
||||
settings.cfg.startpageType === "centered"
|
||||
@ -243,16 +248,24 @@ 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",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ maxWidth: "300px" }}>
|
||||
{settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"&& !isMobile && quizHeaderBlock}
|
||||
<Box sx={{ maxWidth: "300px",
|
||||
display: settings.cfg.startpageType === "centered" && isMobile? "flex" : "block",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
order: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "2" : "0"}}>
|
||||
{settings.cfg.info.site && (
|
||||
<Link mb="16px" href={settings.cfg.info.site}>
|
||||
<Link href={settings.cfg.info.site}
|
||||
sx={{marginBottom: settings.cfg.startpageType === "centered" && isMobile ? "0" : "16px"}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily: "Helvetica Neue",
|
||||
fontSize: "16px",
|
||||
color: theme.palette.primary.main,
|
||||
overflow: "hidden",
|
||||
@ -271,6 +284,7 @@ export const StartPageViewPublication = () => {
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
fontFamily: "Helvetica Neue",
|
||||
color:
|
||||
settings.cfg.startpageType === "expanded"
|
||||
? "#FFFFFF"
|
||||
@ -285,6 +299,7 @@ export const StartPageViewPublication = () => {
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
fontFamily: "Helvetica Neue",
|
||||
color:
|
||||
settings.cfg.startpageType === "expanded"
|
||||
? "#FFFFFF"
|
||||
@ -298,6 +313,7 @@ export const StartPageViewPublication = () => {
|
||||
) : (
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily: "Helvetica Neue",
|
||||
fontSize: "16px",
|
||||
marginTop: "5px",
|
||||
color:
|
||||
@ -311,6 +327,7 @@ export const StartPageViewPublication = () => {
|
||||
)}
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily: "Helvetica Neue",
|
||||
width: "100%",
|
||||
overflowWrap: "break-word",
|
||||
fontSize: "12px",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user