SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

update Behavior of the logo and back arrow buttons

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/Landing/HeaderLanding.tsx
View File

@ -18,7 +18,7 @@ export default function Component() {
const [select, setSelect] = React.useState(0);
const userId = useUserStore((state) => state.userId);
const navigate = useNavigate();
const location = useLocation()
const location = useLocation();
const onClick = () => (userId ? navigate("/list") : navigate("/signin"));
@ -41,7 +41,9 @@ export default function Component() {
padding: 0,
}}
>
<QuizLogo width={isMobile ? 100 : 150} />
<Link to="/">
<QuizLogo width={isMobile ? 100 : 150} />
</Link>
{/*<Box*/}
{/* sx={{*/}
{/* maxWidth: '595px',*/}
@ -67,7 +69,7 @@ export default function Component() {
{/* ))}*/}
{/*</Box>*/}
<Button
variant="outlined"
variant="outlined"
onClick={onClick}
sx={{
color: "black",

402
src/pages/Landing/headerMobileLanding.tsx
View File

@ -4,17 +4,17 @@ import {} from "react-router-dom";
import { useLocation, Link } from "react-router-dom";
import {
useMediaQuery,
useTheme,
Button,
Dialog,
ListItem,
AppBar,
List,
Toolbar,
IconButton,
Box,
Slide,
useMediaQuery,
useTheme,
Button,
Dialog,
ListItem,
AppBar,
List,
Toolbar,
IconButton,
Box,
Slide,
} from "@mui/material";
import { TransitionProps } from "@mui/material/transitions";
@ -38,212 +38,202 @@ import Logotip from "./images/icons/QuizLogo";
// ];
interface Props {
theme?: "dark" | "light";
bgColor?: string;
theme?: "dark" | "light";
bgColor?: string;
}
const Transition = React.forwardRef(function Transition(
props: TransitionProps & {
children: React.ReactElement;
},
props: TransitionProps & {
children: React.ReactElement;
},
ref: React.Ref<unknown>
ref: React.Ref<unknown>
) {
return <Slide direction={"left"} ref={ref} {...props} />;
return <Slide direction={"left"} ref={ref} {...props} />;
});
const height = "80px";
export default function FullScreenDialog({
theme = "dark",
bgColor = "#F2F3F7",
}: Props) {
const [open, setOpen] = useState(false);
const location = useLocation();
const themeMUI = useTheme();
const isMobile = useMediaQuery(themeMUI.breakpoints.down("md"));
export default function FullScreenDialog({ theme = "dark", bgColor = "#F2F3F7" }: Props) {
const [open, setOpen] = useState(false);
const location = useLocation();
const themeMUI = useTheme();
const isMobile = useMediaQuery(themeMUI.breakpoints.down("md"));
const handleClickOpen = () => {
setOpen(true);
};
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const handleClose = () => {
setOpen(false);
};
return (
<>
<SectionStyled
tag="header"
bg={bgColor}
mwidth={"1200px"}
sxsect={{
minHeight: isMobile? "50px" : {height},
position: "fixed",
zIndex: 11
return (
<>
<SectionStyled
tag="header"
bg={bgColor}
mwidth={"1200px"}
sxsect={{
minHeight: isMobile ? "50px" : { height },
position: "fixed",
zIndex: 11,
}}
sxcont={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
svg: { color: "#000000" },
padding: isMobile ? 0 : "0 22px 0 40px",
}}
>
<Box sx={{ bgcolor: "none", paddingTop: isMobile ? "6px" : 0 }}>
<Link to="/">
<Logotip width={150} />
</Link>
</Box>
{!isMobile && (
<Button
// onClick={() => setIsContactFormOpen(true)}
disableRipple
sx={{
color: "black",
border: "1px solid black",
ml: "auto",
mr: "38px",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
padding: "8px 17px",
"&:hover": {
background: "rgba(126, 42, 234, 0.07)",
bgcolor: "#7E2AEA",
},
}}
>
Предрегистрация
</Button>
)}
}}
sxcont={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
svg: { color: "#000000" },
padding: isMobile ? 0 : "0 22px 0 40px"
}}
<Button disableRipple variant="text" onClick={handleClickOpen}>
<MenuIcon />
</Button>
<Dialog
fullScreen
sx={{ width: isMobile ? "100%" : "320px", ml: "auto", height: "100%" }}
open={open}
onClose={handleClose}
TransitionComponent={Transition}
>
<AppBar
sx={{
position: "relative",
background: theme === "dark" ? "#252734" : "#F2F3F7",
boxShadow: "none",
height: isMobile ? "66px" : "100px",
}}
>
<Toolbar
sx={{
display: "flex",
justifyContent: "space-between",
svg: { color: theme === "dark" ? "#ffffff" : "#000000" },
pt: "12px",
}}
>
<Box sx={{ bgcolor: "none", paddingTop: isMobile? "6px" : 0 }}>
<Logotip width={150}/>
</Box>
{!isMobile && (
<Button
// onClick={() => setIsContactFormOpen(true)}
disableRipple
sx={{
color: "black",
border: "1px solid black",
ml: "auto",
mr: "38px",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
padding: "8px 17px",
"&:hover": {
background: "rgba(126, 42, 234, 0.07)",
bgcolor: "#7E2AEA",
},
}}
>
Предрегистрация
</Button>
)}
<Button disableRipple variant="text" onClick={handleClickOpen}>
<MenuIcon />
</Button>
<Dialog
fullScreen
sx={{ width: isMobile ? "100%" : "320px", ml: "auto", height: "100%" }}
open={open}
onClose={handleClose}
TransitionComponent={Transition}
>
<AppBar
sx={{
position: "relative",
background: theme === "dark" ? "#252734" : "#F2F3F7",
boxShadow: "none",
height: isMobile ? "66px" : "100px",
}}
>
<Toolbar
sx={{
display: "flex",
justifyContent: "space-between",
svg: { color: theme === "dark" ? "#ffffff" : "#000000" },
pt: "12px",
}}
>
{isMobile && (
<Logotip width={150}/>
)}
<IconButton
sx={{ ml: "auto" }}
edge="start"
color="inherit"
onClick={handleClose}
aria-label="close"
>
<CloseIcon />
</IconButton>
</Toolbar>
</AppBar>
<List
sx={{
background: theme === "dark" ? "#252734" : "#F2F3F7",
height: "100vh",
p: "0",
}}
>
{/*<ListItem*/}
{/* sx={{*/}
{/* pl: "40px",*/}
{/* flexDirection: "column",*/}
{/* alignItems: isMobile ? "stretch" : "end",*/}
{/* }}*/}
{/*>*/}
{/* {buttonMenu.map(({ path, title }) => (*/}
{/* <Link*/}
{/* key={path}*/}
{/* to={path}*/}
{/* style={{*/}
{/* textDecoration: "none",*/}
{/* height: "20px",*/}
{/* marginBottom: "25px",*/}
{/* }}*/}
{/* >*/}
{/* <Button*/}
{/* disableRipple*/}
{/* variant="text"*/}
{/* sx={{*/}
{/* color:*/}
{/* location.pathname === path*/}
{/* ? "#7E2AEA"*/}
{/* : theme === "dark"*/}
{/* ? "white"*/}
{/* : "black",*/}
{/* height: "20px",*/}
{/* textTransform: "none",*/}
{/* fontSize: "16px",*/}
{/* "&:hover": {*/}
{/* background: "none",*/}
{/* color: "#7E2AEA",*/}
{/* },*/}
{/* }}*/}
{/* >*/}
{/* {title}*/}
{/* </Button>*/}
{/* </Link>*/}
{/* ))}*/}
{/*</ListItem>*/}
{isMobile ? (
<Button
// onClick={() => setIsContactFormOpen(true)}
variant="outlined"
sx={{
position: "absolute",
bottom: 0,
mb: "60px",
width: "188px",
color: theme === "dark" ? "white" : "black",
border: "1px solid black",
ml: "40px",
mt: "180px",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
padding: "8px 17px",
}}
>
Предрегистрация
</Button>
) : (
<Box
sx={{
position: "absolute",
right: "40px",
bottom: "60px",
}}
>
<Logotip width={150}/>
</Box>
)}
</List>
</Dialog>
</SectionStyled>
<Box sx={{height: isMobile ? "50px" : {height}}} />
</>
);
{isMobile && <Logotip width={150} />}
<IconButton sx={{ ml: "auto" }} edge="start" color="inherit" onClick={handleClose} aria-label="close">
<CloseIcon />
</IconButton>
</Toolbar>
</AppBar>
<List
sx={{
background: theme === "dark" ? "#252734" : "#F2F3F7",
height: "100vh",
p: "0",
}}
>
{/*<ListItem*/}
{/* sx={{*/}
{/* pl: "40px",*/}
{/* flexDirection: "column",*/}
{/* alignItems: isMobile ? "stretch" : "end",*/}
{/* }}*/}
{/*>*/}
{/* {buttonMenu.map(({ path, title }) => (*/}
{/* <Link*/}
{/* key={path}*/}
{/* to={path}*/}
{/* style={{*/}
{/* textDecoration: "none",*/}
{/* height: "20px",*/}
{/* marginBottom: "25px",*/}
{/* }}*/}
{/* >*/}
{/* <Button*/}
{/* disableRipple*/}
{/* variant="text"*/}
{/* sx={{*/}
{/* color:*/}
{/* location.pathname === path*/}
{/* ? "#7E2AEA"*/}
{/* : theme === "dark"*/}
{/* ? "white"*/}
{/* : "black",*/}
{/* height: "20px",*/}
{/* textTransform: "none",*/}
{/* fontSize: "16px",*/}
{/* "&:hover": {*/}
{/* background: "none",*/}
{/* color: "#7E2AEA",*/}
{/* },*/}
{/* }}*/}
{/* >*/}
{/* {title}*/}
{/* </Button>*/}
{/* </Link>*/}
{/* ))}*/}
{/*</ListItem>*/}
{isMobile ? (
<Button
// onClick={() => setIsContactFormOpen(true)}
variant="outlined"
sx={{
position: "absolute",
bottom: 0,
mb: "60px",
width: "188px",
color: theme === "dark" ? "white" : "black",
border: "1px solid black",
ml: "40px",
mt: "180px",
textTransform: "none",
fontWeight: "400",
fontSize: "18px",
lineHeight: "24px",
borderRadius: "8px",
padding: "8px 17px",
}}
>
Предрегистрация
</Button>
) : (
<Box
sx={{
position: "absolute",
right: "40px",
bottom: "60px",
}}
>
<Logotip width={150} />
</Box>
)}
</List>
</Dialog>
</SectionStyled>
<Box sx={{ height: isMobile ? "50px" : { height } }} />
</>
);
}

78
src/pages/ResultPage/FirstEntry.tsx
View File

@ -1,5 +1,4 @@
import { ResultSettings } from "./ResultSettings"
import { ResultSettings } from "./ResultSettings";
import { createFrontResult } from "@root/questions/actions";
import { useQuestionsStore } from "@root/questions/store";
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 { enqueueSnackbar } from "notistack";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import { decrementCurrentStep } from "@root/quizes/actions";
export const FirstEntry = () => {
const theme = useTheme();
@ -17,16 +18,20 @@ export const FirstEntry = () => {
const create = () => {
if (quiz?.config.haveRoot) {
questions
.filter((question:AnyTypedQuizQuestion) => {
return question.type !== null && question.content.rule.parentId.length !== 0 && question.content.rule.children.length === 0
})
.forEach(question => {
createFrontResult(quiz.id, question.content.id)
})
.filter((question: AnyTypedQuizQuestion) => {
return (
question.type !== null &&
question.content.rule.parentId.length !== 0 &&
question.content.rule.children.length === 0
);
})
.forEach((question) => {
createFrontResult(quiz.id, question.content.id);
});
} else {
createFrontResult(quiz.id, "line")
createFrontResult(quiz.id, "line");
}
}
};
return (
<>
@ -53,7 +58,7 @@ export const FirstEntry = () => {
mr: !isSmallMonitor ? "104px" : 0,
marginBottom: isSmallMonitor ? "20px" : 0,
position: "relative",
height: "100%"
height: "100%",
}}
>
<Typography variant="h5" sx={{ marginBottom: "20px" }}>
@ -69,7 +74,10 @@ export const FirstEntry = () => {
}}
>
<Typography sx={{ color: "#4D4D4D", width: "95%" }}>
Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте пользователя по нужной ссылке.
Вы можете показывать разные результаты квиза (добавьте описание, изображение, стоимость и т.п.) разным
пользователям, нужно только их создать и проставить условия. Таким образом ваш квиз получится максимально
индивидуальным для каждого клиента. Показывайте картинку/видео вместо результата или переадресовывайте
пользователя по нужной ссылке.
</Typography>
<Typography
sx={{
@ -91,21 +99,35 @@ export const FirstEntry = () => {
}}
/>
</Box>
<Button
onClick={create}
variant="contained"
sx={{
backgroundColor: "#7E2AEA",
fontSize: "18px",
lineHeight: "18px",
width: "216px",
height: "44px",
mt: "30px",
p: "10px 20px"
}}
>
Создать результаты
</Button>
<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
onClick={create}
variant="contained"
sx={{
backgroundColor: "#7E2AEA",
fontSize: "18px",
lineHeight: "18px",
width: "216px",
height: "44px",
p: "10px 20px",
}}
>
Создать результаты
</Button>
</Box>
</>
);
}
};

128
src/pages/createQuize/MyQuizzesFull.tsx
View File

@ -1,12 +1,4 @@
import {
Box,
Button,
SxProps,
Theme,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { Box, Button, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
import { createQuiz } from "@root/quizes/actions";
import { useQuizes } from "@root/quizes/hooks";
import SectionWrapper from "@ui_kit/SectionWrapper";
@ -16,72 +8,62 @@ import ComplexNavText from "./ComplexNavText";
import FirstQuiz from "./FirstQuiz";
import QuizCard from "./QuizCard";
interface Props {
outerContainerSx?: SxProps<Theme>;
children?: React.ReactNode;
outerContainerSx?: SxProps<Theme>;
children?: React.ReactNode;
}
export default function MyQuizzesFull({
outerContainerSx: sx,
children,
}: Props) {
const { quizes } = useQuizes();
const navigate = useNavigate();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(500));
export default function MyQuizzesFull({ outerContainerSx: sx, children }: Props) {
const { quizes } = useQuizes();
const navigate = useNavigate();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(500));
return (
<>
{quizes.length === 0 ? (
<FirstQuiz />
) : (
<SectionWrapper maxWidth="lg">
<ComplexNavText text1="Кабинет квизов" />
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
mt: "20px",
mb: "30px",
}}
>
<Typography variant="h4">Мои квизы</Typography>
<Button
variant="contained"
sx={{
padding: isMobile ? "10px" : "10px 47px",
minWidth: "44px",
}}
onClick={() => createQuiz(navigate)}
data-cy="create-quiz"
>
{isMobile ? "+" : "Создать +"}
</Button>
</Box>
<Box
sx={{
py: "10px",
display: "flex",
flexWrap: "wrap",
gap: "40px",
mb: "60px",
}}
>
{quizes.map(quiz => (
<QuizCard
key={quiz.id}
quiz={quiz}
openCount={0}
applicationCount={0}
conversionPercent={0}
/>
))}
</Box>
{children}
</SectionWrapper>
)}
</>
);
return (
<>
{quizes.length === 0 ? (
<FirstQuiz />
) : (
<SectionWrapper maxWidth="lg">
<ComplexNavText text1="Кабинет квизов" />
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
mt: "20px",
mb: "30px",
}}
>
<Typography variant="h4">Мои квизы</Typography>
<Button
variant="contained"
sx={{
padding: isMobile ? "10px" : "10px 47px",
minWidth: "44px",
}}
onClick={() => createQuiz(navigate)}
data-cy="create-quiz"
>
{isMobile ? "+" : "Создать +"}
</Button>
</Box>
<Box
sx={{
py: "10px",
display: "flex",
flexWrap: "wrap",
gap: "40px",
mb: "60px",
}}
>
{quizes.map((quiz) => (
<QuizCard key={quiz.id} quiz={quiz} openCount={0} applicationCount={0} conversionPercent={0} />
))}
</Box>
{children}
</SectionWrapper>
)}
</>
);
}

5
src/ui_kit/Header/Header.tsx
View File

@ -5,6 +5,7 @@ import { decrementCurrentStep } from "@root/quizes/actions";
import PenaLogo from "../PenaLogo";
import CustomAvatar from "./Avatar";
import NavMenuItem from "./NavMenuItem";
import { Link } from "react-router-dom";
export default function Header() {
const theme = useTheme();
@ -25,7 +26,9 @@ export default function Header() {
zIndex: theme.zIndex.drawer + 1,
}}
>
<PenaLogo width={124} />
<Link to="/">
<PenaLogo width={124} />
</Link>
<Box
sx={{
display: "flex",

34
src/ui_kit/Header/HeaderFull.tsx
View File

@ -1,11 +1,4 @@
import {
Box,
Container,
IconButton,
Typography,
useTheme,
useMediaQuery,
} from "@mui/material";
import { Box, Container, IconButton, Typography, useTheme, useMediaQuery } from "@mui/material";
import NavMenuItem from "./NavMenuItem";
import PenaLogo from "../PenaLogo";
import WalletIcon from "@icons/WalletIcon";
@ -13,7 +6,7 @@ import CustomAvatar from "./Avatar";
import { Burger } from "@icons/Burger";
import { clearAuthToken } from "@frontend/kitui";
import { logout } from "@api/auth";
import { useNavigate } from "react-router-dom";
import { Link, useNavigate } from "react-router-dom";
import { enqueueSnackbar } from "notistack";
import { clearUserData } from "@root/user";
import { LogoutButton } from "@ui_kit/LogoutButton";
@ -59,7 +52,9 @@ export default function HeaderFull() {
style={{ fontSize: "30px", color: "#000000", cursor: "pointer" }}
/>
)}
<PenaLogo width={124} />
<Link to="/">
<PenaLogo width={124} />
</Link>
{!isTablet && (
<Box
sx={{
@ -93,10 +88,7 @@ export default function HeaderFull() {
>
Мой баланс
</Typography>
<Typography
variant="body2"
color={theme.palette.brightPurple.main}
>
<Typography variant="body2" color={theme.palette.brightPurple.main}>
00.00 руб.
</Typography>
</Box>
@ -111,13 +103,13 @@ export default function HeaderFull() {
height: "36px",
width: "36px",
}}
/>
<LogoutButton
onClick={handleLogoutClick}
sx={{
ml: "20px",
}}
/>
/>
<LogoutButton
onClick={handleLogoutClick}
sx={{
ml: "20px",
}}
/>
</>
)}
</Box>