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

fix: steptwo mobile styles

Browse Source
This commit is contained in:
IlyaDoronin 2023-10-18 16:41:34 +03:00
parent 92a67dfc8a
commit e640c41857
2 changed files with 115 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/pages/startPage/CardWithImage.tsx
View File

@ -1,41 +1,37 @@
import { Box, Typography, useTheme } from "@mui/material"; import { Box, Typography, useTheme } from "@mui/material";
interface Props { interface Props {
image: string; image: string;
text: string; text: string;
border?: string; border?: string;
} }
export default function CardWithImage({ image, text, border }: Props) { export default function CardWithImage({ image, text, border }: Props) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<Box sx={{ <Box
flexGrow: 1, sx={{
borderRadius: "12px", minWidth: "315px",
border: {border}, flexGrow: 1,
backgroundColor: "white", borderRadius: "12px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24), border: { border },
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), backgroundColor: "white",
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), boxShadow: "0 10px 15px rgba(0, 0, 0, 0.1)",
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)`, <img
}}> style={{
<img width: "100%",
style={{ display: "block",
width: "100%", borderBottom: `1px solid ${theme.palette.grey2.main}`,
display: "block", }}
borderBottom: `1px solid ${theme.palette.grey2.main}`, src={image}
}} alt="card"
src={image} />
alt="card" <Typography color={theme.palette.grey3.main} p="20px">
/> {text}
<Typography </Typography>
color={theme.palette.grey3.main} </Box>
p="20px" );
>{text}</Typography>
</Box>
);
} }

123
src/pages/startPage/steptwo.tsx
View File

@ -1,47 +1,92 @@
import {Box, Button, Typography} from "@mui/material"; import {
Box,
Button,
Typography,
useTheme,
useMediaQuery,
} from "@mui/material";
import CardWithImage from "./CardWithImage"; import CardWithImage from "./CardWithImage";
import cardImage1 from "../../assets/card-1.png"; import cardImage1 from "../../assets/card-1.png";
import cardImage2 from "../../assets/card-2.png"; import cardImage2 from "../../assets/card-2.png";
import cardImage3 from "../../assets/card-3.png"; import cardImage3 from "../../assets/card-3.png";
import {quizStore} from "@root/quizes"; import { quizStore } from "@root/quizes";
import {useParams} from "react-router-dom"; import { useParams } from "react-router-dom";
export default function Steptwo () { export default function Steptwo() {
const params = Number(useParams().quizId); const params = Number(useParams().quizId);
const {listQuizes, updateQuizesList} = quizStore() const { listQuizes, updateQuizesList } = quizStore();
return ( const theme = useTheme();
<Box sx={{ const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1300));
mt: "60px",
}}>
<Typography variant="h5">Стартовая страница</Typography>
<Box sx={{ return (
display: "flex", <Box sx={{ mt: "60px" }}>
gap: "3.4%", <Typography variant="h5">Стартовая страница</Typography>
mt: "40px", <Box
}}> sx={{
<Button variant='text' overflowX: "scroll",
onClick={() => { paddingBottom: "15px",
updateQuizesList(params, {startpage: "standard"}) "&::-webkit-scrollbar": { width: 0 },
}} }}
> >
<CardWithImage image={cardImage1} text="Standard" border={listQuizes[params].startpage === "standard" ? "1px solid #7E2AEA" : "none"} /> <Box
</Button> sx={{
<Button variant='text' minWidth: "950px",
onClick={() => { display: "flex",
updateQuizesList(params, {startpage: "expanded"}) gap: "3.4%",
}} mt: "40px",
> padding: isSmallMonitor ? "0 15px 15px" : 0,
<CardWithImage image={cardImage2} text="Expanded" border={listQuizes[params].startpage === "expanded" ? "1px solid #7E2AEA" : "none"}/> }}
</Button> >
<Button variant='text' <Button
onClick={() => { variant="text"
updateQuizesList(params, {startpage: "centered"}) onClick={() => {
}} updateQuizesList(params, { startpage: "standard" });
> }}
<CardWithImage image={cardImage3} text="Centered" border={listQuizes[params].startpage === "centered" ? "1px solid #7E2AEA" : "none"}/> >
</Button> <CardWithImage
</Box> image={cardImage1}
text="Standard"
border={
listQuizes[params].startpage === "standard"
? "1px solid #7E2AEA"
: "none"
}
/>
</Button>
<Button
variant="text"
onClick={() => {
updateQuizesList(params, { startpage: "expanded" });
}}
>
<CardWithImage
image={cardImage2}
text="Expanded"
border={
listQuizes[params].startpage === "expanded"
? "1px solid #7E2AEA"
: "none"
}
/>
</Button>
<Button
variant="text"
onClick={() => {
updateQuizesList(params, { startpage: "centered" });
}}
>
<CardWithImage
image={cardImage3}
text="Centered"
border={
listQuizes[params].startpage === "centered"
? "1px solid #7E2AEA"
: "none"
}
/>
</Button>
</Box> </Box>
) </Box>
</Box>
);
} }