update Behavior of the logo and back arrow buttons

This commit is contained in:
ArtChaos189 2023-12-16 01:46:57 +03:00
parent e6252449f0
commit c51cdbea67
6 changed files with 323 additions and 332 deletions

@ -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();
@ -77,21 +74,22 @@ export default function FullScreenDialog({
bg={bgColor} bg={bgColor}
mwidth={"1200px"} mwidth={"1200px"}
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 }}>
<Logotip width={150}/> <Link to="/">
<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>
@ -237,13 +227,13 @@ export default function FullScreenDialog({
bottom: "60px", bottom: "60px",
}} }}
> >
<Logotip width={150}/> <Logotip width={150} />
</Box> </Box>
)} )}
</List> </List>
</Dialog> </Dialog>
</SectionStyled> </SectionStyled>
<Box sx={{height: isMobile ? "50px" : {height}}} /> <Box sx={{ height: isMobile ? "50px" : { height } }} />
</> </>
); );
} }

@ -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();
@ -17,16 +18,20 @@ export const FirstEntry = () => {
const create = () => { const create = () => {
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>