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

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

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

125
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 cardImage1 from "../../assets/card-1.png";
import cardImage2 from "../../assets/card-2.png";
import cardImage3 from "../../assets/card-3.png";
import {quizStore} from "@root/quizes";
import {useParams} from "react-router-dom";
import { quizStore } from "@root/quizes";
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>
export default function Steptwo() {
const params = Number(useParams().quizId);
const { listQuizes, updateQuizesList } = quizStore();
const theme = useTheme();
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1300));
<Box sx={{
display: "flex",
gap: "3.4%",
mt: "40px",
}}>
<Button variant='text'
onClick={() => {
updateQuizesList(params, {startpage: "standard"})
}}
>
<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>
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",
padding: isSmallMonitor ? "0 15px 15px" : 0,
}}
>
<Button
variant="text"
onClick={() => {
updateQuizesList(params, { startpage: "standard" });
}}
>
<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>
);
}