адаптивность для тарифов и страницы пользователей
This commit is contained in:
parent
5d147cdf1e
commit
0d687779eb
@ -36,8 +36,7 @@ const Contractor: React.FC<MWProps> = ({ openModal }) => {
|
||||
onClick={ () => openModal(3, 1) }
|
||||
sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
width: "320px",
|
||||
height: "82px",
|
||||
padding: '11px 65px',
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
"&:hover": {
|
||||
@ -51,8 +50,7 @@ const Contractor: React.FC<MWProps> = ({ openModal }) => {
|
||||
onClick={ () => openModal(3, 1) }
|
||||
sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
width: "320px",
|
||||
height: "82px",
|
||||
padding: '11px 65px',
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
"&:hover": {
|
||||
@ -65,8 +63,7 @@ const Contractor: React.FC<MWProps> = ({ openModal }) => {
|
||||
variant = "contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
width: "320px",
|
||||
height: "52px",
|
||||
padding: '11px 65px',
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
"&:hover": {
|
||||
|
@ -305,7 +305,7 @@ console.log(amount)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box style={{ width: "100%" }}>
|
||||
<Box style={{ width: "93%" }}>
|
||||
<Box style={{ height: 400 }}>
|
||||
<DataGrid
|
||||
checkboxSelection={true}
|
||||
@ -348,12 +348,13 @@ console.log(amount)
|
||||
onClick={ () => openModal() }
|
||||
sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
width: "320px",
|
||||
height: "42px",
|
||||
padding: "6px 30px",
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
marginTop: "45px",
|
||||
marginBottom: "15px",
|
||||
maxWidth: '320px',
|
||||
width: '100%',
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.grayMedium.main
|
||||
}
|
||||
@ -366,8 +367,7 @@ console.log(amount)
|
||||
onClick={ () => handleToBasket() }
|
||||
sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
width: "320px",
|
||||
height: "42px",
|
||||
padding: "6px 69px",
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
marginBottom: "95px",
|
||||
@ -386,8 +386,9 @@ console.log(amount)
|
||||
alignItems: "center",
|
||||
marginBottom: "45px",
|
||||
}}>
|
||||
<Box sx={{
|
||||
width: "480px",
|
||||
<Box sx={{
|
||||
maxWidth: "480px",
|
||||
width: '100%',
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
}}>
|
||||
@ -488,7 +489,8 @@ console.log(amount)
|
||||
display: "flex",
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px",
|
||||
width: "350px",
|
||||
maxWidth: "350px",
|
||||
width: '100%',
|
||||
justifyContent: "space-between"
|
||||
}}>
|
||||
<FormControlLabel control={
|
||||
@ -526,7 +528,9 @@ console.log(amount)
|
||||
|
||||
<List sx={{
|
||||
border: "1px solid",
|
||||
borderColor: theme.palette.secondary.main
|
||||
borderColor: theme.palette.secondary.main,
|
||||
maxWidth: '745px',
|
||||
width: '100%',
|
||||
}}>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
@ -539,15 +543,28 @@ console.log(amount)
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary="Название"
|
||||
sx={{ textAlign: "center", minWidth: "250px", maxWidth: "250px" }}
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
// minWidth: "250px",
|
||||
maxWidth: "250px",
|
||||
padding: '0 10px'
|
||||
}}
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Цена"
|
||||
sx={{ textAlign: "center", minWidth: "200px", maxWidth: "200px" }}
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
// minWidth: "200px",
|
||||
padding: '0 10px',
|
||||
maxWidth: "200px" }}
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Скидки"
|
||||
sx={{ textAlign: "center", minWidth: "200px", maxWidth: "400px" }}
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
// minWidth: "200px",
|
||||
padding: '0 10px',
|
||||
maxWidth: "400px" }}
|
||||
/>
|
||||
<IconButton edge="end" aria-label="delete">
|
||||
<DeleteIcon sx={{
|
||||
|
@ -36,8 +36,7 @@ const Quiz: React.FC<MWProps> = ({ openModal }) => {
|
||||
onClick={ () => openModal(2, 1) }
|
||||
sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
width: "320px",
|
||||
height: "52px",
|
||||
padding: "11px 43px",
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
"&:hover": {
|
||||
@ -51,8 +50,7 @@ const Quiz: React.FC<MWProps> = ({ openModal }) => {
|
||||
onClick={ () => openModal(2, 0) }
|
||||
sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
width: "320px",
|
||||
height: "52px",
|
||||
padding: '11px 43px',
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
"&:hover": {
|
||||
@ -65,8 +63,7 @@ const Quiz: React.FC<MWProps> = ({ openModal }) => {
|
||||
variant = "contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
width: "320px",
|
||||
height: "52px",
|
||||
padding: '11px 43px',
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
"&:hover": {
|
||||
|
@ -36,10 +36,9 @@ const Templater: React.FC<MWProps> = ({ openModal }) => {
|
||||
onClick={ () => openModal(1, 1) }
|
||||
sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
width: "320px",
|
||||
height: "52px",
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
padding: '11px 25px',
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.grayMedium.main
|
||||
}
|
||||
@ -51,8 +50,7 @@ const Templater: React.FC<MWProps> = ({ openModal }) => {
|
||||
onClick={ () => openModal(1, 0) }
|
||||
sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
width: "320px",
|
||||
height: "52px",
|
||||
padding: '11px 25px',
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
"&:hover": {
|
||||
@ -66,8 +64,7 @@ const Templater: React.FC<MWProps> = ({ openModal }) => {
|
||||
onClick={ () => openModal(1, 2) }
|
||||
sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
width: "320px",
|
||||
height: "52px",
|
||||
padding: '11px 25px',
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
"&:hover": {
|
||||
@ -80,8 +77,7 @@ const Templater: React.FC<MWProps> = ({ openModal }) => {
|
||||
variant = "contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
width: "320px",
|
||||
height: "52px",
|
||||
padding: '11px 25px',
|
||||
fontWeight: "normal",
|
||||
fontSize: "17px",
|
||||
"&:hover": {
|
||||
|
@ -64,8 +64,7 @@ const Users: React.FC = () => {
|
||||
variant="text"
|
||||
onClick={ () => navigate("/modalAdmin") }
|
||||
sx={{
|
||||
width: "90%",
|
||||
height: "60px",
|
||||
width: "84%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
@ -84,7 +83,7 @@ const Users: React.FC = () => {
|
||||
|
||||
|
||||
<Accordion sx={{
|
||||
width: "90%",
|
||||
width: "84%",
|
||||
backgroundColor: theme.palette.content.main
|
||||
}} expanded={ accordionState }>
|
||||
<AccordionSummary
|
||||
@ -256,18 +255,27 @@ const Users: React.FC = () => {
|
||||
color: theme.palette.secondary.main
|
||||
} }}
|
||||
/>
|
||||
<Button
|
||||
variant = "text"
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: theme.palette.content.main,
|
||||
color: theme.palette.secondary.main,
|
||||
width: "20%",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.content.main
|
||||
}
|
||||
}}>
|
||||
НАЙТИ
|
||||
</Button>
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
maxWidth: '317px',
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant = "text"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.content.main,
|
||||
color: theme.palette.secondary.main,
|
||||
// width: "20%",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.content.main
|
||||
}
|
||||
}}>
|
||||
НАЙТИ
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex" }}>
|
||||
@ -291,18 +299,27 @@ const Users: React.FC = () => {
|
||||
color: theme.palette.secondary.main
|
||||
} }}
|
||||
/>
|
||||
<Button
|
||||
variant = "text"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.content.main,
|
||||
color: theme.palette.secondary.main,
|
||||
width: "20%",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.content.main
|
||||
}
|
||||
}}>
|
||||
СБРОСИТЬ
|
||||
</Button>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
maxWidth: '317px',
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant = "text"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.content.main,
|
||||
color: theme.palette.secondary.main,
|
||||
width: "20%",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.content.main
|
||||
}
|
||||
}}>
|
||||
СБРОСИТЬ
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
|
@ -38,7 +38,7 @@ const Content: React.FC<MWProps> = ({ section }) => {
|
||||
alignItems: "center",
|
||||
overflow: "auto",
|
||||
overflowY: "auto",
|
||||
padding: "60px"
|
||||
padding: "60px 0"
|
||||
}}>
|
||||
|
||||
{ componentsArray[ section ] }
|
||||
|
@ -11,11 +11,13 @@ const Header: React.FC = () => {
|
||||
<Box sx={{
|
||||
backgroundColor: theme.palette.menu.main,
|
||||
width: "100%",
|
||||
height: "85px",
|
||||
minHeight: "85px",
|
||||
borderBottom: "1px solid",
|
||||
borderColor: theme.palette.grayDark.main,
|
||||
display: "flex",
|
||||
justifyContent: "space-between"
|
||||
justifyContent: "space-between",
|
||||
flexWrap: 'wrap',
|
||||
paddingLeft: '5px'
|
||||
}}>
|
||||
<Box sx={{
|
||||
width: "150px",
|
||||
@ -32,7 +34,7 @@ const Header: React.FC = () => {
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
width: "230px",
|
||||
maxWidth: "230px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
@ -44,12 +46,12 @@ const Header: React.FC = () => {
|
||||
</Typography>
|
||||
|
||||
<Box sx={{
|
||||
width: "85px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
cursor: "pointer"
|
||||
cursor: "pointer",
|
||||
padding: '0 31px'
|
||||
}}>
|
||||
<ExitToAppOutlinedIcon sx={{
|
||||
color: theme.palette.golden.main,
|
||||
|
@ -71,11 +71,9 @@ const Authorization: React.FC = () => {
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
variant = "enter"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.content.main,
|
||||
width: "50%",
|
||||
height: "62px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.menu.main
|
||||
}
|
||||
@ -99,11 +97,9 @@ const Authorization: React.FC = () => {
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
variant = "enter"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.content.main,
|
||||
width: "50%",
|
||||
height: "62px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.menu.main
|
||||
}
|
||||
@ -127,11 +123,9 @@ const Authorization: React.FC = () => {
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
variant = "enter"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.content.main,
|
||||
width: "50%",
|
||||
height: "62px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.menu.main
|
||||
}
|
||||
@ -155,11 +149,9 @@ const Authorization: React.FC = () => {
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant = "contained"
|
||||
variant = "enter"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.content.main,
|
||||
width: "50%",
|
||||
height: "62px",
|
||||
"&:hover": {
|
||||
backgroundColor: theme.palette.menu.main
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user