Merge branch 'hotfix-startpage-design' into dev
This commit is contained in:
commit
67c61eea79
@ -23,14 +23,14 @@ type StartPageDesktopProps = {
|
||||
type LayoutProps = Omit<StartPageDesktopProps, "startpageType">;
|
||||
|
||||
const StandartLayout = ({
|
||||
alignType,
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: LayoutProps) => {
|
||||
alignType,
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: LayoutProps) => {
|
||||
const size = useRootContainerSize();
|
||||
const isTablet = size >= 700 && size < 1100;
|
||||
const { settings } = useQuizData();
|
||||
const {settings} = useQuizData();
|
||||
|
||||
return (
|
||||
<Box
|
||||
@ -49,54 +49,65 @@ const StandartLayout = ({
|
||||
width: 0,
|
||||
},
|
||||
overflowY: "auto",
|
||||
padding: isTablet ? "15px" : "0",
|
||||
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "40%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
p: isTablet? "25px" : alignType === 'left'? "25px 25px 25px 35px" : "25px 35px 25px 25px" ,
|
||||
overflowY: "auto",
|
||||
background:
|
||||
settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
|
||||
? "linear-gradient(90deg,#272626,transparent)"
|
||||
: null,
|
||||
scrollbarWidth: "none",
|
||||
"&::-webkit-scrollbar": {
|
||||
width: 0,
|
||||
},
|
||||
flexDirection: alignType === "left" ? "row" : "row-reverse",
|
||||
padding: isTablet ? "15px" : "0",
|
||||
background: settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
|
||||
? alignType === 'left'
|
||||
? "linear-gradient(90deg, #272626, transparent)"
|
||||
: alignType === 'right'
|
||||
? "linear-gradient(-90deg, #272626, transparent)"
|
||||
: "linear-gradient(0deg, #272626, transparent)"
|
||||
: null,
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
{settings.cfg.startpage.background.desktop && (
|
||||
<Box sx={{ width: "60%", overflow: "hidden" }}><Box
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
width: "40%",
|
||||
height: "100%",
|
||||
padding: alignType === "left"? "25px 25px 25px 15px" : "25px 15px 25px 25px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
"& > img": { width: "100%", borderRadius: "12px" },
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
p: isTablet ? "25px" : alignType === 'left' ? "25px 25px 25px 35px" : "25px 35px 25px 25px",
|
||||
overflowY: "auto",
|
||||
scrollbarWidth: "none",
|
||||
"&::-webkit-scrollbar": {
|
||||
width: 0,
|
||||
},
|
||||
}}
|
||||
>{backgroundBlock}</Box></Box>
|
||||
)}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
{settings.cfg.startpage.background.desktop && (
|
||||
<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>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const ExpandedLayout = ({
|
||||
alignType,
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: LayoutProps) => {
|
||||
alignType,
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: LayoutProps) => {
|
||||
const size = useRootContainerSize();
|
||||
const isTablet = size >= 700 && size < 1100;
|
||||
return (
|
||||
@ -171,12 +182,12 @@ const ExpandedLayout = ({
|
||||
}
|
||||
|
||||
const CenteredLayout = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: LayoutProps) => {
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: LayoutProps) => {
|
||||
const isTablet = useRootContainerSize() < 1100;
|
||||
const { settings } = useQuizData();
|
||||
const {settings} = useQuizData();
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@ -188,9 +199,8 @@ const CenteredLayout = ({
|
||||
height: "100%",
|
||||
backgroundPosition: "center",
|
||||
backgroundSize: "cover",
|
||||
backgroundImage: settings.cfg.design
|
||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||
: null,
|
||||
backgroundImage: !settings.cfg.design ? null : settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
|
||||
? `linear-gradient(0deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})` : `url(${DESIGN_LIST[settings.cfg.theme]})`,
|
||||
scrollbarWidth: "none",
|
||||
"&::-webkit-scrollbar": {
|
||||
width: 0,
|
||||
@ -207,7 +217,7 @@ const CenteredLayout = ({
|
||||
height: isTablet ? "530px" : "306px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
"& > img": { width: "100%", borderRadius: "12px" },
|
||||
"& > img": {width: "100%", borderRadius: "12px"},
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
@ -219,12 +229,12 @@ const CenteredLayout = ({
|
||||
};
|
||||
|
||||
export const StartPageDesktop = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
startpageType,
|
||||
alignType,
|
||||
}: StartPageDesktopProps) => {
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
startpageType,
|
||||
alignType,
|
||||
}: StartPageDesktopProps) => {
|
||||
switch (startpageType) {
|
||||
case null:
|
||||
case "standard": {
|
||||
|
||||
@ -9,171 +9,174 @@ import type {QuizStartpageType} from "@model/settingsData";
|
||||
import {DESIGN_LIST} from "@/utils/designList";
|
||||
|
||||
type StartPageMobileProps = {
|
||||
quizHeaderBlock: JSX.Element;
|
||||
quizMainBlock: JSX.Element;
|
||||
backgroundBlock: JSX.Element | null;
|
||||
startpageType: QuizStartpageType;
|
||||
quizHeaderBlock: JSX.Element;
|
||||
quizMainBlock: JSX.Element;
|
||||
backgroundBlock: JSX.Element | null;
|
||||
startpageType: QuizStartpageType;
|
||||
};
|
||||
|
||||
type MobileLayoutProps = Omit<StartPageMobileProps, "startpageType">;
|
||||
|
||||
const StandartMobileLayout = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: MobileLayoutProps) => {
|
||||
const { settings } = useQuizData();
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: MobileLayoutProps) => {
|
||||
const {settings} = useQuizData();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flexGrow: 1,
|
||||
justifyContent: "flex-end",
|
||||
minHeight: "100%",
|
||||
height: "100%",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
backgroundPosition: "center",
|
||||
backgroundSize: "cover",
|
||||
backgroundImage: settings.cfg.design
|
||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||
: null,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexGrow: 1,
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
p: "20px",
|
||||
height: "100%",
|
||||
overflowY: "auto",
|
||||
overflowX: "hidden",
|
||||
background:
|
||||
settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
|
||||
? "linear-gradient(90deg,#272626,transparent)"
|
||||
: null,
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "4px",
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
backgroundColor: "#b8babf",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: "80%",
|
||||
display: "flex",
|
||||
flexGrow: 1,
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
marginTop: "30px"
|
||||
}}
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
flexGrow: 1,
|
||||
justifyContent: "flex-end",
|
||||
minHeight: "100%",
|
||||
height: "100%",
|
||||
"&::-webkit-scrollbar": {width: 0},
|
||||
backgroundPosition: "center",
|
||||
backgroundSize: "cover",
|
||||
backgroundImage: settings.cfg.design
|
||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||
: null,
|
||||
}}
|
||||
>
|
||||
{quizMainBlock}
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexGrow: 1,
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
p: "20px",
|
||||
height: "100%",
|
||||
overflowY: "auto",
|
||||
overflowX: "hidden",
|
||||
background:
|
||||
settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
|
||||
? "linear-gradient(90deg,#272626,transparent)"
|
||||
: null,
|
||||
"&::-webkit-scrollbar": {
|
||||
width: "4px",
|
||||
},
|
||||
"&::-webkit-scrollbar-thumb": {
|
||||
backgroundColor: "#b8babf",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<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%",
|
||||
display: "flex",
|
||||
flexGrow: 1,
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
marginTop: "30px"
|
||||
}}
|
||||
>
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
const ExpandedMobileLayout = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: MobileLayoutProps) => (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column-reverse",
|
||||
flexGrow: 1,
|
||||
justifyContent: "flex-end",
|
||||
minHeight: "100%",
|
||||
height: "100%",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
}}
|
||||
>
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: MobileLayoutProps) => (
|
||||
<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" },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "20px",
|
||||
height: "80%",
|
||||
display: "flex",
|
||||
flexGrow: 1,
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column-reverse",
|
||||
flexGrow: 1,
|
||||
justifyContent: "flex-end",
|
||||
minHeight: "100%",
|
||||
height: "100%",
|
||||
"&::-webkit-scrollbar": {width: 0},
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
zIndex: -1,
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
// minHeight: "100%",
|
||||
overflow: "hidden",
|
||||
"& > img": {
|
||||
display: "block",
|
||||
minHeight: "100%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
<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"},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "20px",
|
||||
height: "80%",
|
||||
display: "flex",
|
||||
flexGrow: 1,
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{quizHeaderBlock}
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
zIndex: -1,
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
// minHeight: "100%",
|
||||
overflow: "hidden",
|
||||
"& > img": {
|
||||
display: "block",
|
||||
minHeight: "100%",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
const CenteredMobileLayout = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: MobileLayoutProps) => {
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: MobileLayoutProps) => {
|
||||
const {settings} = useQuizData();
|
||||
return (
|
||||
<Box
|
||||
@ -186,9 +189,8 @@ const CenteredMobileLayout = ({
|
||||
height: "100%",
|
||||
backgroundPosition: "center",
|
||||
backgroundSize: "cover",
|
||||
backgroundImage: settings.cfg.design
|
||||
? `url(${DESIGN_LIST[settings.cfg.theme]})`
|
||||
: null,
|
||||
backgroundImage: !settings.cfg.design ? null : settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
|
||||
? `linear-gradient(0deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})` : `url(${DESIGN_LIST[settings.cfg.theme]})`,
|
||||
"&::-webkit-scrollbar": {width: 0},
|
||||
}}
|
||||
>
|
||||
@ -211,11 +213,11 @@ const CenteredMobileLayout = ({
|
||||
{quizHeaderBlock}
|
||||
{settings.cfg.startpage.background.desktop && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
"& > img": {width: "100%", borderRadius: "12px"},
|
||||
}}
|
||||
sx={{
|
||||
width: "100%",
|
||||
overflow: "hidden",
|
||||
"& > img": {width: "100%", borderRadius: "12px"},
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
@ -238,44 +240,44 @@ const CenteredMobileLayout = ({
|
||||
}
|
||||
|
||||
export const StartPageMobile = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
startpageType,
|
||||
}: StartPageMobileProps) => {
|
||||
switch (startpageType) {
|
||||
case null:
|
||||
case "standard": {
|
||||
return (
|
||||
<StandartMobileLayout
|
||||
quizHeaderBlock={quizHeaderBlock}
|
||||
quizMainBlock={quizMainBlock}
|
||||
backgroundBlock={backgroundBlock}
|
||||
/>
|
||||
);
|
||||
}
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
startpageType,
|
||||
}: StartPageMobileProps) => {
|
||||
switch (startpageType) {
|
||||
case null:
|
||||
case "standard": {
|
||||
return (
|
||||
<StandartMobileLayout
|
||||
quizHeaderBlock={quizHeaderBlock}
|
||||
quizMainBlock={quizMainBlock}
|
||||
backgroundBlock={backgroundBlock}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
case "expanded": {
|
||||
return (
|
||||
<ExpandedMobileLayout
|
||||
quizHeaderBlock={quizHeaderBlock}
|
||||
quizMainBlock={quizMainBlock}
|
||||
backgroundBlock={backgroundBlock}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case "expanded": {
|
||||
return (
|
||||
<ExpandedMobileLayout
|
||||
quizHeaderBlock={quizHeaderBlock}
|
||||
quizMainBlock={quizMainBlock}
|
||||
backgroundBlock={backgroundBlock}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
case "centered": {
|
||||
return (
|
||||
<CenteredMobileLayout
|
||||
quizHeaderBlock={quizHeaderBlock}
|
||||
quizMainBlock={quizMainBlock}
|
||||
backgroundBlock={backgroundBlock}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case "centered": {
|
||||
return (
|
||||
<CenteredMobileLayout
|
||||
quizHeaderBlock={quizHeaderBlock}
|
||||
quizMainBlock={quizMainBlock}
|
||||
backgroundBlock={backgroundBlock}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
default:
|
||||
notReachable(startpageType);
|
||||
}
|
||||
default:
|
||||
notReachable(startpageType);
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user