fix: pages min height
This commit is contained in:
IlyaDoronin
parent
a093912070
commit
394c47a938
@ -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,
|
||||
}}
|
||||
>
|
||||
|
||||
@ -2,87 +2,86 @@ import { useQuizData } from "@contexts/QuizDataContext";
|
||||
import { Box, Typography, useTheme } from "@mui/material";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
|
||||
type FooterProps = {
|
||||
stepNumber: number | null;
|
||||
nextButton: ReactNode;
|
||||
prevButton: ReactNode;
|
||||
stepNumber: number | null;
|
||||
nextButton: ReactNode;
|
||||
prevButton: ReactNode;
|
||||
};
|
||||
|
||||
export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
|
||||
const theme = useTheme();
|
||||
const { questions } = useQuizData();
|
||||
console.log(questions)
|
||||
const theme = useTheme();
|
||||
const { questions } = useQuizData();
|
||||
console.log(questions);
|
||||
|
||||
return (
|
||||
<Box
|
||||
return (
|
||||
<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={{
|
||||
position: "relative",
|
||||
padding: "15px 0",
|
||||
borderTop: `1px solid ${theme.palette.grey[400]}`,
|
||||
height: '75px',
|
||||
display: "flex",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "10px",
|
||||
marginRight: "auto",
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxWidth: "1000px",
|
||||
padding: "0 10px",
|
||||
margin: "0 auto",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
<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,
|
||||
}}
|
||||
>
|
||||
{/*{mode[settings.cfg.theme] ? (*/}
|
||||
{/* <NameplateLogoFQ style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
|
||||
{/*):(*/}
|
||||
{/* <NameplateLogoFQDark style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
|
||||
{/*)}*/}
|
||||
{stepNumber !== null &&
|
||||
<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>
|
||||
}
|
||||
{stepNumber}
|
||||
</Typography>
|
||||
<Typography>Из</Typography>
|
||||
<Typography sx={{ fontWeight: "bold" }}>
|
||||
{questions.filter((q) => q.type !== "result").length}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "10px",
|
||||
marginRight: "auto",
|
||||
// color: theme.palette.grey1.main,
|
||||
}}
|
||||
>
|
||||
{/* <Typography>Шаг</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "10px",
|
||||
marginRight: "auto",
|
||||
// color: theme.palette.grey1.main,
|
||||
}}
|
||||
>
|
||||
{/* <Typography>Шаг</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
display: "flex",
|
||||
@ -97,15 +96,15 @@ export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
|
||||
}}
|
||||
>
|
||||
{stepNumber} */}
|
||||
{/* </Typography> */}
|
||||
{/* <Typography>Из</Typography>
|
||||
{/* </Typography> */}
|
||||
{/* <Typography>Из</Typography>
|
||||
<Typography sx={{ fontWeight: "bold" }}>
|
||||
{questions.length}
|
||||
</Typography> */}
|
||||
</Box>
|
||||
{prevButton}
|
||||
{nextButton}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
{prevButton}
|
||||
{nextButton}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@ -23,74 +23,101 @@ import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
type Props = {
|
||||
currentQuestion: RealTypedQuizQuestion;
|
||||
currentQuestionStepNumber: number | null;
|
||||
nextButton: ReactNode;
|
||||
prevButton: ReactNode;
|
||||
currentQuestion: RealTypedQuizQuestion;
|
||||
currentQuestionStepNumber: number | null;
|
||||
nextButton: ReactNode;
|
||||
prevButton: ReactNode;
|
||||
};
|
||||
|
||||
export const Question = ({
|
||||
currentQuestion,
|
||||
currentQuestionStepNumber,
|
||||
nextButton,
|
||||
prevButton,
|
||||
currentQuestion,
|
||||
currentQuestionStepNumber,
|
||||
nextButton,
|
||||
prevButton,
|
||||
}: Props) => {
|
||||
const theme = useTheme();
|
||||
const { settings } = useQuizData();
|
||||
console.log(currentQuestionStepNumber)
|
||||
return (
|
||||
<Box sx={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
height: "100%",
|
||||
}}>
|
||||
<Box sx={{
|
||||
height: "calc(100% - 75px)",
|
||||
width: "100%",
|
||||
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} />
|
||||
{quizThemes[settings.cfg.theme].isLight ? (
|
||||
<Link target={"_blank"} href={"https://quiz.pena.digital"}>
|
||||
<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" }} />
|
||||
</Link>
|
||||
|
||||
)}
|
||||
</Box>
|
||||
<Footer
|
||||
stepNumber={currentQuestionStepNumber}
|
||||
prevButton={prevButton}
|
||||
nextButton={nextButton}
|
||||
const theme = useTheme();
|
||||
const { settings } = useQuizData();
|
||||
console.log(currentQuestionStepNumber);
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<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}
|
||||
/>
|
||||
{quizThemes[settings.cfg.theme].isLight ? (
|
||||
<Link target={"_blank"} href={"https://quiz.pena.digital"}>
|
||||
<NameplateLogoFQ
|
||||
style={{ fontSize: "34px", width: "200px", height: "auto" }}
|
||||
/>
|
||||
</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 }: {
|
||||
question: RealTypedQuizQuestion;
|
||||
stepNumber: number | null;
|
||||
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);
|
||||
}
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,11 +33,12 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
height: "100%",
|
||||
minHeight: "100vh",
|
||||
width: "100%",
|
||||
pt: "28px",
|
||||
overflow: "auto",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
}}
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user