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

fix: pages min height

Browse Source
This commit is contained in:
IlyaDoronin 2024-02-29 17:07:09 +03:00
parent a093912070
commit 394c47a938
4 changed files with 170 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/components/ViewPublicationPage/ContactForm.tsx
View File

@ -160,6 +160,7 @@ export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
width: isWide && !isMobile ? "100%" : isMobile ? undefined : "530px", width: isWide && !isMobile ? "100%" : isMobile ? undefined : "530px",
borderRadius: "4px", borderRadius: "4px",
height: "100%", height: "100%",
minHeight: "100vh",
display: isWide && !isMobile ? "flex" : undefined, display: isWide && !isMobile ? "flex" : undefined,
}} }}
> >

157
lib/components/ViewPublicationPage/Footer.tsx
View File

@ -2,87 +2,86 @@ import { useQuizData } from "@contexts/QuizDataContext";
import { Box, Typography, useTheme } from "@mui/material"; import { Box, Typography, useTheme } from "@mui/material";
import { ReactNode } from "react"; import { ReactNode } from "react";
type FooterProps = { type FooterProps = {
stepNumber: number | null; stepNumber: number | null;
nextButton: ReactNode; nextButton: ReactNode;
prevButton: ReactNode; prevButton: ReactNode;
}; };
export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => { export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
const theme = useTheme(); const theme = useTheme();
const { questions } = useQuizData(); const { questions } = useQuizData();
console.log(questions) console.log(questions);
return ( return (
<Box <Box
sx={{
position: "relative",
padding: "15px 0",
borderTop: `1px solid ${theme.palette.grey[400]}`,
height: "75px",
display: "flex",
}}
>
<Box
sx={{
width: "100%",
maxWidth: "1000px",
padding: "0 10px",
margin: "0 auto",
display: "flex",
alignItems: "center",
gap: "10px",
}}
>
{/*{mode[settings.cfg.theme] ? (*/}
{/* <NameplateLogoFQ style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
{/*):(*/}
{/* <NameplateLogoFQDark style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
{/*)}*/}
{stepNumber !== null && (
<Box
sx={{ sx={{
position: "relative", display: "flex",
padding: "15px 0", alignItems: "center",
borderTop: `1px solid ${theme.palette.grey[400]}`, gap: "10px",
height: '75px', marginRight: "auto",
display: "flex", color: theme.palette.text.primary,
}} }}
> >
<Box <Typography>Шаг</Typography>
sx={{ <Typography
width: "100%", sx={{
maxWidth: "1000px", display: "flex",
padding: "0 10px", justifyContent: "center",
margin: "0 auto", alignItems: "center",
display: "flex", fontWeight: "bold",
alignItems: "center", borderRadius: "50%",
gap: "10px", width: "30px",
}} height: "30px",
color: "#FFF",
background: theme.palette.primary.main,
}}
> >
{/*{mode[settings.cfg.theme] ? (*/} {stepNumber}
{/* <NameplateLogoFQ style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/} </Typography>
{/*):(*/} <Typography>Из</Typography>
{/* <NameplateLogoFQDark style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/} <Typography sx={{ fontWeight: "bold" }}>
{/*)}*/} {questions.filter((q) => q.type !== "result").length}
{stepNumber !== null && </Typography>
<Box </Box>
sx={{ )}
display: "flex",
alignItems: "center",
gap: "10px",
marginRight: "auto",
color: theme.palette.text.primary,
}}
>
<Typography>Шаг</Typography>
<Typography
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
fontWeight: "bold",
borderRadius: "50%",
width: "30px",
height: "30px",
color: "#FFF",
background: theme.palette.primary.main,
}}
>
{stepNumber}
</Typography>
<Typography>Из</Typography>
<Typography sx={{ fontWeight: "bold" }}>
{questions.filter(q => q.type !== "result").length}
</Typography>
</Box>
}
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: "10px", gap: "10px",
marginRight: "auto", marginRight: "auto",
// color: theme.palette.grey1.main, // color: theme.palette.grey1.main,
}} }}
> >
{/* <Typography>Шаг</Typography> {/* <Typography>Шаг</Typography>
<Typography <Typography
sx={{ sx={{
display: "flex", display: "flex",
@ -97,15 +96,15 @@ export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
}} }}
> >
{stepNumber} */} {stepNumber} */}
{/* </Typography> */} {/* </Typography> */}
{/* <Typography>Из</Typography> {/* <Typography>Из</Typography>
<Typography sx={{ fontWeight: "bold" }}> <Typography sx={{ fontWeight: "bold" }}>
{questions.length} {questions.length}
</Typography> */} </Typography> */}
</Box>
{prevButton}
{nextButton}
</Box>
</Box> </Box>
); {prevButton}
{nextButton}
</Box>
</Box>
);
}; };

151
lib/components/ViewPublicationPage/Question.tsx
View File

@ -23,74 +23,101 @@ import { quizThemes } from "@utils/themes/Publication/themePublication";
import { ReactNode } from "react"; import { ReactNode } from "react";
type Props = { type Props = {
currentQuestion: RealTypedQuizQuestion; currentQuestion: RealTypedQuizQuestion;
currentQuestionStepNumber: number | null; currentQuestionStepNumber: number | null;
nextButton: ReactNode; nextButton: ReactNode;
prevButton: ReactNode; prevButton: ReactNode;
}; };
export const Question = ({ export const Question = ({
currentQuestion, currentQuestion,
currentQuestionStepNumber, currentQuestionStepNumber,
nextButton, nextButton,
prevButton, prevButton,
}: Props) => { }: Props) => {
const theme = useTheme(); const theme = useTheme();
const { settings } = useQuizData(); const { settings } = useQuizData();
console.log(currentQuestionStepNumber) console.log(currentQuestionStepNumber);
return ( return (
<Box sx={{ <Box
backgroundColor: theme.palette.background.default, sx={{
height: "100%", backgroundColor: theme.palette.background.default,
}}> height: "100%",
<Box sx={{ }}
height: "calc(100% - 75px)", >
width: "100%", <Box
maxWidth: "1440px", sx={{
padding: "40px 25px 20px", height: "calc(100% - 75px)",
margin: "0 auto", width: "100%",
overflow: "auto", minHeight: "calc(100vh - 75px)",
display: "flex", maxWidth: "1440px",
flexDirection: "column", padding: "40px 25px 20px",
justifyContent: "space-between" margin: "0 auto",
}}> overflow: "auto",
<QuestionByType key={currentQuestion.id} question={currentQuestion} stepNumber={currentQuestionStepNumber} /> display: "flex",
{quizThemes[settings.cfg.theme].isLight ? ( flexDirection: "column",
<Link target={"_blank"} href={"https://quiz.pena.digital"}> justifyContent: "space-between",
<NameplateLogoFQ style={{ fontSize: "34px", width: "200px", height: "auto" }} /> }}
</Link> >
) : ( <QuestionByType
<Link target={"_blank"} href={"https://quiz.pena.digital"}> key={currentQuestion.id}
<NameplateLogoFQDark style={{ fontSize: "34px", width: "200px", height: "auto" }} /> question={currentQuestion}
</Link> stepNumber={currentQuestionStepNumber}
/>
)} {quizThemes[settings.cfg.theme].isLight ? (
</Box> <Link target={"_blank"} href={"https://quiz.pena.digital"}>
<Footer <NameplateLogoFQ
stepNumber={currentQuestionStepNumber} style={{ fontSize: "34px", width: "200px", height: "auto" }}
prevButton={prevButton}
nextButton={nextButton}
/> />
</Box> </Link>
); ) : (
<Link target={"_blank"} href={"https://quiz.pena.digital"}>
<NameplateLogoFQDark
style={{ fontSize: "34px", width: "200px", height: "auto" }}
/>
</Link>
)}
</Box>
<Footer
stepNumber={currentQuestionStepNumber}
prevButton={prevButton}
nextButton={nextButton}
/>
</Box>
);
}; };
function QuestionByType({ question, stepNumber }: { function QuestionByType({
question: RealTypedQuizQuestion; question,
stepNumber: number | null; stepNumber,
}: {
question: RealTypedQuizQuestion;
stepNumber: number | null;
}) { }) {
switch (question.type) { switch (question.type) {
case "variant": return <Variant currentQuestion={question} />; case "variant":
case "images": return <Images currentQuestion={question} />; return <Variant currentQuestion={question} />;
case "varimg": return <Varimg currentQuestion={question} />; case "images":
case "emoji": return <Emoji currentQuestion={question} />; return <Images currentQuestion={question} />;
case "text": return <Text currentQuestion={question} stepNumber={stepNumber}/>; case "varimg":
case "select": return <Select currentQuestion={question} />; return <Varimg currentQuestion={question} />;
case "date": return <Date currentQuestion={question} />; case "emoji":
case "number": return <Number currentQuestion={question} />; return <Emoji currentQuestion={question} />;
case "file": return <File currentQuestion={question} />; case "text":
case "page": return <Page currentQuestion={question} />; return <Text currentQuestion={question} stepNumber={stepNumber} />;
case "rating": return <Rating currentQuestion={question} />; case "select":
default: notReachable(question); return <Select currentQuestion={question} />;
} case "date":
return <Date currentQuestion={question} />;
case "number":
return <Number currentQuestion={question} />;
case "file":
return <File currentQuestion={question} />;
case "page":
return <Page currentQuestion={question} />;
case "rating":
return <Rating currentQuestion={question} />;
default:
notReachable(question);
}
} }

3
lib/components/ViewPublicationPage/ResultForm.tsx
View File

@ -33,11 +33,12 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
height: "100%", height: "100%",
minHeight: "100vh",
width: "100%", width: "100%",
pt: "28px", pt: "28px",
overflow: "auto", overflow: "auto",
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
}} }}
> >
<Box <Box
sx={{ sx={{