SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'hotfix-startpage-design' into dev

Browse Source
This commit is contained in:
Nastya 2024-05-10 16:42:04 +03:00
commit 67c61eea79
2 changed files with 255 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,10 +27,10 @@ const StandartLayout = ({
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,7 +49,21 @@ const StandartLayout = ({
width: 0, width: 0,
}, },
overflowY: "auto", overflowY: "auto",
}}
>
<Box
sx={{
display: "flex",
flexDirection: alignType === "left" ? "row" : "row-reverse",
padding: isTablet ? "15px" : "0", 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 <Box
@ -60,12 +74,8 @@ const StandartLayout = ({
flexDirection: "column", flexDirection: "column",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "flex-start", 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", overflowY: "auto",
background:
settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
? "linear-gradient(90deg,#272626,transparent)"
: null,
scrollbarWidth: "none", scrollbarWidth: "none",
"&::-webkit-scrollbar": { "&::-webkit-scrollbar": {
width: 0, width: 0,
@ -76,18 +86,19 @@ const StandartLayout = ({
{quizMainBlock} {quizMainBlock}
</Box> </Box>
{settings.cfg.startpage.background.desktop && ( {settings.cfg.startpage.background.desktop && (
<Box sx={{ width: "60%", overflow: "hidden" }}><Box <Box sx={{width: "60%", overflow: "hidden"}}><Box
sx={{ sx={{
width: "100%", width: "100%",
height: "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", display: "flex",
justifyContent: "center", justifyContent: "center",
"& > img": { width: "100%", borderRadius: "12px" }, "& > img": {width: "100%", borderRadius: "12px"},
}} }}
>{backgroundBlock}</Box></Box> >{backgroundBlock}</Box></Box>
)} )}
</Box> </Box>
</Box>
); );
}; };
@ -96,7 +107,7 @@ const ExpandedLayout = ({
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 (
@ -174,9 +185,9 @@ 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}
@ -224,7 +234,7 @@ export const StartPageDesktop = ({
backgroundBlock, backgroundBlock,
startpageType, startpageType,
alignType, alignType,
}: StartPageDesktopProps) => { }: StartPageDesktopProps) => {
switch (startpageType) { switch (startpageType) {
case null: case null:
case "standard": { case "standard": {

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

@ -21,8 +21,8 @@ const StandartMobileLayout = ({
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
}: MobileLayoutProps) => { }: MobileLayoutProps) => {
const { settings } = useQuizData(); const {settings} = useQuizData();
return ( return (
<Box <Box
@ -33,7 +33,7 @@ const StandartMobileLayout = ({
justifyContent: "flex-end", justifyContent: "flex-end",
minHeight: "100%", minHeight: "100%",
height: "100%", height: "100%",
"&::-webkit-scrollbar": { width: 0 }, "&::-webkit-scrollbar": {width: 0},
backgroundPosition: "center", backgroundPosition: "center",
backgroundSize: "cover", backgroundSize: "cover",
backgroundImage: settings.cfg.design backgroundImage: settings.cfg.design
@ -69,14 +69,17 @@ const StandartMobileLayout = ({
{quizHeaderBlock} {quizHeaderBlock}
</Box> </Box>
{settings.cfg.startpage.background.desktop && ( {settings.cfg.startpage.background.desktop && (
<Box sx={{ width: "100%", overflow: "hidden" }}> <Box sx={{width: "100%", overflow: "hidden"}}>
<Box <Box
sx={{ sx={{
width: "100%", width: "100%",
height: "100%", height: "100%",
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
"& > img": { width: "100%", borderRadius: "12px" }, "& > img": {
width: "100%",
borderRadius: "12px"
},
}} }}
> >
{backgroundBlock} {backgroundBlock}
@ -105,7 +108,7 @@ const ExpandedMobileLayout = ({
quizHeaderBlock, quizHeaderBlock,
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
}: MobileLayoutProps) => ( }: MobileLayoutProps) => (
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
@ -114,7 +117,7 @@ const ExpandedMobileLayout = ({
justifyContent: "flex-end", justifyContent: "flex-end",
minHeight: "100%", minHeight: "100%",
height: "100%", height: "100%",
"&::-webkit-scrollbar": { width: 0 }, "&::-webkit-scrollbar": {width: 0},
}} }}
> >
<Box <Box
@ -129,8 +132,8 @@ const ExpandedMobileLayout = ({
height: "100%", height: "100%",
overflowY: "auto", overflowY: "auto",
overflowX: "hidden", overflowX: "hidden",
"&::-webkit-scrollbar": { width: "4px" }, "&::-webkit-scrollbar": {width: "4px"},
"&::-webkit-scrollbar-thumb": { backgroundColor: "#b8babf" }, "&::-webkit-scrollbar-thumb": {backgroundColor: "#b8babf"},
}} }}
> >
<Box <Box
@ -173,7 +176,7 @@ 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},
}} }}
> >
@ -242,7 +244,7 @@ export const StartPageMobile = ({
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
startpageType, startpageType,
}: StartPageMobileProps) => { }: StartPageMobileProps) => {
switch (startpageType) { switch (startpageType) {
case null: case null:
case "standard": { case "standard": {