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,
TableBody,
TableContainer,
TableRow,
TableRow, IconButton, Link,
} from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
import * as React from "react";
import {useState} from "react";
@ -28,7 +29,7 @@ export default function ModalSizeImage () {
const rows = [
createData('Прямая ссылка/домен', "1792х1509 px"),
createData('Модальное окно', "1380х1300 px"),
createData('Модальное окно на сайте', "1380х1300 px"),
createData('Во ВКонтакте', "1166х1200 px"),
createData('Версия для планшета', "767х220 px"),
createData('Мобильная версия', "400х220 px"),
@ -49,15 +50,17 @@ export default function ModalSizeImage () {
return (
<>
<Button
<Link
component='button'
sx={{
mt: "20px",
fontSize: "16px",
lineHeight: "19px",
textAlign: 'left',
color: theme.palette.orange.main,
textDecorationColor: theme.palette.orange.main
}}
onClick={handleOpen}>Размер картинок</Button>
onClick={handleOpen}>Размер картинок</Link>
<Modal
open={open}
onClose={handleClose}
@ -83,36 +86,26 @@ export default function ModalSizeImage () {
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
alignItems: "baseline",
backgroundColor: theme.palette.background.default,
padding: "20px",
padding: "10px 9px 17px 20px",
borderRadius: "12px 12px 0px 0px"
}}>
<Typography>Размеры картинок</Typography>
<Button>x</Button>
<Typography variant={"h5"}>Размеры картинок</Typography>
<IconButton onClick={handleClose}><CloseIcon/></IconButton>
</Box>
<Box sx={{padding: "15px 20px 30px"}}>
<Box><Typography>Рекомендованный размер зависит от того, как вы будете чаще использовать квиз:</Typography></Box>
<Box>
<TableContainer component={Box}>
<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>
<Box sx={{padding: "15px 20px 0px"}}>
<Typography variant={"body2"} sx={{color: theme.palette.grey2.main, fontWeight: 400}}>Рекомендованный размер зависит от того, как вы будете чаще использовать квиз:</Typography>
</Box>
<Box sx={{padding: "15px 40px 30px"}}>
{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
@ -121,25 +114,17 @@ export default function ModalSizeImage () {
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>
<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>
</Table>
</TableContainer>
</Box>
</Box>
</Modal>
</>