PenaSide/adminFront
3
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

адаптация страницы настроек

Browse Source
This commit is contained in:
Tamara 2024-03-12 00:38:59 +03:00
parent 4ad467ae7b
commit 5007935f82
4 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/pages/Setting/CardPrivilegie.tsx
View File

@ -1,6 +1,6 @@
import { KeyboardEvent, useRef, useState } from "react";
import { enqueueSnackbar } from "notistack";
import { Box, IconButton, TextField, Tooltip, Typography } from "@mui/material";
import {Box, IconButton, TextField, Tooltip, Typography, useMediaQuery, useTheme} from "@mui/material";
import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined";
import { PrivilegeWithAmount } from "@frontend/kitui";
import { putPrivilege } from "@root/api/privilegies";
@ -16,6 +16,8 @@ export const СardPrivilege = ({ privilege }: CardPrivilege) => {
const [inputOpen, setInputOpen] = useState<boolean>(false);
const [inputValue, setInputValue] = useState<string>("");
const priceRef = useRef<HTMLDivElement>(null);
const theme = useTheme();
const mobile = useMediaQuery(theme.breakpoints.down(600));
const translationType = {
count: "за единицу",
@ -24,6 +26,7 @@ export const СardPrivilege = ({ privilege }: CardPrivilege) => {
};
const putPrivileges = async () => {
const [_, putedPrivilegeError] = await putPrivilege({
name: privilege.name,
privilegeId: privilege.privilegeId,
@ -79,7 +82,7 @@ export const СardPrivilege = ({ privilege }: CardPrivilege) => {
}}
>
<Box sx={{ display: "flex", borderRight: "1px solid gray" }}>
<Box sx={{ width: "200px", py: "25px" }}>
<Box sx={{ width: mobile ? "120px" : "200px", py: "25px" }}>
<Typography
variant="h6"
sx={{
@ -120,7 +123,7 @@ export const СardPrivilege = ({ privilege }: CardPrivilege) => {
</IconButton>
</Box>
</Box>
<Box sx={{ width: "600px", display: "flex", justifyContent: "space-around" }}>
<Box sx={{ maxWidth: "600px", width: "100%", display: "flex", alignItems: mobile ? "center" : undefined, justifyContent: "space-around", flexDirection: mobile ? "column" : "row", gap: "5px" }}>
{inputOpen ? (
<TextField
type="number"
@ -130,7 +133,9 @@ export const СardPrivilege = ({ privilege }: CardPrivilege) => {
onChange={(event) => setInputValue(event.target.value)}
sx={{
alignItems: "center",
width: "400px",
maxWidth: "400px",
width: "100%",
marginLeft: "5px",
"& .MuiInputBase-root": {
backgroundColor: "#F2F3F7",
height: "48px",

9
src/pages/Setting/FormCreateRoles.tsx
View File

@ -25,7 +25,7 @@ const MenuProps = {
export default function CreateForm() {
const [personName, setPersonName] = useState<string[]>([]);
const theme = useTheme();
const mobile = useMediaQuery(theme.breakpoints.down(400));
const mobile = useMediaQuery(theme.breakpoints.down(600));
const handleChange = (event: SelectChangeEvent<typeof personName>) => {
const {
target: { value },
@ -40,7 +40,8 @@ export default function CreateForm() {
fullWidth
sx={{
alignItems: "center",
width: mobile ? "320px" : "400px",
maxWidth: "400px",
width: "100%",
"& .MuiInputBase-root": {
backgroundColor: "#F2F3F7",
height: "48px",
@ -55,8 +56,8 @@ export default function CreateForm() {
},
}}
/>
<Button sx={{ ml: "5px", bgcolor: "#fe9903", color: "white" }}>Отправить</Button>
<FormControl sx={{ ml: "25px", width: "80%" }}>
<Button sx={{ ml: "5px", bgcolor: "#fe9903", color: "white", minWidth: "85px" }}>Отправить</Button>
<FormControl sx={{ ml: mobile ? "10px" : "25px", width: "80%" }}>
<Select
sx={{ bgcolor: "white", height: "48px" }}
labelId="demo-multiple-checkbox-label"

3
src/pages/Setting/FormDeleteRoles.tsx
View File

@ -55,7 +55,8 @@ export default function DeleteForm() {
fullWidth
sx={{
alignItems: "center",
width: "400px",
maxWidth: "400px",
width: "100%",
"& .MuiInputBase-root": {
backgroundColor: "#F2F3F7",
height: "48px",

18
src/pages/Setting/SettingRoles.tsx
View File

@ -20,7 +20,7 @@ import theme from "../../theme";
export const SettingRoles = (): JSX.Element => {
const theme = useTheme();
const mobile = useMediaQuery(theme.breakpoints.down(400));
const mobile = useMediaQuery(theme.breakpoints.down(600));
return (
<AccordionDetails sx={{ maxWidth: "890px",
width: "100%", }}>
@ -66,8 +66,10 @@ export const SettingRoles = (): JSX.Element => {
alignItems: "center",
borderTop: "2px solid",
borderColor: theme.palette.grayLight.main,
height: "100px",
height: mobile ? undefined : "100px",
cursor: "pointer",
flexDirection: mobile ? "column" : "row",
gap: "5px"
}}
>
<FormCreateRoles />
@ -77,7 +79,8 @@ export const SettingRoles = (): JSX.Element => {
<Table
sx={{
mt: "30px",
width: "890px",
maxWidth: "890px",
width: "100%",
border: "2px solid",
borderColor: "gray",
}}
@ -112,8 +115,10 @@ export const SettingRoles = (): JSX.Element => {
alignItems: "center",
borderTop: "2px solid",
borderColor: theme.palette.grayLight.main,
height: "100px",
cursor: "pointer",
height: mobile ? undefined : "100px",
cursor: "pointer",
flexDirection: mobile ? "column" : "row",
gap: "5px"
}}
>
<FormDeleteRoles />
@ -124,7 +129,8 @@ export const SettingRoles = (): JSX.Element => {
}
/>
<PrivilegesWrapper text="Привилегии" sx={{ mt: "50px" }} />
<PrivilegesWrapper text="Привилегии" sx={{ mt: "50px", maxWidth: "890px",
width: "100%", }} />
</AccordionDetails>
);
};