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

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

@ -1,6 +1,5 @@
import { Box, Typography, useTheme } from "@mui/material";
interface Props {
image: string;
text: string;
@ -11,18 +10,16 @@ export default function CardWithImage({ image, text, border }: Props) {
const theme = useTheme();
return (
<Box sx={{
<Box
sx={{
minWidth: "315px",
flexGrow: 1,
borderRadius: "12px",
border: { border },
backgroundColor: "white",
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)`,
}}>
boxShadow: "0 10px 15px rgba(0, 0, 0, 0.1)",
}}
>
<img
style={{
width: "100%",
@ -32,10 +29,9 @@ export default function CardWithImage({ image, text, border }: Props) {
src={image}
alt="card"
/>
<Typography
color={theme.palette.grey3.main}
p="20px"
>{text}</Typography>
<Typography color={theme.palette.grey3.main} p="20px">
{text}
</Typography>
</Box>
);
}

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

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