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

feat: Main page mobile styles

Browse Source
This commit is contained in:
IlyaDoronin 2023-10-18 15:46:59 +03:00
parent f3f331a833
commit 95b10062f4
4 changed files with 210 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 ComplexNavText from "./ComplexNavText";
import QuizCard from "./QuizCard"; import QuizCard from "./QuizCard";
import SectionWrapper from "@ui_kit/SectionWrapper"; import SectionWrapper from "@ui_kit/SectionWrapper";
import React from "react"; import React from "react";
import {quizStore} from "@root/quizes"; import { quizStore } from "@root/quizes";
import FirstQuiz from "./FirstQuiz"; import FirstQuiz from "./FirstQuiz";
import {useNavigate} from "react-router-dom"; import { useNavigate } from "react-router-dom";
interface Props { interface Props {
outerContainerSx?: SxProps<Theme>; outerContainerSx?: SxProps<Theme>;
children?: React.ReactNode; 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) { return (
const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore() <>
const navigate = useNavigate() {Object.keys(listQuizes).length === 0 ? (
<FirstQuiz />
return ( ) : (
<> <SectionWrapper maxWidth="lg">
{Object.keys(listQuizes).length === 0 ? <ComplexNavText text1="Кабинет квизов" />
<FirstQuiz/> : <Box
sx={{
display: "flex",
<SectionWrapper justifyContent: "space-between",
maxWidth="lg" alignItems: "center",
> mt: "20px",
<ComplexNavText text1="Кабинет квизов"/> mb: "30px",
<Box }}
sx={{ >
display: "flex", <Typography variant="h4">Мои квизы</Typography>
justifyContent: "space-between", <Button
alignItems: "center", variant="contained"
mt: "20px", sx={{
mb: "30px", padding: isMobile ? "10px" : "10px 47px",
}} minWidth: "44px",
> }}
<Typography variant="h4">Мои квизы</Typography> onClick={() => {
<Button navigate(`/setting/${createBlank()}`);
variant="contained" }}
sx={{padding: "10px 47px"}} >
onClick={() => { {isMobile ? "+" : "Создать +"}
navigate(`/setting/${createBlank()}`); </Button>
}} </Box>
>Создать +</Button> <Box
</Box> sx={{
<Box py: "10px",
sx={{ display: "flex",
py: "10px", flexWrap: "wrap",
display: "flex", gap: "40px",
flexWrap: "wrap", mb: "60px",
gap: "40px", }}
mb: "60px", >
}} {Object.values(listQuizes).map((e, i) => (
> <QuizCard
{Object.values(listQuizes).map((e, i) =>( name={e.name}
<QuizCard name={e.name} openCount={0}
openCount={0} applicationCount={0}
applicationCount={0} conversionPercent={0}
conversionPercent={0} onClickDelete={() => {
onClickDelete={() => { removeQuiz(e.id);
removeQuiz(e.id) }}
}} onClickEdit={() => navigate(`/setting/${e.id}`)}
onClickEdit={() => />
navigate(`/setting/${e.id}`) ))}
} </Box>
/> {children}
) </SectionWrapper>
)} )}
</>
</Box> );
{children}
</SectionWrapper>
}
</>
)
} }

235
src/pages/createQuize/QuizCard.tsx
View File

@ -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 ChartIcon from "@icons/ChartIcon";
import LinkIcon from "@icons/LinkIcon"; import LinkIcon from "@icons/LinkIcon";
import PencilIcon from "@icons/PencilIcon"; import PencilIcon from "@icons/PencilIcon";
import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
interface Props { interface Props {
name: string; name: string;
openCount?: number; openCount?: number;
applicationCount?: number; applicationCount?: number;
conversionPercent?: number; conversionPercent?: number;
onClickDelete?: () => void; onClickDelete?: () => void;
onClickEdit?: () => void; onClickEdit?: () => void;
} }
export default function QuizCard({ name, openCount = 0, applicationCount = 0, conversionPercent = 0, onClickDelete, onClickEdit }: Props) { export default function QuizCard({
const theme = useTheme(); name,
openCount = 0,
applicationCount = 0,
conversionPercent = 0,
onClickDelete,
onClickEdit,
}: Props) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
return ( return (
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
backgroundColor: "white", backgroundColor: "white",
width: "560px", width: "560px",
height: "280px", height: "280px",
p: "20px", p: "20px",
borderRadius: "12px", borderRadius: "12px",
boxSizing: "border-box", boxSizing: "border-box",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24), boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`, 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 </Button>
sx={{ <Button
display: "flex", variant="outlined"
alignItems: "center", startIcon={<PencilIcon />}
mt: "10px", onClick={onClickEdit}
gap: "10px", sx={{
}} padding: isMobile ? "10px" : "10px 20px",
> minWidth: "unset",
<LinkIcon bgcolor="#EEE4FC" color={theme.palette.brightPurple.main} /> color: theme.palette.brightPurple.main,
<Typography color={theme.palette.grey3.main}>быстрая ссылка ...</Typography> "& .MuiButton-startIcon": {
</Box> marginRight: isMobile ? 0 : "4px",
<Box marginLeft: 0,
sx={{ },
display: "flex", }}
mt: "32px", >
mr: "22px", {isMobile ? "" : "Редактировать"}
}} </Button>
> <Button
<Box sx={{flex: "1 1 0"}}> variant="outlined"
<Typography variant="h5">{openCount}</Typography> startIcon={<ChartIcon />}
<Typography color={theme.palette.grey3.main}>Открытий</Typography> sx={{
</Box> minWidth: "46px",
<Box sx={{flex: "1 1 0"}}> padding: "10px 10px",
<Typography variant="h5">{openCount}</Typography> "& .MuiButton-startIcon": {
<Typography color={theme.palette.grey3.main}>Заявок</Typography> mr: 0,
</Box> ml: 0,
<Box sx={{flex: "1 1 0"}}> },
<Typography variant="h5">{openCount} %</Typography> }}
<Typography color={theme.palette.grey3.main}>Конверсия</Typography> />
</Box> <IconButton
</Box> sx={{
<Box color: theme.palette.brightPurple.main,
sx={{ ml: "auto",
mt: "auto", }}
display: "flex", onClick={onClickDelete}
gap: "20px", >
}} <MoreHorizIcon sx={{ transform: "scale(1.75)" }} />
> </IconButton>
<Button </Box>
variant="contained" </Box>
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 >
);
}

6
src/pages/main.tsx
View File

@ -1,7 +1,7 @@
import Header from "@ui_kit/Header/Header"; import Header from "@ui_kit/Header/Header";
import Sidebar from "@ui_kit/Sidebar"; import Sidebar from "@ui_kit/Sidebar";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import { useTheme } from "@mui/material"; import { useTheme, useMediaQuery } from "@mui/material";
import HeaderFull from "@ui_kit/Header/HeaderFull"; import HeaderFull from "@ui_kit/Header/HeaderFull";
interface Props { interface Props {
@ -12,6 +12,8 @@ interface Props {
export default function Main({ sidebar, header, page }: Props) { export default function Main({ sidebar, header, page }: Props) {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
return ( return (
<> <>
{header ? <Header /> : <HeaderFull />} {header ? <Header /> : <HeaderFull />}
@ -25,7 +27,7 @@ export default function Main({ sidebar, header, page }: Props) {
sx={{ sx={{
background: theme.palette.background.default, background: theme.palette.background.default,
width: "100%", width: "100%",
padding: "25px", padding: isMobile ? "15px" : "25px",
height: "calc(100vh - 80px)", height: "calc(100vh - 80px)",
overflow: "auto", overflow: "auto",
boxSizing: "border-box", boxSizing: "border-box",

2
src/ui_kit/SectionWrapper.tsx
View File

@ -25,7 +25,7 @@ export default function SectionWrapper({ component, outerContainerSx: sx, sx: in
disableGutters disableGutters
maxWidth={maxWidth} maxWidth={maxWidth}
sx={{ sx={{
px: matchMd ? "20px" : "18px", px: matchMd ? "20px" : "0px",
...innerSx ...innerSx
}} }}
> >