правки по дизайну
This commit is contained in:
parent
4ce5332045
commit
379ace36e2
@ -1,5 +1,5 @@
|
|||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { Box, useTheme } from "@mui/material";
|
import {Box, useMediaQuery, useTheme} from "@mui/material";
|
||||||
|
|
||||||
import { useQuestionsStore } from "@root/quizData/store"
|
import { useQuestionsStore } from "@root/quizData/store"
|
||||||
import { getQuestionById } from "@root/quizData/actions";
|
import { getQuestionById } from "@root/quizData/actions";
|
||||||
@ -46,6 +46,7 @@ const QUESTIONS_MAP: any = {
|
|||||||
|
|
||||||
export const Question = ({ questions }: QuestionProps) => {
|
export const Question = ({ questions }: QuestionProps) => {
|
||||||
const { settings } = useQuestionsStore()
|
const { settings } = useQuestionsStore()
|
||||||
|
const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||||||
const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>();
|
const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>();
|
||||||
const [showContactForm, setShowContactForm] = useState<boolean>(false);
|
const [showContactForm, setShowContactForm] = useState<boolean>(false);
|
||||||
const [showResultForm, setShowResultForm] = useState<boolean>(false);
|
const [showResultForm, setShowResultForm] = useState<boolean>(false);
|
||||||
@ -71,14 +72,14 @@ export const Question = ({ questions }: QuestionProps) => {
|
|||||||
|
|
||||||
const QuestionComponent =
|
const QuestionComponent =
|
||||||
QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
|
QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
|
||||||
const theme = useTheme();
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
backgroundColor: theme.palette.background.default
|
backgroundColor: theme.palette.background.default,
|
||||||
|
height: isMobile ? undefined : "100vh"
|
||||||
}}
|
}}
|
||||||
|
|
||||||
height="100vh"
|
|
||||||
>
|
>
|
||||||
{!showContactForm && !showResultForm && (
|
{!showContactForm && !showResultForm && (
|
||||||
<Box
|
<Box
|
||||||
|
@ -66,7 +66,7 @@ export const ResultForm = ({
|
|||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
height: "100vh",
|
height: isMobile ? undefined : "100vh",
|
||||||
width: "100vw",
|
width: "100vw",
|
||||||
pt: "28px",
|
pt: "28px",
|
||||||
}}
|
}}
|
||||||
|
@ -432,7 +432,7 @@ function QuizPreviewLayoutByType({
|
|||||||
padding: "16px",
|
padding: "16px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
justifyContent: "center",
|
justifyContent: "space-between",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
height: "100%",
|
height: "100%",
|
||||||
"&::-webkit-scrollbar": { width: 0 },
|
"&::-webkit-scrollbar": { width: 0 },
|
||||||
|
Loading…
Reference in New Issue
Block a user