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

fix: sandart layout background

Browse Source
This commit is contained in:
IlyaDoronin 2024-03-06 18:45:45 +03:00
parent 211754fd9d
commit eb6c0fbd26
4 changed files with 92 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,11 @@
import { Box } from "@mui/material";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizData } from "@contexts/QuizDataContext";
import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { DESIGN_LIST } from "@/components/ViewPublicationPage/Question";
import type {
QuizStartpageAlignType,
@ -24,35 +27,46 @@ const StandartLayout = ({
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",
}}
>
}: LayoutProps) => {
const { settings } = useQuizData();
return (
<Box
id="pain"
sx={{
width: "40%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
p: "25px",
flexDirection: alignType === "left" ? "row" : "row-reverse",
minHeight: "100vh",
backgroundPosition: "center",
backgroundSize: "cover",
backgroundImage: settings.cfg.design
? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null,
}}
>
{quizHeaderBlock}
{quizMainBlock}
<Box
sx={{
width: "40%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
p: "25px",
background:
settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
? "linear-gradient(90deg,#272626,transparent)"
: null,
}}
>
{quizHeaderBlock}
{quizMainBlock}
</Box>
{settings.cfg.startpage.background.desktop && (
<Box sx={{ width: "60%", overflow: "hidden" }}>{backgroundBlock}</Box>
)}
</Box>
<Box sx={{ width: "60%", overflow: "hidden" }}>{backgroundBlock}</Box>
</Box>
);
);
};
const ExpandedLayout = ({
alignType,

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

@ -1,6 +1,10 @@
import { Box } from "@mui/material";
import { useQuizData } from "@contexts/QuizDataContext";
import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { DESIGN_LIST } from "@/components/ViewPublicationPage/Question";
import type { QuizStartpageType } from "@model/settingsData";
@ -17,62 +21,70 @@ 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 },
}}
>
}: MobileLayoutProps) => {
const { settings } = useQuizData();
return (
<Box
sx={{
width: "100%",
display: "flex",
flexDirection: "column-reverse",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
p: "25px",
justifyContent: "flex-end",
minHeight: "100vh",
height: "100%",
overflowY: "auto",
overflowX: "hidden",
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
},
"&::-webkit-scrollbar": { width: 0 },
backgroundPosition: "center",
backgroundSize: "cover",
backgroundImage: settings.cfg.design
? `url(${DESIGN_LIST[settings.cfg.theme]})`
: null,
}}
>
{quizHeaderBlock}
<Box
sx={{
height: "80%",
width: "100%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
width: "100%",
alignItems: "flex-start",
p: "25px",
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",
},
}}
>
{quizMainBlock}
{quizHeaderBlock}
<Box
sx={{
height: "80%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
width: "100%",
}}
>
{quizMainBlock}
</Box>
</Box>
{settings.cfg.startpage.background.desktop && (
<Box sx={{ width: "100%", overflow: "hidden" }}>{backgroundBlock}</Box>
)}
</Box>
<Box
sx={{
width: "100%",
overflow: "hidden",
}}
>
{backgroundBlock}
</Box>
</Box>
);
);
};
const ExpandedMobileLayout = ({
quizHeaderBlock,

3
tsconfig.json
View File

@ -20,6 +20,9 @@
"strict": true,
"noFallthroughCasesInSwitch": true,
"paths": {
"@/*": [
"./lib/*"
],
"@ui_kit/*": [
"./lib/ui_kit/*"
],

1
vite.config.ts
View File

@ -3,6 +3,7 @@ import { resolve } from "path";
import { defineConfig } from "vite";
export const alias = {
"@": resolve(__dirname, "./lib/"),
"@ui_kit": resolve(__dirname, "./lib/ui_kit"),
"@icons": resolve(__dirname, "./lib/assets/icons"),
"@stores": resolve(__dirname, "./lib/stores"),