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

переделала модалку, поровняла по макету, добавила крестику ф-ию закрытия

Browse Source
This commit is contained in:
Tamara 2023-07-02 01:55:32 +03:00
parent 67c7fb8493
commit 404b3edeb1
1 changed files with 32 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/pages/startPage/ModalSizeImage.tsx
View File

@ -8,8 +8,9 @@ import {
TableCell, TableCell,
TableBody, TableBody,
TableContainer, TableContainer,
TableRow, TableRow, IconButton, Link,
} from "@mui/material"; } from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
import * as React from "react"; import * as React from "react";
import {useState} from "react"; import {useState} from "react";
@ -28,7 +29,7 @@ export default function ModalSizeImage () {
const rows = [ const rows = [
createData('Прямая ссылка/домен', "1792х1509 px"), createData('Прямая ссылка/домен', "1792х1509 px"),
createData('Модальное окно', "1380х1300 px"), createData('Модальное окно на сайте', "1380х1300 px"),
createData('Во ВКонтакте', "1166х1200 px"), createData('Во ВКонтакте', "1166х1200 px"),
createData('Версия для планшета', "767х220 px"), createData('Версия для планшета', "767х220 px"),
createData('Мобильная версия', "400х220 px"), createData('Мобильная версия', "400х220 px"),
@ -49,15 +50,17 @@ export default function ModalSizeImage () {
return ( return (
<> <>
<Button <Link
component='button'
sx={{ sx={{
mt: "20px", mt: "20px",
fontSize: "16px", fontSize: "16px",
lineHeight: "19px", lineHeight: "19px",
textAlign: 'left',
color: theme.palette.orange.main, color: theme.palette.orange.main,
textDecorationColor: theme.palette.orange.main textDecorationColor: theme.palette.orange.main
}} }}
onClick={handleOpen}>Размер картинок</Button> onClick={handleOpen}>Размер картинок</Link>
<Modal <Modal
open={open} open={open}
onClose={handleClose} onClose={handleClose}
@ -83,36 +86,26 @@ export default function ModalSizeImage () {
sx={{ sx={{
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "baseline",
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
padding: "20px", padding: "10px 9px 17px 20px",
borderRadius: "12px 12px 0px 0px" borderRadius: "12px 12px 0px 0px"
}}> }}>
<Typography>Размеры картинок</Typography> <Typography variant={"h5"}>Размеры картинок</Typography>
<Button>x</Button> <IconButton onClick={handleClose}><CloseIcon/></IconButton>
</Box> </Box>
<Box sx={{padding: "15px 20px 30px"}}> <Box sx={{padding: "15px 20px 0px"}}>
<Box><Typography>Рекомендованный размер зависит от того, как вы будете чаще использовать квиз:</Typography></Box> <Typography variant={"body2"} sx={{color: theme.palette.grey2.main, fontWeight: 400}}>Рекомендованный размер зависит от того, как вы будете чаще использовать квиз:</Typography>
<Box> </Box>
<TableContainer component={Box}> <Box sx={{padding: "15px 40px 30px"}}>
<Table sx={{ minWidth: 500 }} size="small" aria-label="a dense table">
<TableBody>
{rows2.map((row) => (
<TableRow
key={row.name}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.size}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
{rows.map((row) => (
<Box sx={{display: "flex", justifyContent: "space-between", width: "100%", paddingBottom: "5px"}}>
<Box sx={{display: "block ruby", height: "20px"}}><Typography variant={"body2"} fontWeight={400}>{row.name}</Typography></Box>
<Box sx={{borderBottom: "solid 1px #F2F3F7", width: "100%", margin: "0 7px"}}></Box>
<Box sx={{display: "block ruby", height: "20px"}}><Typography variant={"body2"}>{row.size}</Typography></Box>
</Box> </Box>
))}
</Box> </Box>
<Box <Box
@ -121,25 +114,17 @@ export default function ModalSizeImage () {
padding: "20px" padding: "20px"
}} }}
> >
<Typography>Размеры изображений в квизе</Typography> <Typography variant={"h5"}>Размеры изображений в квизе</Typography>
</Box>
<Box sx={{padding: "15px 40px 20px"}}>
{rows2.map((row) => (
<Box sx={{display: "flex", justifyContent: "space-between", width: "100%", paddingBottom: "5px"}}>
<Box sx={{display: "block ruby", height: "20px"}}><Typography variant={"body2"} fontWeight={400}>{row.name}</Typography></Box>
<Box sx={{borderBottom: "solid 1px #F2F3F7", width: "100%", margin: "0 7px"}}></Box>
<Box sx={{display: "block ruby", height: "20px"}}><Typography variant={"body2"}>{row.size}</Typography></Box>
</Box> </Box>
<TableContainer component={Box}>
<Table sx={{ minWidth: 500 }} size="small" aria-label="a dense table">
<TableBody>
{rows.map((row) => (
<TableRow
key={row.name}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.size}</TableCell>
</TableRow>
))} ))}
</TableBody> </Box>
</Table>
</TableContainer>
</Box> </Box>
</Modal> </Modal>
</> </>