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

updated start page design

Browse Source
This commit is contained in:
aleksandr-raw 2024-04-29 16:45:33 +04:00
parent d1c70c264d
commit acb5354b1e
3 changed files with 137 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,16 +1,16 @@
import { Box } from "@mui/material"; import {Box} from "@mui/material";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext"; import {useRootContainerSize} from "@contexts/RootContainerWidthContext";
import { useQuizData } from "@contexts/QuizDataContext"; import {useQuizData} from "@contexts/QuizDataContext";
import { notReachable } from "@utils/notReachable"; import {notReachable} from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import {quizThemes} from "@utils/themes/Publication/themePublication";
import type { import type {
QuizStartpageAlignType, QuizStartpageAlignType,
QuizStartpageType, QuizStartpageType,
} from "@model/settingsData"; } from "@model/settingsData";
import { DESIGN_LIST } from "@/utils/designList"; import {DESIGN_LIST} from "@/utils/designList";
type StartPageDesktopProps = { type StartPageDesktopProps = {
quizHeaderBlock: JSX.Element; quizHeaderBlock: JSX.Element;
@ -28,6 +28,7 @@ const StandartLayout = ({
quizMainBlock, quizMainBlock,
backgroundBlock, backgroundBlock,
}: LayoutProps) => { }: LayoutProps) => {
const isTablet = useRootContainerSize() < 1100;
const { settings } = useQuizData(); const { settings } = useQuizData();
return ( return (
@ -47,6 +48,7 @@ const StandartLayout = ({
width: 0, width: 0,
}, },
overflowY: "auto", overflowY: "auto",
padding: isTablet ? "15px" : "0",
}} }}
> >
<Box <Box
@ -73,7 +75,16 @@ const StandartLayout = ({
{quizMainBlock} {quizMainBlock}
</Box> </Box>
{settings.cfg.startpage.background.desktop && ( {settings.cfg.startpage.background.desktop && (
<Box sx={{ width: "60%", overflow: "hidden" }}>{backgroundBlock}</Box> <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>
); );
@ -89,8 +100,14 @@ const ExpandedLayout = ({
<Box <Box
sx={{ sx={{
height: "100%", height: "100%",
width: "40%", width: alignType === "center"? "100%": "40%",
padding: "16px", display: "flex",
padding:
alignType === "center"
? "30px 35px"
: alignType === "left"
? "25px 0 31px 35px"
: "25px 35px 31px 0",
margin: margin:
alignType === "center" alignType === "center"
? "0 auto" ? "0 auto"
@ -106,9 +123,16 @@ const ExpandedLayout = ({
> >
<Box <Box
sx={{ sx={{
padding: "16px",
minHeight: "calc(100% - 32px)", minHeight: "calc(100% - 32px)",
position: "relative", position: "relative",
width: "100%",
padding:
alignType === "center"
? "0"
: alignType === "left"
? "0 40px 0 0"
: "0 0 0 40px",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
justifyContent: "space-between", justifyContent: "space-between",
@ -121,7 +145,7 @@ const ExpandedLayout = ({
}, },
}} }}
> >
{quizHeaderBlock} {alignType !== "center" && quizHeaderBlock}
{quizMainBlock} {quizMainBlock}
</Box> </Box>
</Box> </Box>

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

@ -1,12 +1,12 @@
import { Box } from "@mui/material"; import {Box} from "@mui/material";
import { useQuizData } from "@contexts/QuizDataContext"; import {useQuizData} from "@contexts/QuizDataContext";
import { notReachable } from "@utils/notReachable"; import {notReachable} from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import {quizThemes} from "@utils/themes/Publication/themePublication";
import type { QuizStartpageType } from "@model/settingsData"; 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;
@ -28,7 +28,7 @@ const StandartMobileLayout = ({
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: "column-reverse", flexDirection: "column",
flexGrow: 1, flexGrow: 1,
justifyContent: "flex-end", justifyContent: "flex-end",
minHeight: "100%", minHeight: "100%",
@ -65,7 +65,24 @@ const StandartMobileLayout = ({
}, },
}} }}
> >
<Box sx={{marginBottom: "13px"}}>
{quizHeaderBlock} {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%", height: "80%",
@ -79,9 +96,6 @@ const StandartMobileLayout = ({
{quizMainBlock} {quizMainBlock}
</Box> </Box>
</Box> </Box>
{settings.cfg.startpage.background.desktop && (
<Box sx={{ width: "100%", overflow: "hidden" }}>{backgroundBlock}</Box>
)}
</Box> </Box>
); );
}; };
@ -118,7 +132,6 @@ const ExpandedMobileLayout = ({
"&::-webkit-scrollbar-thumb": { backgroundColor: "#b8babf" }, "&::-webkit-scrollbar-thumb": { backgroundColor: "#b8babf" },
}} }}
> >
{quizHeaderBlock}
<Box <Box
sx={{ sx={{
padding: "16px", padding: "16px",
@ -130,6 +143,7 @@ const ExpandedMobileLayout = ({
width: "100%", width: "100%",
}} }}
> >
{quizHeaderBlock}
{quizMainBlock} {quizMainBlock}
</Box> </Box>
</Box> </Box>

137
lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
View File

@ -8,18 +8,18 @@ import {
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { QuizPreviewLayoutByType } from "./QuizPreviewLayoutByType"; import {QuizPreviewLayoutByType} from "./QuizPreviewLayoutByType";
import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe"; import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";
import { useQuizData } from "@contexts/QuizDataContext"; import {useQuizData} from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext"; import {useRootContainerSize} from "@contexts/RootContainerWidthContext";
import { useUADevice } from "@utils/hooks/useUADevice"; import {useUADevice} from "@utils/hooks/useUADevice";
import { quizThemes } from "@utils/themes/Publication/themePublication"; import {quizThemes} from "@utils/themes/Publication/themePublication";
import { NameplateLogo } from "@icons/NameplateLogo"; import {NameplateLogo} from "@icons/NameplateLogo";
import { useQuizViewStore } from "@/stores/quizView"; import {useQuizViewStore} from "@/stores/quizView";
import { DESIGN_LIST } from "@/utils/designList"; import {DESIGN_LIST} from "@/utils/designList";
export const StartPageViewPublication = () => { export const StartPageViewPublication = () => {
const theme = useTheme(); const theme = useTheme();
@ -82,6 +82,48 @@ export const StartPageViewPublication = () => {
) : null ) : null
) : null; ) : null;
const quizHeaderBlock = (<Box
sx={{
margin:
settings.cfg.startpageType === "centered" ? "0 auto" : null,
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "nowrap" : "wrap",
gap:"30px",
mb: "7px",
}}
>
{settings.cfg.startpage.logo &&
<img
src={settings.cfg.startpage.logo}
style={{
height: "40px",
maxWidth: "110px",
objectFit: "cover",
}}
alt=""
/>
}
<Typography
sx={{
fontSize: "12px",
color:
settings.cfg.startpageType === "expanded"
? "white"
: theme.palette.text.primary,
wordBreak: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "normal" : "break-word",
fontFamily: "Helvetica Neue",
}}
>
{settings.cfg.info.orgname}
</Typography>
</Box>
</Box>)
const realQuestionsCount = questions.filter((question) => question.type !== null && question.type !== "result").length; const realQuestionsCount = questions.filter((question) => question.type !== null && question.type !== "result").length;
return ( return (
@ -104,48 +146,7 @@ export const StartPageViewPublication = () => {
}} }}
> >
<QuizPreviewLayoutByType <QuizPreviewLayoutByType
quizHeaderBlock={ quizHeaderBlock={quizHeaderBlock
<Box
sx={{
margin:
settings.cfg.startpageType === "centered" ? "0 auto" : null,
padding: settings.cfg.startpageType === "standard" ? "" : "16px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
flexWrap: "wrap",
gap: "30px",
mb: "7px",
}}
>
{settings.cfg.startpage.logo &&
<img
src={settings.cfg.startpage.logo}
style={{
height: "40px",
maxWidth: "110px",
objectFit: "cover",
}}
alt=""
/>
}
<Typography
sx={{
fontSize: "14px",
color:
settings.cfg.startpageType === "expanded"
? "white"
: theme.palette.text.primary,
wordBreak: "break-word",
}}
>
{settings.cfg.info.orgname}
</Typography>
</Box>
</Box>
} }
quizMainBlock={ quizMainBlock={
<> <>
@ -164,12 +165,13 @@ export const StartPageViewPublication = () => {
: "start" : "start"
: "start", : "start",
marginTop: "28px", marginTop: "28px",
width: "100%", width:settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center" && !isMobile? "50%" : settings.cfg.startpageType === "centered" && !isMobile? "50%" : "100%",
}} }}
> >
<Typography <Typography
sx={{ sx={{
fontWeight: "bold", fontFamily: "Helvetica Neue",
fontWeight: "500",
fontSize: "26px", fontSize: "26px",
fontStyle: "normal", fontStyle: "normal",
fontStretch: "normal", fontStretch: "normal",
@ -191,7 +193,9 @@ export const StartPageViewPublication = () => {
</Typography> </Typography>
<Typography <Typography
sx={{ sx={{
fontSize: "16px", fontFamily: "Helvetica Neue",
fontSize: "17px",
fontWeight: "400",
margin: "16px 0 30px", margin: "16px 0 30px",
overflowWrap: "break-word", overflowWrap: "break-word",
width: "100%", width: "100%",
@ -217,10 +221,12 @@ export const StartPageViewPublication = () => {
variant="contained" variant="contained"
disabled={realQuestionsCount === 0} disabled={realQuestionsCount === 0}
sx={{ sx={{
fontFamily: "Helvetica Neue",
fontSize: "18px", fontSize: "18px",
padding: "10px 30px", padding: "10px 20px",
width: "auto", width: "auto",
background: theme.palette.primary.main, background: theme.palette.primary.main,
borderRadius: "12px",
}} }}
onClick={() => setCurrentQuizStep("question")} onClick={() => setCurrentQuizStep("question")}
> >
@ -229,11 +235,10 @@ export const StartPageViewPublication = () => {
: "Пройти тест"} : "Пройти тест"}
</Button> </Button>
</Box> </Box>
</Box>
</Box>
<Box <Box
sx={{ sx={{
mt: "46px",
display: "flex", display: "flex",
flexGrow: flexGrow:
settings.cfg.startpageType === "centered" settings.cfg.startpageType === "centered"
@ -243,16 +248,24 @@ export const StartPageViewPublication = () => {
: 0, : 0,
gap: "20px", gap: "20px",
alignItems: "flex-end", alignItems: "flex-end",
justifyContent: "space-between", justifyContent: settings.cfg.startpageType === "centered" && isMobile? "center" :"space-between",
width: "100%", width: "100%",
flexWrap: "wrap", flexWrap: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "nowrap" :"wrap",
}} }}
> >
<Box sx={{ maxWidth: "300px" }}> {settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"&& !isMobile && quizHeaderBlock}
<Box sx={{ maxWidth: "300px",
display: settings.cfg.startpageType === "centered" && isMobile? "flex" : "block",
flexDirection: "column",
alignItems: "center",
order: settings.cfg.startpageType === "expanded" && settings.cfg.startpage.position === "center"? "2" : "0"}}>
{settings.cfg.info.site && ( {settings.cfg.info.site && (
<Link mb="16px" href={settings.cfg.info.site}> <Link href={settings.cfg.info.site}
sx={{marginBottom: settings.cfg.startpageType === "centered" && isMobile ? "0" : "16px"}}
>
<Typography <Typography
sx={{ sx={{
fontFamily: "Helvetica Neue",
fontSize: "16px", fontSize: "16px",
color: theme.palette.primary.main, color: theme.palette.primary.main,
overflow: "hidden", overflow: "hidden",
@ -271,6 +284,7 @@ export const StartPageViewPublication = () => {
<Typography <Typography
sx={{ sx={{
fontSize: "16px", fontSize: "16px",
fontFamily: "Helvetica Neue",
color: color:
settings.cfg.startpageType === "expanded" settings.cfg.startpageType === "expanded"
? "#FFFFFF" ? "#FFFFFF"
@ -285,6 +299,7 @@ export const StartPageViewPublication = () => {
<Typography <Typography
sx={{ sx={{
fontSize: "16px", fontSize: "16px",
fontFamily: "Helvetica Neue",
color: color:
settings.cfg.startpageType === "expanded" settings.cfg.startpageType === "expanded"
? "#FFFFFF" ? "#FFFFFF"
@ -298,6 +313,7 @@ export const StartPageViewPublication = () => {
) : ( ) : (
<Typography <Typography
sx={{ sx={{
fontFamily: "Helvetica Neue",
fontSize: "16px", fontSize: "16px",
marginTop: "5px", marginTop: "5px",
color: color:
@ -311,6 +327,7 @@ export const StartPageViewPublication = () => {
)} )}
<Typography <Typography
sx={{ sx={{
fontFamily: "Helvetica Neue",
width: "100%", width: "100%",
overflowWrap: "break-word", overflowWrap: "break-word",
fontSize: "12px", fontSize: "12px",