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",
borderRadius: "4px",
height: "100%",
minHeight: "100vh",
display: isWide && !isMobile ? "flex" : undefined,
}}
>

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

@ -2,7 +2,6 @@ import { useQuizData } from "@contexts/QuizDataContext";
import { Box, Typography, useTheme } from "@mui/material";
import { ReactNode } from "react";
type FooterProps = {
stepNumber: number | null;
nextButton: ReactNode;
@ -12,7 +11,7 @@ type FooterProps = {
export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
const theme = useTheme();
const { questions } = useQuizData();
console.log(questions)
console.log(questions);
return (
<Box
@ -20,7 +19,7 @@ export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
position: "relative",
padding: "15px 0",
borderTop: `1px solid ${theme.palette.grey[400]}`,
height: '75px',
height: "75px",
display: "flex",
}}
>
@ -40,7 +39,7 @@ export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
{/*):(*/}
{/* <NameplateLogoFQDark style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
{/*)}*/}
{stepNumber !== null &&
{stepNumber !== null && (
<Box
sx={{
display: "flex",
@ -68,10 +67,10 @@ export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
</Typography>
<Typography>Из</Typography>
<Typography sx={{ fontWeight: "bold" }}>
{questions.filter(q => q.type !== "result").length}
{questions.filter((q) => q.type !== "result").length}
</Typography>
</Box>
}
)}
<Box
sx={{

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

@ -37,33 +37,45 @@ export const Question = ({
}: Props) => {
const theme = useTheme();
const { settings } = useQuizData();
console.log(currentQuestionStepNumber)
console.log(currentQuestionStepNumber);
return (
<Box sx={{
<Box
sx={{
backgroundColor: theme.palette.background.default,
height: "100%",
}}>
<Box sx={{
}}
>
<Box
sx={{
height: "calc(100% - 75px)",
width: "100%",
minHeight: "calc(100vh - 75px)",
maxWidth: "1440px",
padding: "40px 25px 20px",
margin: "0 auto",
overflow: "auto",
display: "flex",
flexDirection: "column",
justifyContent: "space-between"
}}>
<QuestionByType key={currentQuestion.id} question={currentQuestion} stepNumber={currentQuestionStepNumber} />
justifyContent: "space-between",
}}
>
<QuestionByType
key={currentQuestion.id}
question={currentQuestion}
stepNumber={currentQuestionStepNumber}
/>
{quizThemes[settings.cfg.theme].isLight ? (
<Link target={"_blank"} href={"https://quiz.pena.digital"}>
<NameplateLogoFQ style={{ fontSize: "34px", width: "200px", height: "auto" }} />
<NameplateLogoFQ
style={{ fontSize: "34px", width: "200px", height: "auto" }}
/>
</Link>
) : (
<Link target={"_blank"} href={"https://quiz.pena.digital"}>
<NameplateLogoFQDark style={{ fontSize: "34px", width: "200px", height: "auto" }} />
<NameplateLogoFQDark
style={{ fontSize: "34px", width: "200px", height: "auto" }}
/>
</Link>
)}
</Box>
<Footer
@ -75,22 +87,37 @@ export const Question = ({
);
};
function QuestionByType({ question, stepNumber }: {
function QuestionByType({
question,
stepNumber,
}: {
question: RealTypedQuizQuestion;
stepNumber: number | null;
}) {
switch (question.type) {
case "variant": return <Variant currentQuestion={question} />;
case "images": return <Images currentQuestion={question} />;
case "varimg": return <Varimg currentQuestion={question} />;
case "emoji": return <Emoji currentQuestion={question} />;
case "text": return <Text currentQuestion={question} stepNumber={stepNumber}/>;
case "select": 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);
case "variant":
return <Variant currentQuestion={question} />;
case "images":
return <Images currentQuestion={question} />;
case "varimg":
return <Varimg currentQuestion={question} />;
case "emoji":
return <Emoji currentQuestion={question} />;
case "text":
return <Text currentQuestion={question} stepNumber={stepNumber} />;
case "select":
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);
}
}

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

@ -33,6 +33,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
alignItems: "center",
justifyContent: "space-between",
height: "100%",
minHeight: "100vh",
width: "100%",
pt: "28px",
overflow: "auto",