feat: Main page mobile styles
This commit is contained in:
IlyaDoronin
parent
f3f331a833
commit
95b10062f4
@ -1,78 +1,88 @@
|
||||
import {Typography, Box, Button, SxProps, Theme} from "@mui/material";
|
||||
import {
|
||||
Typography,
|
||||
Box,
|
||||
Button,
|
||||
SxProps,
|
||||
Theme,
|
||||
useTheme,
|
||||
useMediaQuery,
|
||||
} from "@mui/material";
|
||||
import ComplexNavText from "./ComplexNavText";
|
||||
import QuizCard from "./QuizCard";
|
||||
import SectionWrapper from "@ui_kit/SectionWrapper";
|
||||
import React from "react";
|
||||
import {quizStore} from "@root/quizes";
|
||||
import { quizStore } from "@root/quizes";
|
||||
import FirstQuiz from "./FirstQuiz";
|
||||
import {useNavigate} from "react-router-dom";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
interface Props {
|
||||
outerContainerSx?: SxProps<Theme>;
|
||||
children?: React.ReactNode;
|
||||
outerContainerSx?: SxProps<Theme>;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function MyQuizzesFull({
|
||||
outerContainerSx: sx,
|
||||
children,
|
||||
}: Props) {
|
||||
const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(500));
|
||||
|
||||
export default function MyQuizzesFull({outerContainerSx: sx, children}: Props) {
|
||||
const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore()
|
||||
const navigate = useNavigate()
|
||||
|
||||
return (
|
||||
<>
|
||||
{Object.keys(listQuizes).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: "10px 47px"}}
|
||||
onClick={() => {
|
||||
navigate(`/setting/${createBlank()}`);
|
||||
}}
|
||||
>Создать +</Button>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
py: "10px",
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: "40px",
|
||||
mb: "60px",
|
||||
}}
|
||||
>
|
||||
{Object.values(listQuizes).map((e, i) =>(
|
||||
<QuizCard name={e.name}
|
||||
openCount={0}
|
||||
applicationCount={0}
|
||||
conversionPercent={0}
|
||||
onClickDelete={() => {
|
||||
removeQuiz(e.id)
|
||||
}}
|
||||
onClickEdit={() =>
|
||||
navigate(`/setting/${e.id}`)
|
||||
}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
|
||||
</Box>
|
||||
{children}
|
||||
</SectionWrapper>
|
||||
|
||||
}
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
{Object.keys(listQuizes).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={() => {
|
||||
navigate(`/setting/${createBlank()}`);
|
||||
}}
|
||||
>
|
||||
{isMobile ? "+" : "Создать +"}
|
||||
</Button>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
py: "10px",
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: "40px",
|
||||
mb: "60px",
|
||||
}}
|
||||
>
|
||||
{Object.values(listQuizes).map((e, i) => (
|
||||
<QuizCard
|
||||
name={e.name}
|
||||
openCount={0}
|
||||
applicationCount={0}
|
||||
conversionPercent={0}
|
||||
onClickDelete={() => {
|
||||
removeQuiz(e.id);
|
||||
}}
|
||||
onClickEdit={() => navigate(`/setting/${e.id}`)}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
{children}
|
||||
</SectionWrapper>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,123 +1,142 @@
|
||||
import {Box, Button, IconButton, Typography, useTheme} from "@mui/material";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
IconButton,
|
||||
Typography,
|
||||
useTheme,
|
||||
useMediaQuery,
|
||||
} from "@mui/material";
|
||||
import ChartIcon from "@icons/ChartIcon";
|
||||
import LinkIcon from "@icons/LinkIcon";
|
||||
import PencilIcon from "@icons/PencilIcon";
|
||||
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
||||
|
||||
|
||||
interface Props {
|
||||
name: string;
|
||||
openCount?: number;
|
||||
applicationCount?: number;
|
||||
conversionPercent?: number;
|
||||
onClickDelete?: () => void;
|
||||
onClickEdit?: () => void;
|
||||
name: string;
|
||||
openCount?: number;
|
||||
applicationCount?: number;
|
||||
conversionPercent?: number;
|
||||
onClickDelete?: () => void;
|
||||
onClickEdit?: () => void;
|
||||
}
|
||||
|
||||
export default function QuizCard({ name, openCount = 0, applicationCount = 0, conversionPercent = 0, onClickDelete, onClickEdit }: Props) {
|
||||
const theme = useTheme();
|
||||
export default function QuizCard({
|
||||
name,
|
||||
openCount = 0,
|
||||
applicationCount = 0,
|
||||
conversionPercent = 0,
|
||||
onClickDelete,
|
||||
onClickEdit,
|
||||
}: Props) {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: "white",
|
||||
width: "560px",
|
||||
height: "280px",
|
||||
p: "20px",
|
||||
borderRadius: "12px",
|
||||
boxSizing: "border-box",
|
||||
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
backgroundColor: "white",
|
||||
width: "560px",
|
||||
height: "280px",
|
||||
p: "20px",
|
||||
borderRadius: "12px",
|
||||
boxSizing: "border-box",
|
||||
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||||
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
|
||||
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
|
||||
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
|
||||
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
|
||||
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
|
||||
}}
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5">{name}</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
mt: "10px",
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
<LinkIcon bgcolor="#EEE4FC" color={theme.palette.brightPurple.main} />
|
||||
<Typography color={theme.palette.grey3.main}>
|
||||
быстрая ссылка ...
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
mt: "32px",
|
||||
mr: "22px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ flex: "1 1 0" }}>
|
||||
<Typography variant="h5">{openCount}</Typography>
|
||||
<Typography color={theme.palette.grey3.main}>Открытий</Typography>
|
||||
</Box>
|
||||
<Box sx={{ flex: "1 1 0" }}>
|
||||
<Typography variant="h5">{openCount}</Typography>
|
||||
<Typography color={theme.palette.grey3.main}>Заявок</Typography>
|
||||
</Box>
|
||||
<Box sx={{ flex: "1 1 0" }}>
|
||||
<Typography variant="h5">{openCount} %</Typography>
|
||||
<Typography color={theme.palette.grey3.main}>Конверсия</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mt: "auto",
|
||||
display: "flex",
|
||||
gap: isMobile ? "10px" : "20px",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
padding: "10px 39px",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h5">{name}</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
mt: "10px",
|
||||
gap: "10px",
|
||||
}}
|
||||
>
|
||||
<LinkIcon bgcolor="#EEE4FC" color={theme.palette.brightPurple.main} />
|
||||
<Typography color={theme.palette.grey3.main}>быстрая ссылка ...</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
mt: "32px",
|
||||
mr: "22px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{flex: "1 1 0"}}>
|
||||
<Typography variant="h5">{openCount}</Typography>
|
||||
<Typography color={theme.palette.grey3.main}>Открытий</Typography>
|
||||
</Box>
|
||||
<Box sx={{flex: "1 1 0"}}>
|
||||
<Typography variant="h5">{openCount}</Typography>
|
||||
<Typography color={theme.palette.grey3.main}>Заявок</Typography>
|
||||
</Box>
|
||||
<Box sx={{flex: "1 1 0"}}>
|
||||
<Typography variant="h5">{openCount} %</Typography>
|
||||
<Typography color={theme.palette.grey3.main}>Конверсия</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mt: "auto",
|
||||
display: "flex",
|
||||
gap: "20px",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
padding: "10px 39px"
|
||||
}}
|
||||
>
|
||||
Заявки
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<PencilIcon />}
|
||||
onClick={onClickEdit}
|
||||
sx={{
|
||||
color: theme.palette.brightPurple.main,
|
||||
"& .MuiButton-startIcon": {
|
||||
mr: "4px",
|
||||
}
|
||||
}}
|
||||
>
|
||||
Редактировать
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<ChartIcon />}
|
||||
sx={{
|
||||
minWidth: "46px",
|
||||
padding: "10px 10px",
|
||||
"& .MuiButton-startIcon": {
|
||||
mr: 0,
|
||||
ml: 0,
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
sx={{
|
||||
color: theme.palette.brightPurple.main,
|
||||
ml: "auto",
|
||||
}}
|
||||
onClick={onClickDelete}
|
||||
>
|
||||
<MoreHorizIcon sx={{ transform: "scale(1.75)" }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box >
|
||||
);
|
||||
Заявки
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<PencilIcon />}
|
||||
onClick={onClickEdit}
|
||||
sx={{
|
||||
padding: isMobile ? "10px" : "10px 20px",
|
||||
minWidth: "unset",
|
||||
color: theme.palette.brightPurple.main,
|
||||
"& .MuiButton-startIcon": {
|
||||
marginRight: isMobile ? 0 : "4px",
|
||||
marginLeft: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{isMobile ? "" : "Редактировать"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<ChartIcon />}
|
||||
sx={{
|
||||
minWidth: "46px",
|
||||
padding: "10px 10px",
|
||||
"& .MuiButton-startIcon": {
|
||||
mr: 0,
|
||||
ml: 0,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
sx={{
|
||||
color: theme.palette.brightPurple.main,
|
||||
ml: "auto",
|
||||
}}
|
||||
onClick={onClickDelete}
|
||||
>
|
||||
<MoreHorizIcon sx={{ transform: "scale(1.75)" }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
import Header from "@ui_kit/Header/Header";
|
||||
import Sidebar from "@ui_kit/Sidebar";
|
||||
import Box from "@mui/material/Box";
|
||||
import { useTheme } from "@mui/material";
|
||||
import { useTheme, useMediaQuery } from "@mui/material";
|
||||
import HeaderFull from "@ui_kit/Header/HeaderFull";
|
||||
|
||||
interface Props {
|
||||
@ -12,6 +12,8 @@ interface Props {
|
||||
|
||||
export default function Main({ sidebar, header, page }: Props) {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
|
||||
return (
|
||||
<>
|
||||
{header ? <Header /> : <HeaderFull />}
|
||||
@ -25,7 +27,7 @@ export default function Main({ sidebar, header, page }: Props) {
|
||||
sx={{
|
||||
background: theme.palette.background.default,
|
||||
width: "100%",
|
||||
padding: "25px",
|
||||
padding: isMobile ? "15px" : "25px",
|
||||
height: "calc(100vh - 80px)",
|
||||
overflow: "auto",
|
||||
boxSizing: "border-box",
|
||||
|
||||
@ -25,7 +25,7 @@ export default function SectionWrapper({ component, outerContainerSx: sx, sx: in
|
||||
disableGutters
|
||||
maxWidth={maxWidth}
|
||||
sx={{
|
||||
px: matchMd ? "20px" : "18px",
|
||||
px: matchMd ? "20px" : "0px",
|
||||
...innerSx
|
||||
}}
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user