diff --git a/src/pages/ViewPublicationPage/Footer.tsx b/src/pages/ViewPublicationPage/Footer.tsx
index 1720dadc..ecabba0c 100644
--- a/src/pages/ViewPublicationPage/Footer.tsx
+++ b/src/pages/ViewPublicationPage/Footer.tsx
@@ -1,5 +1,5 @@
import { useState, useEffect } from "react";
-import { Box, Button, Typography, useTheme } from "@mui/material";
+import {Box, Button, Typography, useMediaQuery, useTheme} from "@mui/material";
import { useQuizViewStore } from "@root/quizView";
import { useCurrentQuiz } from "@root/quizes/hooks";
@@ -29,6 +29,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
const { answers } = useQuizViewStore();
const questions = useQuestionsStore().questions as AnyTypedQuizQuestion[];
const theme = useTheme();
+ const isMobileMini = useMediaQuery(theme.breakpoints.down(382));
const linear = !questions.find(({ content }) => content.rule.parentId === "root");
useEffect(() => {
@@ -236,13 +237,11 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
gap: "10px",
}}
>
- {mode[quiz.config.theme] ? (
-
- ):(
-
- )
-
- }
+ {/*{mode[quiz.config.theme] ? (*/}
+ {/* */}
+ {/*):(*/}
+ {/* */}
+ {/*)}*/}
{linear &&
<>
Шаг
@@ -265,7 +264,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
width: "30px",
height: "30px",
color: "#FFF",
- background: theme.palette.brightPurple.main,
+ background: theme.palette.primary.main,
}}
>
{stepNumber}
@@ -311,10 +310,16 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
)}
{showResultForm && quiz?.config.resultInfo.when === "before" && (
diff --git a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx
index 461cf0af..50638d5c 100644
--- a/src/pages/ViewPublicationPage/StartPageViewPublication.tsx
+++ b/src/pages/ViewPublicationPage/StartPageViewPublication.tsx
@@ -16,6 +16,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
const quiz = useCurrentQuiz();
const mode = modes;
const { isMobileDevice } = useUADevice();
+ const isMobile = useMediaQuery(theme.breakpoints.down(650));
if (!quiz) return null;
@@ -87,7 +88,6 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
? "linear-gradient(180deg,transparent,#272626)"
: "linear-gradient(270deg,#272626,transparent)"
: "",
- backgroundColor: theme.palette.background.default,
color: quiz.config.startpageType === "expanded" ? "white" : "black",
}}
@@ -152,7 +152,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
overflowWrap: "break-word",
width: "100%",
textAlign: quiz.config.startpageType === "centered" ? "center" : "-moz-initial",
- color: theme.palette.text.primary
+ color: quiz.config.startpageType === "expanded" ? "white" : theme.palette.text.primary
}}
>
{quiz.name}
@@ -184,7 +184,14 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
{quiz.config.info.clickable ? (
@@ -218,8 +225,8 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
gap: "15px"
}}
>
-
-
+
+
Сделано на PenaQuiz
@@ -248,116 +255,191 @@ function QuizPreviewLayoutByType({
alignType: QuizStartpageAlignType;
}) {
const theme = useTheme();
- const isTablet = useMediaQuery(theme.breakpoints.down(630));
+ const isMobile = useMediaQuery(theme.breakpoints.down(650));
+ function StartPageMobile() {
+ return(
+
+
+ {quizHeaderBlock}
+
+ {quizMainBlock}
+
+
+
+ {backgroundBlock}
+
+
+ )
+ }
+
+
switch (startpageType) {
case null:
case "standard": {
return (
-
-
- {quizHeaderBlock}
- {quizMainBlock}
-
+ <>
+ {isMobile ? (
+
+ ) : (
+
+
+ {quizHeaderBlock}
+ {quizMainBlock}
+
+
+
+ {backgroundBlock}
+
+
+ )}
+
+
-
- {backgroundBlock}
-
-
);
}
case "expanded": {
return (
-
-
- {quizHeaderBlock}
- {quizMainBlock}
-
-
- {backgroundBlock}
-
-
+ <>
+ {isMobile ? (
+
+ ) : (
+
+
+ {quizHeaderBlock}
+ {quizMainBlock}
+
+
+ {backgroundBlock}
+
+
+ )
+ }
+
+
);
}
case "centered": {
return (
-
- {quizHeaderBlock}
- {backgroundBlock && (
-
- {backgroundBlock}
-
- )}
- {quizMainBlock}
-
+ <>
+ {isMobile ? (
+
+ ) : (
+
+ {quizHeaderBlock}
+ {backgroundBlock && (
+
+ {backgroundBlock}
+
+ )}
+ {quizMainBlock}
+
+ )
+ }
+
+
);
}
default:
diff --git a/src/pages/ViewPublicationPage/index.tsx b/src/pages/ViewPublicationPage/index.tsx
index 217bbd1e..fc9beab6 100644
--- a/src/pages/ViewPublicationPage/index.tsx
+++ b/src/pages/ViewPublicationPage/index.tsx
@@ -58,7 +58,7 @@ export const ViewPage = () => {
if (questions.length === 0 || (questions.length === 1 && questions[0].type === "result")) return
return (
-
+
{!visualStartPage ? (
) : (
diff --git a/src/pages/ViewPublicationPage/questions/Emoji.tsx b/src/pages/ViewPublicationPage/questions/Emoji.tsx
index ad9ec1d8..5fad1a1f 100644
--- a/src/pages/ViewPublicationPage/questions/Emoji.tsx
+++ b/src/pages/ViewPublicationPage/questions/Emoji.tsx
@@ -5,7 +5,7 @@ import {
FormControlLabel,
Radio,
useTheme,
- FormControl,
+ FormControl, useMediaQuery,
} from "@mui/material";
import { useQuizViewStore, updateAnswer, deleteAnswer } from "@root/quizView";
@@ -22,6 +22,7 @@ type EmojiProps = {
export const Emoji = ({ currentQuestion }: EmojiProps) => {
const { answers } = useQuizViewStore();
const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down(650));
const { answer } =
answers.find(
({ questionId }) => questionId === currentQuestion.content.id
@@ -49,7 +50,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
marginTop: "20px",
}}
>
-
+
{currentQuestion.content.variants.map((variant, index) => (
{
const [minRange, setMinRange] = useState("0");
const [maxRange, setMaxRange] = useState("100000000000");
const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down(650));
const mode = modes;
const quiz = useCurrentQuiz();
const { answers } = useQuizViewStore();
@@ -72,6 +73,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
width: "100%",
marginTop: "20px",
gap: "30px",
+ paddingRight: isMobile ? "10px" : undefined
}}
>
{
const { answers } = useQuizViewStore();
const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down(650));
const { answer } =
answers.find(
({ questionId }) => questionId === currentQuestion.content.id
@@ -72,6 +73,7 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
alignItems: "center",
gap: "20px",
marginTop: "20px",
+ width: isMobile ? "100%" : undefined
}}
>
{
onChange={(_, value) =>
updateAnswer(currentQuestion.content.id, String(value))
}
- sx={{ height: "50px", gap: "15px" }}
+ sx={{ height: "50px",
+ gap: isMobile ? undefined : "15px",
+ justifyContent: isMobile ? "space-between" : undefined,
+ width: isMobile ? "100%" : undefined
+ }}
max={currentQuestion.content.steps}
icon={form?.icon(theme.palette.primary.main)}
emptyIcon={form?.icon("#9A9AAF")}
diff --git a/src/pages/ViewPublicationPage/questions/Varimg.tsx b/src/pages/ViewPublicationPage/questions/Varimg.tsx
index 2c25ae74..56ee2c29 100644
--- a/src/pages/ViewPublicationPage/questions/Varimg.tsx
+++ b/src/pages/ViewPublicationPage/questions/Varimg.tsx
@@ -1,10 +1,10 @@
import {
- Box,
- Typography,
- RadioGroup,
- FormControlLabel,
- Radio,
- useTheme,
+ Box,
+ Typography,
+ RadioGroup,
+ FormControlLabel,
+ Radio,
+ useTheme, useMediaQuery,
} from "@mui/material";
import gag from "./gag.png"
@@ -27,6 +27,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
const mode = modes;
const quiz = useCurrentQuiz();
const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down(650));
const { answer } =
answers.find(
({ questionId }) => questionId === currentQuestion.content.id
@@ -38,7 +39,13 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
return (
{currentQuestion.title}
-
+
{
flexBasis: "100%",
}}
>
-
+
{currentQuestion.content.variants.map((variant, index) => (
{
border: `1px solid`,
borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
display: "flex",
+ margin: isMobile ? 0 : undefined,
}}
value={index}
onClick={(event) => {
@@ -113,7 +121,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
alt=""
/>
:
- (variant?.extendedText || "Выберите вариант ответа слева")
+ (variant?.extendedText || isMobile ? ("Выберите вариант ответа ниже") : ("Выберите вариант ответа слева"))
}