SQuiz/frontAnswerer
3
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

improved padding on tablet, fixed gradient

Browse Source
This commit is contained in:
aleksandr-raw 2024-05-10 17:38:01 +04:00
parent c537018c21
commit 7a7dd22302
2 changed files with 255 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
lib/components/ViewPublicationPage/StartPageViewPublication/StartPageDesktop.tsx
View File

@ -23,14 +23,14 @@ type StartPageDesktopProps = {
type LayoutProps = Omit<StartPageDesktopProps, "startpageType">; type LayoutProps = Omit<StartPageDesktopProps, "startpageType">;
const StandartLayout = ({ const StandartLayout = ({
alignType, alignType,
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
}: LayoutProps) => { }: LayoutProps) => {
const size = useRootContainerSize(); const size = useRootContainerSize();
const isTablet = size >= 700 && size < 1100; const isTablet = size >= 700 && size < 1100;
const { settings } = useQuizData(); const {settings} = useQuizData();
return ( return (
<Box <Box
@ -49,54 +49,65 @@ const StandartLayout = ({
width: 0, width: 0,
}, },
overflowY: "auto", overflowY: "auto",
padding: isTablet ? "15px" : "0",
}} }}
> >
<Box <Box
sx={{ sx={{
width: "40%",
height: "100%",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: alignType === "left" ? "row" : "row-reverse",
justifyContent: "space-between", padding: isTablet ? "15px" : "0",
alignItems: "flex-start", background: settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
p: isTablet? "25px" : alignType === 'left'? "25px 25px 25px 35px" : "25px 35px 25px 25px" , ? alignType === 'left'
overflowY: "auto", ? "linear-gradient(90deg, #272626, transparent)"
background: : alignType === 'right'
settings.cfg.design && !quizThemes[settings.cfg.theme].isLight ? "linear-gradient(-90deg, #272626, transparent)"
? "linear-gradient(90deg,#272626,transparent)" : "linear-gradient(0deg, #272626, transparent)"
: null, : null,
scrollbarWidth: "none",
"&::-webkit-scrollbar": {
width: 0,
},
}} }}
> >
{quizHeaderBlock} <Box
{quizMainBlock}
</Box>
{settings.cfg.startpage.background.desktop && (
<Box sx={{ width: "60%", overflow: "hidden" }}><Box
sx={{ sx={{
width: "100%", width: "40%",
height: "100%", height: "100%",
padding: alignType === "left"? "25px 25px 25px 15px" : "25px 15px 25px 25px",
display: "flex", display: "flex",
justifyContent: "center", flexDirection: "column",
"& > img": { width: "100%", borderRadius: "12px" }, 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> </Box>
); );
}; };
const ExpandedLayout = ({ const ExpandedLayout = ({
alignType, alignType,
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
}: LayoutProps) => { }: LayoutProps) => {
const size = useRootContainerSize(); const size = useRootContainerSize();
const isTablet = size >= 700 && size < 1100; const isTablet = size >= 700 && size < 1100;
return ( return (
@ -171,12 +182,12 @@ const ExpandedLayout = ({
} }
const CenteredLayout = ({ const CenteredLayout = ({
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
}: LayoutProps) => { }: LayoutProps) => {
const isTablet = useRootContainerSize() < 1100; const isTablet = useRootContainerSize() < 1100;
const { settings } = useQuizData(); const {settings} = useQuizData();
return ( return (
<Box <Box
sx={{ sx={{
@ -188,9 +199,8 @@ const CenteredLayout = ({
height: "100%", height: "100%",
backgroundPosition: "center", backgroundPosition: "center",
backgroundSize: "cover", backgroundSize: "cover",
backgroundImage: settings.cfg.design backgroundImage: !settings.cfg.design ? null : settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
? `url(${DESIGN_LIST[settings.cfg.theme]})` ? `linear-gradient(0deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})` : `url(${DESIGN_LIST[settings.cfg.theme]})`,
: null,
scrollbarWidth: "none", scrollbarWidth: "none",
"&::-webkit-scrollbar": { "&::-webkit-scrollbar": {
width: 0, width: 0,
@ -207,7 +217,7 @@ const CenteredLayout = ({
height: isTablet ? "530px" : "306px", height: isTablet ? "530px" : "306px",
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
"& > img": { width: "100%", borderRadius: "12px" }, "& > img": {width: "100%", borderRadius: "12px"},
}} }}
> >
{backgroundBlock} {backgroundBlock}
@ -219,12 +229,12 @@ const CenteredLayout = ({
}; };
export const StartPageDesktop = ({ export const StartPageDesktop = ({
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
startpageType, startpageType,
alignType, alignType,
}: StartPageDesktopProps) => { }: StartPageDesktopProps) => {
switch (startpageType) { switch (startpageType) {
case null: case null:
case "standard": { case "standard": {

382
lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx
View File

@ -9,171 +9,174 @@ import type {QuizStartpageType} from "@model/settingsData";
import {DESIGN_LIST} from "@/utils/designList"; import {DESIGN_LIST} from "@/utils/designList";
type StartPageMobileProps = { type StartPageMobileProps = {
quizHeaderBlock: JSX.Element; quizHeaderBlock: JSX.Element;
quizMainBlock: JSX.Element; quizMainBlock: JSX.Element;
backgroundBlock: JSX.Element | null; backgroundBlock: JSX.Element | null;
startpageType: QuizStartpageType; startpageType: QuizStartpageType;
}; };
type MobileLayoutProps = Omit<StartPageMobileProps, "startpageType">; type MobileLayoutProps = Omit<StartPageMobileProps, "startpageType">;
const StandartMobileLayout = ({ const StandartMobileLayout = ({
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
}: MobileLayoutProps) => { }: MobileLayoutProps) => {
const { settings } = useQuizData(); const {settings} = useQuizData();
return ( 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>
)}
<Box <Box
sx={{ sx={{
height: "80%", display: "flex",
display: "flex", flexDirection: "column",
flexGrow: 1, flexGrow: 1,
flexDirection: "column", justifyContent: "flex-end",
justifyContent: "space-between", minHeight: "100%",
width: "100%", height: "100%",
marginTop: "30px" "&::-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> );
</Box>
);
}; };
const ExpandedMobileLayout = ({ const ExpandedMobileLayout = ({
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
}: MobileLayoutProps) => ( }: MobileLayoutProps) => (
<Box
sx={{
display: "flex",
flexDirection: "column-reverse",
flexGrow: 1,
justifyContent: "flex-end",
minHeight: "100%",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}
>
<Box <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={{ sx={{
padding: "20px", display: "flex",
height: "80%", flexDirection: "column-reverse",
display: "flex", flexGrow: 1,
flexGrow: 1, justifyContent: "flex-end",
flexDirection: "column", minHeight: "100%",
justifyContent: "space-between", height: "100%",
width: "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>
</Box>
); );
const CenteredMobileLayout = ({ const CenteredMobileLayout = ({
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
}: MobileLayoutProps) => { }: MobileLayoutProps) => {
const {settings} = useQuizData(); const {settings} = useQuizData();
return ( return (
<Box <Box
@ -186,9 +189,8 @@ const CenteredMobileLayout = ({
height: "100%", height: "100%",
backgroundPosition: "center", backgroundPosition: "center",
backgroundSize: "cover", backgroundSize: "cover",
backgroundImage: settings.cfg.design backgroundImage: !settings.cfg.design ? null : settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
? `url(${DESIGN_LIST[settings.cfg.theme]})` ? `linear-gradient(0deg, #272626, transparent), url(${DESIGN_LIST[settings.cfg.theme]})` : `url(${DESIGN_LIST[settings.cfg.theme]})`,
: null,
"&::-webkit-scrollbar": {width: 0}, "&::-webkit-scrollbar": {width: 0},
}} }}
> >
@ -211,11 +213,11 @@ const CenteredMobileLayout = ({
{quizHeaderBlock} {quizHeaderBlock}
{settings.cfg.startpage.background.desktop && ( {settings.cfg.startpage.background.desktop && (
<Box <Box
sx={{ sx={{
width: "100%", width: "100%",
overflow: "hidden", overflow: "hidden",
"& > img": {width: "100%", borderRadius: "12px"}, "& > img": {width: "100%", borderRadius: "12px"},
}} }}
> >
{backgroundBlock} {backgroundBlock}
</Box> </Box>
@ -238,44 +240,44 @@ const CenteredMobileLayout = ({
} }
export const StartPageMobile = ({ export const StartPageMobile = ({
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
startpageType, startpageType,
}: StartPageMobileProps) => { }: StartPageMobileProps) => {
switch (startpageType) { switch (startpageType) {
case null: case null:
case "standard": { case "standard": {
return ( return (
<StandartMobileLayout <StandartMobileLayout
quizHeaderBlock={quizHeaderBlock} quizHeaderBlock={quizHeaderBlock}
quizMainBlock={quizMainBlock} quizMainBlock={quizMainBlock}
backgroundBlock={backgroundBlock} backgroundBlock={backgroundBlock}
/> />
); );
} }
case "expanded": { case "expanded": {
return ( return (
<ExpandedMobileLayout <ExpandedMobileLayout
quizHeaderBlock={quizHeaderBlock} quizHeaderBlock={quizHeaderBlock}
quizMainBlock={quizMainBlock} quizMainBlock={quizMainBlock}
backgroundBlock={backgroundBlock} backgroundBlock={backgroundBlock}
/> />
); );
} }
case "centered": { case "centered": {
return ( return (
<CenteredMobileLayout <CenteredMobileLayout
quizHeaderBlock={quizHeaderBlock} quizHeaderBlock={quizHeaderBlock}
quizMainBlock={quizMainBlock} quizMainBlock={quizMainBlock}
backgroundBlock={backgroundBlock} backgroundBlock={backgroundBlock}
/> />
); );
} }
default: default:
notReachable(startpageType); notReachable(startpageType);
} }
}; };