Merge branch 'hotfix-startpage-design' into dev
This commit is contained in:
commit
67c61eea79
@ -27,10 +27,10 @@ const StandartLayout = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: LayoutProps) => {
|
||||
}: LayoutProps) => {
|
||||
const size = useRootContainerSize();
|
||||
const isTablet = size >= 700 && size < 1100;
|
||||
const { settings } = useQuizData();
|
||||
const {settings} = useQuizData();
|
||||
|
||||
return (
|
||||
<Box
|
||||
@ -49,7 +49,21 @@ const StandartLayout = ({
|
||||
width: 0,
|
||||
},
|
||||
overflowY: "auto",
|
||||
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
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,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -60,12 +74,8 @@ const StandartLayout = ({
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "flex-start",
|
||||
p: isTablet? "25px" : alignType === 'left'? "25px 25px 25px 35px" : "25px 35px 25px 25px" ,
|
||||
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,
|
||||
@ -76,18 +86,19 @@ const StandartLayout = ({
|
||||
{quizMainBlock}
|
||||
</Box>
|
||||
{settings.cfg.startpage.background.desktop && (
|
||||
<Box sx={{ width: "60%", overflow: "hidden" }}><Box
|
||||
<Box sx={{width: "60%", overflow: "hidden"}}><Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
padding: alignType === "left"? "25px 25px 25px 15px" : "25px 15px 25px 25px",
|
||||
padding: alignType === "left" ? "25px 25px 25px 15px" : "25px 15px 25px 25px",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
"& > img": { width: "100%", borderRadius: "12px" },
|
||||
"& > img": {width: "100%", borderRadius: "12px"},
|
||||
}}
|
||||
>{backgroundBlock}</Box></Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@ -96,7 +107,7 @@ const ExpandedLayout = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: LayoutProps) => {
|
||||
}: LayoutProps) => {
|
||||
const size = useRootContainerSize();
|
||||
const isTablet = size >= 700 && size < 1100;
|
||||
return (
|
||||
@ -174,9 +185,9 @@ const CenteredLayout = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: LayoutProps) => {
|
||||
}: 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}
|
||||
@ -224,7 +234,7 @@ export const StartPageDesktop = ({
|
||||
backgroundBlock,
|
||||
startpageType,
|
||||
alignType,
|
||||
}: StartPageDesktopProps) => {
|
||||
}: StartPageDesktopProps) => {
|
||||
switch (startpageType) {
|
||||
case null:
|
||||
case "standard": {
|
||||
|
||||
@ -21,8 +21,8 @@ const StandartMobileLayout = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: MobileLayoutProps) => {
|
||||
const { settings } = useQuizData();
|
||||
}: MobileLayoutProps) => {
|
||||
const {settings} = useQuizData();
|
||||
|
||||
return (
|
||||
<Box
|
||||
@ -33,7 +33,7 @@ const StandartMobileLayout = ({
|
||||
justifyContent: "flex-end",
|
||||
minHeight: "100%",
|
||||
height: "100%",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
"&::-webkit-scrollbar": {width: 0},
|
||||
backgroundPosition: "center",
|
||||
backgroundSize: "cover",
|
||||
backgroundImage: settings.cfg.design
|
||||
@ -69,14 +69,17 @@ const StandartMobileLayout = ({
|
||||
{quizHeaderBlock}
|
||||
</Box>
|
||||
{settings.cfg.startpage.background.desktop && (
|
||||
<Box sx={{ width: "100%", overflow: "hidden" }}>
|
||||
<Box sx={{width: "100%", overflow: "hidden"}}>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
"& > img": { width: "100%", borderRadius: "12px" },
|
||||
"& > img": {
|
||||
width: "100%",
|
||||
borderRadius: "12px"
|
||||
},
|
||||
}}
|
||||
>
|
||||
{backgroundBlock}
|
||||
@ -105,7 +108,7 @@ const ExpandedMobileLayout = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: MobileLayoutProps) => (
|
||||
}: MobileLayoutProps) => (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
@ -114,7 +117,7 @@ const ExpandedMobileLayout = ({
|
||||
justifyContent: "flex-end",
|
||||
minHeight: "100%",
|
||||
height: "100%",
|
||||
"&::-webkit-scrollbar": { width: 0 },
|
||||
"&::-webkit-scrollbar": {width: 0},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -129,8 +132,8 @@ const ExpandedMobileLayout = ({
|
||||
height: "100%",
|
||||
overflowY: "auto",
|
||||
overflowX: "hidden",
|
||||
"&::-webkit-scrollbar": { width: "4px" },
|
||||
"&::-webkit-scrollbar-thumb": { backgroundColor: "#b8babf" },
|
||||
"&::-webkit-scrollbar": {width: "4px"},
|
||||
"&::-webkit-scrollbar-thumb": {backgroundColor: "#b8babf"},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -173,7 +176,7 @@ const CenteredMobileLayout = ({
|
||||
quizHeaderBlock,
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
}: MobileLayoutProps) => {
|
||||
}: 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},
|
||||
}}
|
||||
>
|
||||
@ -242,7 +244,7 @@ export const StartPageMobile = ({
|
||||
quizMainBlock,
|
||||
backgroundBlock,
|
||||
startpageType,
|
||||
}: StartPageMobileProps) => {
|
||||
}: StartPageMobileProps) => {
|
||||
switch (startpageType) {
|
||||
case null:
|
||||
case "standard": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user