update Behavior of the logo and back arrow buttons
This commit is contained in:
parent
e6252449f0
commit
c51cdbea67
@ -18,7 +18,7 @@ export default function Component() {
|
|||||||
const [select, setSelect] = React.useState(0);
|
const [select, setSelect] = React.useState(0);
|
||||||
const userId = useUserStore((state) => state.userId);
|
const userId = useUserStore((state) => state.userId);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const location = useLocation()
|
const location = useLocation();
|
||||||
|
|
||||||
const onClick = () => (userId ? navigate("/list") : navigate("/signin"));
|
const onClick = () => (userId ? navigate("/list") : navigate("/signin"));
|
||||||
|
|
||||||
@ -41,7 +41,9 @@ export default function Component() {
|
|||||||
padding: 0,
|
padding: 0,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<Link to="/">
|
||||||
<QuizLogo width={isMobile ? 100 : 150} />
|
<QuizLogo width={isMobile ? 100 : 150} />
|
||||||
|
</Link>
|
||||||
{/*<Box*/}
|
{/*<Box*/}
|
||||||
{/* sx={{*/}
|
{/* sx={{*/}
|
||||||
{/* maxWidth: '595px',*/}
|
{/* maxWidth: '595px',*/}
|
||||||
|
|||||||
@ -53,10 +53,7 @@ const Transition = React.forwardRef(function Transition(
|
|||||||
});
|
});
|
||||||
|
|
||||||
const height = "80px";
|
const height = "80px";
|
||||||
export default function FullScreenDialog({
|
export default function FullScreenDialog({ theme = "dark", bgColor = "#F2F3F7" }: Props) {
|
||||||
theme = "dark",
|
|
||||||
bgColor = "#F2F3F7",
|
|
||||||
}: Props) {
|
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const themeMUI = useTheme();
|
const themeMUI = useTheme();
|
||||||
@ -79,19 +76,20 @@ export default function FullScreenDialog({
|
|||||||
sxsect={{
|
sxsect={{
|
||||||
minHeight: isMobile ? "50px" : { height },
|
minHeight: isMobile ? "50px" : { height },
|
||||||
position: "fixed",
|
position: "fixed",
|
||||||
zIndex: 11
|
zIndex: 11,
|
||||||
|
|
||||||
}}
|
}}
|
||||||
sxcont={{
|
sxcont={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
svg: { color: "#000000" },
|
svg: { color: "#000000" },
|
||||||
padding: isMobile ? 0 : "0 22px 0 40px"
|
padding: isMobile ? 0 : "0 22px 0 40px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box sx={{ bgcolor: "none", paddingTop: isMobile ? "6px" : 0 }}>
|
<Box sx={{ bgcolor: "none", paddingTop: isMobile ? "6px" : 0 }}>
|
||||||
|
<Link to="/">
|
||||||
<Logotip width={150} />
|
<Logotip width={150} />
|
||||||
|
</Link>
|
||||||
</Box>
|
</Box>
|
||||||
{!isMobile && (
|
{!isMobile && (
|
||||||
<Button
|
<Button
|
||||||
@ -144,16 +142,8 @@ export default function FullScreenDialog({
|
|||||||
pt: "12px",
|
pt: "12px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{isMobile && (
|
{isMobile && <Logotip width={150} />}
|
||||||
<Logotip width={150}/>
|
<IconButton sx={{ ml: "auto" }} edge="start" color="inherit" onClick={handleClose} aria-label="close">
|
||||||
)}
|
|
||||||
<IconButton
|
|
||||||
sx={{ ml: "auto" }}
|
|
||||||
edge="start"
|
|
||||||
color="inherit"
|
|
||||||
onClick={handleClose}
|
|
||||||
aria-label="close"
|
|
||||||
>
|
|
||||||
<CloseIcon />
|
<CloseIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
|
import { ResultSettings } from "./ResultSettings";
|
||||||
import { ResultSettings } from "./ResultSettings"
|
|
||||||
import { createFrontResult } from "@root/questions/actions";
|
import { createFrontResult } from "@root/questions/actions";
|
||||||
import { useQuestionsStore } from "@root/questions/store";
|
import { useQuestionsStore } from "@root/questions/store";
|
||||||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||||||
@ -7,6 +6,8 @@ import { Box, Typography, useTheme, useMediaQuery, Button } from "@mui/material"
|
|||||||
import image from "../../assets/Rectangle 110.png";
|
import image from "../../assets/Rectangle 110.png";
|
||||||
import { enqueueSnackbar } from "notistack";
|
import { enqueueSnackbar } from "notistack";
|
||||||
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
||||||
|
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
|
||||||
|
import { decrementCurrentStep } from "@root/quizes/actions";
|
||||||
|
|
||||||
export const FirstEntry = () => {
|
export const FirstEntry = () => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
@ -18,15 +19,19 @@ export const FirstEntry = () => {
|
|||||||
if (quiz?.config.haveRoot) {
|
if (quiz?.config.haveRoot) {
|
||||||
questions
|
questions
|
||||||
.filter((question: AnyTypedQuizQuestion) => {
|
.filter((question: AnyTypedQuizQuestion) => {
|
||||||
return question.type !== null && question.content.rule.parentId.length !== 0 && question.content.rule.children.length === 0
|
return (
|
||||||
})
|
question.type !== null &&
|
||||||
.forEach(question => {
|
question.content.rule.parentId.length !== 0 &&
|
||||||
createFrontResult(quiz.id, question.content.id)
|
question.content.rule.children.length === 0
|
||||||
|
);
|
||||||
})
|
})
|
||||||
|
.forEach((question) => {
|
||||||
|
createFrontResult(quiz.id, question.content.id);
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
createFrontResult(quiz.id, "line")
|
createFrontResult(quiz.id, "line");
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -53,7 +58,7 @@ export const FirstEntry = () => {
|
|||||||
mr: !isSmallMonitor ? "104px" : 0,
|
mr: !isSmallMonitor ? "104px" : 0,
|
||||||
marginBottom: isSmallMonitor ? "20px" : 0,
|
marginBottom: isSmallMonitor ? "20px" : 0,
|
||||||
position: "relative",
|
position: "relative",
|
||||||
height: "100%"
|
height: "100%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography variant="h5" sx={{ marginBottom: "20px" }}>
|
<Typography variant="h5" sx={{ marginBottom: "20px" }}>
|
||||||
@ -69,7 +74,10 @@ export const FirstEntry = () => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography sx={{ color: "#4D4D4D", width: "95%" }}>
|
<Typography sx={{ color: "#4D4D4D", width: "95%" }}>
|
||||||
Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте пользователя по нужной ссылке.
|
Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным
|
||||||
|
пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально
|
||||||
|
индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте
|
||||||
|
пользователя по нужной ссылке.
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography
|
<Typography
|
||||||
sx={{
|
sx={{
|
||||||
@ -91,6 +99,19 @@ export const FirstEntry = () => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ display: "flex", justifyContent: "flex-start", alignItems: "center", gap: "8px", mt: "30px" }}>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
sx={{
|
||||||
|
padding: "10px 20px",
|
||||||
|
borderRadius: "8px",
|
||||||
|
height: "44px",
|
||||||
|
}}
|
||||||
|
onClick={decrementCurrentStep}
|
||||||
|
>
|
||||||
|
<ArrowLeft />
|
||||||
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
onClick={create}
|
onClick={create}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
@ -100,12 +121,13 @@ export const FirstEntry = () => {
|
|||||||
lineHeight: "18px",
|
lineHeight: "18px",
|
||||||
width: "216px",
|
width: "216px",
|
||||||
height: "44px",
|
height: "44px",
|
||||||
mt: "30px",
|
|
||||||
p: "10px 20px"
|
p: "10px 20px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Создать результаты
|
Создать результаты
|
||||||
</Button>
|
</Button>
|
||||||
|
</Box>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|||||||
@ -1,12 +1,4 @@
|
|||||||
import {
|
import { Box, Button, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||||
Box,
|
|
||||||
Button,
|
|
||||||
SxProps,
|
|
||||||
Theme,
|
|
||||||
Typography,
|
|
||||||
useMediaQuery,
|
|
||||||
useTheme,
|
|
||||||
} from "@mui/material";
|
|
||||||
import { createQuiz } from "@root/quizes/actions";
|
import { createQuiz } from "@root/quizes/actions";
|
||||||
import { useQuizes } from "@root/quizes/hooks";
|
import { useQuizes } from "@root/quizes/hooks";
|
||||||
import SectionWrapper from "@ui_kit/SectionWrapper";
|
import SectionWrapper from "@ui_kit/SectionWrapper";
|
||||||
@ -16,16 +8,12 @@ import ComplexNavText from "./ComplexNavText";
|
|||||||
import FirstQuiz from "./FirstQuiz";
|
import FirstQuiz from "./FirstQuiz";
|
||||||
import QuizCard from "./QuizCard";
|
import QuizCard from "./QuizCard";
|
||||||
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
outerContainerSx?: SxProps<Theme>;
|
outerContainerSx?: SxProps<Theme>;
|
||||||
children?: React.ReactNode;
|
children?: React.ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function MyQuizzesFull({
|
export default function MyQuizzesFull({ outerContainerSx: sx, children }: Props) {
|
||||||
outerContainerSx: sx,
|
|
||||||
children,
|
|
||||||
}: Props) {
|
|
||||||
const { quizes } = useQuizes();
|
const { quizes } = useQuizes();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
@ -69,14 +57,8 @@ export default function MyQuizzesFull({
|
|||||||
mb: "60px",
|
mb: "60px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{quizes.map(quiz => (
|
{quizes.map((quiz) => (
|
||||||
<QuizCard
|
<QuizCard key={quiz.id} quiz={quiz} openCount={0} applicationCount={0} conversionPercent={0} />
|
||||||
key={quiz.id}
|
|
||||||
quiz={quiz}
|
|
||||||
openCount={0}
|
|
||||||
applicationCount={0}
|
|
||||||
conversionPercent={0}
|
|
||||||
/>
|
|
||||||
))}
|
))}
|
||||||
</Box>
|
</Box>
|
||||||
{children}
|
{children}
|
||||||
|
|||||||
@ -5,6 +5,7 @@ import { decrementCurrentStep } from "@root/quizes/actions";
|
|||||||
import PenaLogo from "../PenaLogo";
|
import PenaLogo from "../PenaLogo";
|
||||||
import CustomAvatar from "./Avatar";
|
import CustomAvatar from "./Avatar";
|
||||||
import NavMenuItem from "./NavMenuItem";
|
import NavMenuItem from "./NavMenuItem";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
@ -25,7 +26,9 @@ export default function Header() {
|
|||||||
zIndex: theme.zIndex.drawer + 1,
|
zIndex: theme.zIndex.drawer + 1,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<Link to="/">
|
||||||
<PenaLogo width={124} />
|
<PenaLogo width={124} />
|
||||||
|
</Link>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|||||||
@ -1,11 +1,4 @@
|
|||||||
import {
|
import { Box, Container, IconButton, Typography, useTheme, useMediaQuery } from "@mui/material";
|
||||||
Box,
|
|
||||||
Container,
|
|
||||||
IconButton,
|
|
||||||
Typography,
|
|
||||||
useTheme,
|
|
||||||
useMediaQuery,
|
|
||||||
} from "@mui/material";
|
|
||||||
import NavMenuItem from "./NavMenuItem";
|
import NavMenuItem from "./NavMenuItem";
|
||||||
import PenaLogo from "../PenaLogo";
|
import PenaLogo from "../PenaLogo";
|
||||||
import WalletIcon from "@icons/WalletIcon";
|
import WalletIcon from "@icons/WalletIcon";
|
||||||
@ -13,7 +6,7 @@ import CustomAvatar from "./Avatar";
|
|||||||
import { Burger } from "@icons/Burger";
|
import { Burger } from "@icons/Burger";
|
||||||
import { clearAuthToken } from "@frontend/kitui";
|
import { clearAuthToken } from "@frontend/kitui";
|
||||||
import { logout } from "@api/auth";
|
import { logout } from "@api/auth";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
import { enqueueSnackbar } from "notistack";
|
import { enqueueSnackbar } from "notistack";
|
||||||
import { clearUserData } from "@root/user";
|
import { clearUserData } from "@root/user";
|
||||||
import { LogoutButton } from "@ui_kit/LogoutButton";
|
import { LogoutButton } from "@ui_kit/LogoutButton";
|
||||||
@ -59,7 +52,9 @@ export default function HeaderFull() {
|
|||||||
style={{ fontSize: "30px", color: "#000000", cursor: "pointer" }}
|
style={{ fontSize: "30px", color: "#000000", cursor: "pointer" }}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
<Link to="/">
|
||||||
<PenaLogo width={124} />
|
<PenaLogo width={124} />
|
||||||
|
</Link>
|
||||||
{!isTablet && (
|
{!isTablet && (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
@ -93,10 +88,7 @@ export default function HeaderFull() {
|
|||||||
>
|
>
|
||||||
Мой баланс
|
Мой баланс
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography
|
<Typography variant="body2" color={theme.palette.brightPurple.main}>
|
||||||
variant="body2"
|
|
||||||
color={theme.palette.brightPurple.main}
|
|
||||||
>
|
|
||||||
00.00 руб.
|
00.00 руб.
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user