feat: full mobile styles
This commit is contained in:
IlyaDoronin
parent
d58c1fa58f
commit
a093912070
@ -1,11 +1,8 @@
|
|||||||
import { Box } from "@mui/material";
|
import { StartPageDesktop } from "./StartPageDesktop";
|
||||||
|
|
||||||
import { StartPageMobile } from "./StartPageMobile";
|
import { StartPageMobile } from "./StartPageMobile";
|
||||||
|
|
||||||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
||||||
|
|
||||||
import { notReachable } from "@utils/notReachable";
|
|
||||||
|
|
||||||
import type {
|
import type {
|
||||||
QuizStartpageAlignType,
|
QuizStartpageAlignType,
|
||||||
QuizStartpageType,
|
QuizStartpageType,
|
||||||
@ -19,129 +16,6 @@ type QuizPreviewLayoutByTypeProps = {
|
|||||||
alignType: QuizStartpageAlignType;
|
alignType: QuizStartpageAlignType;
|
||||||
};
|
};
|
||||||
|
|
||||||
type LayoutProps = Omit<QuizPreviewLayoutByTypeProps, "startpageType">;
|
|
||||||
|
|
||||||
const StandartLayout = ({
|
|
||||||
alignType,
|
|
||||||
quizHeaderBlock,
|
|
||||||
quizMainBlock,
|
|
||||||
backgroundBlock,
|
|
||||||
}: LayoutProps) => (
|
|
||||||
<Box
|
|
||||||
id="pain"
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: alignType === "left" ? "row" : "row-reverse",
|
|
||||||
flexGrow: 1,
|
|
||||||
minHeight: "100vh",
|
|
||||||
"&::-webkit-scrollbar": { width: 0 },
|
|
||||||
overflow: "auto",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
width: "40%",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
alignItems: "flex-start",
|
|
||||||
p: "25px",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{quizHeaderBlock}
|
|
||||||
{quizMainBlock}
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box sx={{ width: "60%", overflow: "hidden" }}>{backgroundBlock}</Box>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
|
|
||||||
const ExpandedLayout = ({
|
|
||||||
alignType,
|
|
||||||
quizHeaderBlock,
|
|
||||||
quizMainBlock,
|
|
||||||
backgroundBlock,
|
|
||||||
}: LayoutProps) => (
|
|
||||||
<Box>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
minHeight: "100vh",
|
|
||||||
width: "40%",
|
|
||||||
padding: "16px",
|
|
||||||
zIndex: 3,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
padding: "16px",
|
|
||||||
minHeight: "calc(100vh - 32px)",
|
|
||||||
position: "relative",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
alignItems: alignType === "center" ? "center" : "start",
|
|
||||||
borderRight: "1px solid #9A9AAF80",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{quizHeaderBlock}
|
|
||||||
{quizMainBlock}
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
position: "absolute",
|
|
||||||
zIndex: -1,
|
|
||||||
left: 0,
|
|
||||||
top: 0,
|
|
||||||
height: "100%",
|
|
||||||
width: "100%",
|
|
||||||
overflow: "hidden",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{backgroundBlock}
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
|
|
||||||
const CenteredLayout = ({
|
|
||||||
quizHeaderBlock,
|
|
||||||
quizMainBlock,
|
|
||||||
backgroundBlock,
|
|
||||||
}: LayoutProps) => {
|
|
||||||
const isTablet = useRootContainerSize() < 1100;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
overflow: "auto",
|
|
||||||
padding: "16px",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
alignItems: "center",
|
|
||||||
minHeight: "100vh",
|
|
||||||
"&::-webkit-scrollbar": { width: 0 },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{quizHeaderBlock}
|
|
||||||
{backgroundBlock && (
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
width: "100%",
|
|
||||||
maxWidth: "844px",
|
|
||||||
height: isTablet ? "530px" : "306px",
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "center",
|
|
||||||
"& > img": { width: "100%", borderRadius: "12px" },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{backgroundBlock}
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
{quizMainBlock}
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const QuizPreviewLayoutByType = ({
|
export const QuizPreviewLayoutByType = ({
|
||||||
quizHeaderBlock,
|
quizHeaderBlock,
|
||||||
quizMainBlock,
|
quizMainBlock,
|
||||||
@ -151,52 +25,20 @@ export const QuizPreviewLayoutByType = ({
|
|||||||
}: QuizPreviewLayoutByTypeProps) => {
|
}: QuizPreviewLayoutByTypeProps) => {
|
||||||
const isMobile = useRootContainerSize() < 700;
|
const isMobile = useRootContainerSize() < 700;
|
||||||
|
|
||||||
if (isMobile) {
|
return isMobile ? (
|
||||||
return (
|
<StartPageMobile
|
||||||
<StartPageMobile
|
quizHeaderBlock={quizHeaderBlock}
|
||||||
quizHeaderBlock={quizHeaderBlock}
|
quizMainBlock={quizMainBlock}
|
||||||
quizMainBlock={quizMainBlock}
|
backgroundBlock={backgroundBlock}
|
||||||
backgroundBlock={backgroundBlock}
|
startpageType={startpageType}
|
||||||
startpageType={startpageType}
|
/>
|
||||||
/>
|
) : (
|
||||||
);
|
<StartPageDesktop
|
||||||
}
|
alignType={alignType}
|
||||||
|
startpageType={startpageType}
|
||||||
switch (startpageType) {
|
quizHeaderBlock={quizHeaderBlock}
|
||||||
case null:
|
quizMainBlock={quizMainBlock}
|
||||||
case "standard": {
|
backgroundBlock={backgroundBlock}
|
||||||
return (
|
/>
|
||||||
<StandartLayout
|
);
|
||||||
alignType={alignType}
|
|
||||||
quizHeaderBlock={quizHeaderBlock}
|
|
||||||
quizMainBlock={quizMainBlock}
|
|
||||||
backgroundBlock={backgroundBlock}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
case "expanded": {
|
|
||||||
return (
|
|
||||||
<ExpandedLayout
|
|
||||||
alignType={alignType}
|
|
||||||
quizHeaderBlock={quizHeaderBlock}
|
|
||||||
quizMainBlock={quizMainBlock}
|
|
||||||
backgroundBlock={backgroundBlock}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
case "centered": {
|
|
||||||
return (
|
|
||||||
<CenteredLayout
|
|
||||||
alignType={alignType}
|
|
||||||
quizHeaderBlock={quizHeaderBlock}
|
|
||||||
quizMainBlock={quizMainBlock}
|
|
||||||
backgroundBlock={backgroundBlock}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
default:
|
|
||||||
notReachable(startpageType);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|||||||
@ -0,0 +1,188 @@
|
|||||||
|
import { Box } from "@mui/material";
|
||||||
|
|
||||||
|
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
||||||
|
|
||||||
|
import { notReachable } from "@utils/notReachable";
|
||||||
|
|
||||||
|
import type {
|
||||||
|
QuizStartpageAlignType,
|
||||||
|
QuizStartpageType,
|
||||||
|
} from "@model/settingsData";
|
||||||
|
|
||||||
|
type StartPageDesktopProps = {
|
||||||
|
quizHeaderBlock: JSX.Element;
|
||||||
|
quizMainBlock: JSX.Element;
|
||||||
|
backgroundBlock: JSX.Element | null;
|
||||||
|
startpageType: QuizStartpageType;
|
||||||
|
alignType: QuizStartpageAlignType;
|
||||||
|
};
|
||||||
|
|
||||||
|
type LayoutProps = Omit<StartPageDesktopProps, "startpageType">;
|
||||||
|
|
||||||
|
const StandartLayout = ({
|
||||||
|
alignType,
|
||||||
|
quizHeaderBlock,
|
||||||
|
quizMainBlock,
|
||||||
|
backgroundBlock,
|
||||||
|
}: LayoutProps) => (
|
||||||
|
<Box
|
||||||
|
id="pain"
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: alignType === "left" ? "row" : "row-reverse",
|
||||||
|
flexGrow: 1,
|
||||||
|
minHeight: "100vh",
|
||||||
|
"&::-webkit-scrollbar": { width: 0 },
|
||||||
|
overflow: "auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: "40%",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
p: "25px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{quizHeaderBlock}
|
||||||
|
{quizMainBlock}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ width: "60%", overflow: "hidden" }}>{backgroundBlock}</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ExpandedLayout = ({
|
||||||
|
alignType,
|
||||||
|
quizHeaderBlock,
|
||||||
|
quizMainBlock,
|
||||||
|
backgroundBlock,
|
||||||
|
}: LayoutProps) => (
|
||||||
|
<Box>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
minHeight: "100vh",
|
||||||
|
width: "40%",
|
||||||
|
padding: "16px",
|
||||||
|
zIndex: 3,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
padding: "16px",
|
||||||
|
minHeight: "calc(100vh - 32px)",
|
||||||
|
position: "relative",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: alignType === "center" ? "center" : "start",
|
||||||
|
borderRight: "1px solid #9A9AAF80",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{quizHeaderBlock}
|
||||||
|
{quizMainBlock}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: "absolute",
|
||||||
|
zIndex: -1,
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
height: "100%",
|
||||||
|
width: "100%",
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{backgroundBlock}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
|
||||||
|
const CenteredLayout = ({
|
||||||
|
quizHeaderBlock,
|
||||||
|
quizMainBlock,
|
||||||
|
backgroundBlock,
|
||||||
|
}: LayoutProps) => {
|
||||||
|
const isTablet = useRootContainerSize() < 1100;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
overflow: "auto",
|
||||||
|
padding: "10px 25px 25px",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
alignItems: "center",
|
||||||
|
minHeight: "100vh",
|
||||||
|
"&::-webkit-scrollbar": { width: 0 },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{quizHeaderBlock}
|
||||||
|
{backgroundBlock && (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: "100%",
|
||||||
|
maxWidth: "844px",
|
||||||
|
height: isTablet ? "530px" : "306px",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
"& > img": { width: "100%", borderRadius: "12px" },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{backgroundBlock}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
{quizMainBlock}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const StartPageDesktop = ({
|
||||||
|
quizHeaderBlock,
|
||||||
|
quizMainBlock,
|
||||||
|
backgroundBlock,
|
||||||
|
startpageType,
|
||||||
|
alignType,
|
||||||
|
}: StartPageDesktopProps) => {
|
||||||
|
switch (startpageType) {
|
||||||
|
case null:
|
||||||
|
case "standard": {
|
||||||
|
return (
|
||||||
|
<StandartLayout
|
||||||
|
alignType={alignType}
|
||||||
|
quizHeaderBlock={quizHeaderBlock}
|
||||||
|
quizMainBlock={quizMainBlock}
|
||||||
|
backgroundBlock={backgroundBlock}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
case "expanded": {
|
||||||
|
return (
|
||||||
|
<ExpandedLayout
|
||||||
|
alignType={alignType}
|
||||||
|
quizHeaderBlock={quizHeaderBlock}
|
||||||
|
quizMainBlock={quizMainBlock}
|
||||||
|
backgroundBlock={backgroundBlock}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
case "centered": {
|
||||||
|
return (
|
||||||
|
<CenteredLayout
|
||||||
|
alignType={alignType}
|
||||||
|
quizHeaderBlock={quizHeaderBlock}
|
||||||
|
quizMainBlock={quizMainBlock}
|
||||||
|
backgroundBlock={backgroundBlock}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
default:
|
||||||
|
notReachable(startpageType);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -1,5 +1,7 @@
|
|||||||
import { Box } from "@mui/material";
|
import { Box } from "@mui/material";
|
||||||
|
|
||||||
|
import { notReachable } from "@utils/notReachable";
|
||||||
|
|
||||||
import type { QuizStartpageType } from "@model/settingsData";
|
import type { QuizStartpageType } from "@model/settingsData";
|
||||||
|
|
||||||
type StartPageMobileProps = {
|
type StartPageMobileProps = {
|
||||||
@ -9,66 +11,233 @@ type StartPageMobileProps = {
|
|||||||
startpageType: QuizStartpageType;
|
startpageType: QuizStartpageType;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type MobileLayoutProps = Omit<StartPageMobileProps, "startpageType">;
|
||||||
|
|
||||||
|
const StandartMobileLayout = ({
|
||||||
|
quizHeaderBlock,
|
||||||
|
quizMainBlock,
|
||||||
|
backgroundBlock,
|
||||||
|
}: MobileLayoutProps) => (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column-reverse",
|
||||||
|
flexGrow: 1,
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
minHeight: "100vh",
|
||||||
|
height: "100%",
|
||||||
|
"&::-webkit-scrollbar": { width: 0 },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: "100%",
|
||||||
|
display: "flex",
|
||||||
|
flexGrow: 1,
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
p: "25px",
|
||||||
|
height: "100%",
|
||||||
|
overflowY: "auto",
|
||||||
|
overflowX: "hidden",
|
||||||
|
"&::-webkit-scrollbar": {
|
||||||
|
width: "4px",
|
||||||
|
},
|
||||||
|
"&::-webkit-scrollbar-thumb": {
|
||||||
|
backgroundColor: "#b8babf",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{quizHeaderBlock}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
height: "80%",
|
||||||
|
display: "flex",
|
||||||
|
flexGrow: 1,
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
width: "100%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{quizMainBlock}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: "100%",
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{backgroundBlock}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
|
||||||
|
const ExpandedMobileLayout = ({
|
||||||
|
quizHeaderBlock,
|
||||||
|
quizMainBlock,
|
||||||
|
backgroundBlock,
|
||||||
|
}: MobileLayoutProps) => (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column-reverse",
|
||||||
|
flexGrow: 1,
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
minHeight: "100vh",
|
||||||
|
height: "100%",
|
||||||
|
"&::-webkit-scrollbar": { width: 0 },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
zIndex: 3,
|
||||||
|
width: "100%",
|
||||||
|
display: "flex",
|
||||||
|
flexGrow: 1,
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
height: "100%",
|
||||||
|
overflowY: "auto",
|
||||||
|
overflowX: "hidden",
|
||||||
|
"&::-webkit-scrollbar": { width: "4px" },
|
||||||
|
"&::-webkit-scrollbar-thumb": { backgroundColor: "#b8babf" },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{quizHeaderBlock}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
padding: "16px",
|
||||||
|
height: "80%",
|
||||||
|
display: "flex",
|
||||||
|
flexGrow: 1,
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
width: "100%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{quizMainBlock}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
zIndex: -1,
|
||||||
|
position: "absolute",
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
width: "100%",
|
||||||
|
minHeight: "100vh",
|
||||||
|
overflow: "hidden",
|
||||||
|
"& > img": {
|
||||||
|
display: "block",
|
||||||
|
minHeight: "100vh",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{backgroundBlock}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
|
||||||
|
const CenteredMobileLayout = ({
|
||||||
|
quizHeaderBlock,
|
||||||
|
quizMainBlock,
|
||||||
|
backgroundBlock,
|
||||||
|
}: MobileLayoutProps) => (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column-reverse",
|
||||||
|
flexGrow: 1,
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
minHeight: "100vh",
|
||||||
|
height: "100%",
|
||||||
|
"&::-webkit-scrollbar": { width: 0 },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: "100%",
|
||||||
|
display: "flex",
|
||||||
|
flexGrow: 1,
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
padding: "10px 25px 25px",
|
||||||
|
height: "100%",
|
||||||
|
overflowY: "auto",
|
||||||
|
overflowX: "hidden",
|
||||||
|
"&::-webkit-scrollbar": { width: "4px" },
|
||||||
|
"&::-webkit-scrollbar-thumb": { backgroundColor: "#b8babf" },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{quizHeaderBlock}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
width: "100%",
|
||||||
|
overflow: "hidden",
|
||||||
|
"& > img": { width: "100%", borderRadius: "12px" },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{backgroundBlock}
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
height: "80%",
|
||||||
|
display: "flex",
|
||||||
|
flexGrow: 1,
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
width: "100%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{quizMainBlock}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
|
||||||
export const StartPageMobile = ({
|
export const StartPageMobile = ({
|
||||||
quizHeaderBlock,
|
quizHeaderBlock,
|
||||||
quizMainBlock,
|
quizMainBlock,
|
||||||
backgroundBlock,
|
backgroundBlock,
|
||||||
startpageType,
|
startpageType,
|
||||||
}: StartPageMobileProps) => {
|
}: StartPageMobileProps) => {
|
||||||
return (
|
switch (startpageType) {
|
||||||
<Box
|
case null:
|
||||||
sx={{
|
case "standard": {
|
||||||
display: "flex",
|
return (
|
||||||
flexDirection: "column-reverse",
|
<StandartMobileLayout
|
||||||
flexGrow: 1,
|
quizHeaderBlock={quizHeaderBlock}
|
||||||
justifyContent: "flex-end",
|
quizMainBlock={quizMainBlock}
|
||||||
minHeight: "100vh",
|
backgroundBlock={backgroundBlock}
|
||||||
height: "100%",
|
/>
|
||||||
"&::-webkit-scrollbar": { width: 0 },
|
);
|
||||||
}}
|
}
|
||||||
>
|
|
||||||
<Box
|
case "expanded": {
|
||||||
sx={{
|
return (
|
||||||
width: "100%",
|
<ExpandedMobileLayout
|
||||||
display: "flex",
|
quizHeaderBlock={quizHeaderBlock}
|
||||||
flexGrow: 1,
|
quizMainBlock={quizMainBlock}
|
||||||
flexDirection: "column",
|
backgroundBlock={backgroundBlock}
|
||||||
justifyContent: "space-between",
|
/>
|
||||||
alignItems: "flex-start",
|
);
|
||||||
p: "25px",
|
}
|
||||||
height: "100%",
|
|
||||||
overflowY: "auto",
|
case "centered": {
|
||||||
overflowX: "hidden",
|
return (
|
||||||
"&::-webkit-scrollbar": {
|
<CenteredMobileLayout
|
||||||
width: "4px",
|
quizHeaderBlock={quizHeaderBlock}
|
||||||
},
|
quizMainBlock={quizMainBlock}
|
||||||
"&::-webkit-scrollbar-thumb": {
|
backgroundBlock={backgroundBlock}
|
||||||
backgroundColor: "#b8babf",
|
/>
|
||||||
},
|
);
|
||||||
}}
|
}
|
||||||
>
|
|
||||||
{quizHeaderBlock}
|
default:
|
||||||
<Box
|
notReachable(startpageType);
|
||||||
sx={{
|
}
|
||||||
height: "80%",
|
|
||||||
display: "flex",
|
|
||||||
flexGrow: 1,
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
width: "100%",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{quizMainBlock}
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
width: "100%",
|
|
||||||
overflow: "hidden",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{backgroundBlock}
|
|
||||||
</Box>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|||||||
@ -97,7 +97,13 @@ export const StartPageViewPublication = () => {
|
|||||||
>
|
>
|
||||||
<QuizPreviewLayoutByType
|
<QuizPreviewLayoutByType
|
||||||
quizHeaderBlock={
|
quizHeaderBlock={
|
||||||
<Box p={settings.cfg.startpageType === "standard" ? "" : "16px"}>
|
<Box
|
||||||
|
sx={{
|
||||||
|
margin:
|
||||||
|
settings.cfg.startpageType === "centered" ? "0 auto" : null,
|
||||||
|
padding: settings.cfg.startpageType === "standard" ? "" : "16px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
@ -120,7 +126,7 @@ export const StartPageViewPublication = () => {
|
|||||||
sx={{
|
sx={{
|
||||||
fontSize: "14px",
|
fontSize: "14px",
|
||||||
color:
|
color:
|
||||||
settings.cfg.startpageType === "expanded" && !isMobile
|
settings.cfg.startpageType === "expanded"
|
||||||
? "white"
|
? "white"
|
||||||
: theme.palette.text.primary,
|
: theme.palette.text.primary,
|
||||||
wordBreak: "break-word",
|
wordBreak: "break-word",
|
||||||
@ -138,6 +144,7 @@ export const StartPageViewPublication = () => {
|
|||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
|
flexGrow: settings.cfg.startpageType === "centered" ? 0 : 1,
|
||||||
alignItems:
|
alignItems:
|
||||||
settings.cfg.startpageType === "centered"
|
settings.cfg.startpageType === "centered"
|
||||||
? "center"
|
? "center"
|
||||||
@ -165,7 +172,7 @@ export const StartPageViewPublication = () => {
|
|||||||
? "center"
|
? "center"
|
||||||
: "-moz-initial",
|
: "-moz-initial",
|
||||||
color:
|
color:
|
||||||
settings.cfg.startpageType === "expanded" && !isMobile
|
settings.cfg.startpageType === "expanded"
|
||||||
? "white"
|
? "white"
|
||||||
: theme.palette.text.primary,
|
: theme.palette.text.primary,
|
||||||
}}
|
}}
|
||||||
@ -184,7 +191,7 @@ export const StartPageViewPublication = () => {
|
|||||||
? "center"
|
? "center"
|
||||||
: "-moz-initial",
|
: "-moz-initial",
|
||||||
color:
|
color:
|
||||||
settings.cfg.startpageType === "expanded" && !isMobile
|
settings.cfg.startpageType === "expanded"
|
||||||
? "white"
|
? "white"
|
||||||
: theme.palette.text.primary,
|
: theme.palette.text.primary,
|
||||||
}}
|
}}
|
||||||
@ -217,7 +224,12 @@ export const StartPageViewPublication = () => {
|
|||||||
sx={{
|
sx={{
|
||||||
mt: "46px",
|
mt: "46px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexGrow: settings.cfg.startpageType === "centered" ? 1 : 0,
|
flexGrow:
|
||||||
|
settings.cfg.startpageType === "centered"
|
||||||
|
? isMobile
|
||||||
|
? 0
|
||||||
|
: 1
|
||||||
|
: 0,
|
||||||
gap: "20px",
|
gap: "20px",
|
||||||
alignItems: "flex-end",
|
alignItems: "flex-end",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
@ -225,7 +237,7 @@ export const StartPageViewPublication = () => {
|
|||||||
flexWrap: "wrap",
|
flexWrap: "wrap",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box sx={{ maxWidth: isTablet ? "240px" : "300px" }}>
|
<Box sx={{ maxWidth: "300px" }}>
|
||||||
{settings.cfg.info.site && (
|
{settings.cfg.info.site && (
|
||||||
<Link mb="16px" href={settings.cfg.info.site}>
|
<Link mb="16px" href={settings.cfg.info.site}>
|
||||||
<Typography
|
<Typography
|
||||||
@ -271,7 +283,7 @@ export const StartPageViewPublication = () => {
|
|||||||
marginTop: "5px",
|
marginTop: "5px",
|
||||||
"&::-webkit-scrollbar": { width: 0 },
|
"&::-webkit-scrollbar": { width: 0 },
|
||||||
color:
|
color:
|
||||||
settings.cfg.startpageType === "expanded" && !isMobile
|
settings.cfg.startpageType === "expanded"
|
||||||
? "white"
|
? "white"
|
||||||
: theme.palette.text.primary,
|
: theme.palette.text.primary,
|
||||||
}}
|
}}
|
||||||
@ -295,7 +307,7 @@ export const StartPageViewPublication = () => {
|
|||||||
style={{
|
style={{
|
||||||
fontSize: "34px",
|
fontSize: "34px",
|
||||||
color:
|
color:
|
||||||
settings.cfg.startpageType === "expanded" && !isMobile
|
settings.cfg.startpageType === "expanded"
|
||||||
? "#FFFFFF"
|
? "#FFFFFF"
|
||||||
: quizThemes[settings.cfg.theme].isLight
|
: quizThemes[settings.cfg.theme].isLight
|
||||||
? "#151515"
|
? "#151515"
|
||||||
@ -305,7 +317,7 @@ export const StartPageViewPublication = () => {
|
|||||||
<Typography
|
<Typography
|
||||||
sx={{
|
sx={{
|
||||||
color:
|
color:
|
||||||
settings.cfg.startpageType === "expanded" && !isMobile
|
settings.cfg.startpageType === "expanded"
|
||||||
? "#F5F7FF"
|
? "#F5F7FF"
|
||||||
: quizThemes[settings.cfg.theme].isLight
|
: quizThemes[settings.cfg.theme].isLight
|
||||||
? "#4D4D4D"
|
? "#4D4D4D"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user