all card Mobile version

This commit is contained in:
ArtChaos189 2023-10-03 23:11:58 +03:00
parent b7f3030f0b
commit 56ad3e4eaf
4 changed files with 106 additions and 23 deletions

@ -52,13 +52,14 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
gap: isMobile ? "25px" : "20px",
}}
>
<Box sx={{ display: disableInput ? "none" : "" }}>
<Box sx={{ display: disableInput ? "none" : "", mt: isMobile ? "15px" : "0px" }}>
<CustomTextField
placeholder={"Можно добавить текст"}
text={listQuestions[quizId][totalIndex].content.text}
onChange={({ target }) => debounced(target.value)}
/>
</Box>
<Box
sx={{
mb: "20px",
@ -79,7 +80,50 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
}}
>
{isMobile ? (
<AddPlusImage />
<Box
sx={{
display: "flex",
alignItems: "center",
width: "120px",
position: "relative",
}}
>
<Box
sx={{
width: "100%",
background: "#EEE4FC",
height: "40px",
display: "flex",
alignItems: "center",
justifyContent: "center",
borderTopLeftRadius: "4px",
borderBottomLeftRadius: "4px",
}}
>
<ImageAddIcons
style={{
color: "#7E2AEA",
fontSize: "20px",
}}
/>
</Box>
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "20px",
background: "#EEE4FC",
height: "40px",
color: "white",
backgroundColor: "#7E2AEA",
borderTopRightRadius: "4px",
borderBottomRightRadius: "4px",
}}
>
+
</Box>
</Box>
) : (
<Box
sx={{
@ -146,7 +190,50 @@ export default function PageOptions({ disableInput, totalIndex }: Props) {
}}
>
{isMobile ? (
<AddPlusVideo />
<Box
sx={{
display: "flex",
alignItems: "center",
width: "120px",
position: "relative",
}}
>
<Box
sx={{
width: "100%",
background: "#EEE4FC",
height: "40px",
display: "flex",
alignItems: "center",
justifyContent: "center",
borderTopLeftRadius: "4px",
borderBottomLeftRadius: "4px",
}}
>
<VideofileIcon
style={{
color: "#7E2AEA",
fontSize: "20px",
}}
/>
</Box>
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "20px",
background: "#EEE4FC",
height: "40px",
color: "white",
backgroundColor: "#7E2AEA",
borderTopRightRadius: "4px",
borderBottomRightRadius: "4px",
}}
>
+
</Box>
</Box>
) : (
<Box
sx={{

@ -1,11 +1,5 @@
import { useParams } from "react-router-dom";
import {
Box,
Typography,
Tooltip,
useMediaQuery,
useTheme,
} from "@mui/material";
import { Box, Typography, Tooltip, useMediaQuery, useTheme } from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import { useDebouncedCallback } from "use-debounce";
@ -37,18 +31,19 @@ export default function SettingPageOptions({ totalIndex }: SettingPageOptionsPro
pt: isMobile ? "25px" : "20px",
pb: isMobile ? "25px" : "20px",
pl: "20px",
pr: "20px",
display: "flex",
flexDirection: "column",
gap: "14px",
width: "100%",
width: isMobile ? "auto" : "100%",
}}
>
<Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
Настройки вопроса
</Typography>
<Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "flex-start" }}>
<CustomCheckbox
sx={{ mr: isMobile ? "0px" : "16px" }}
sx={{ mr: isMobile ? "0px" : "16px", height: isMobile ? "100%" : "26px" }}
label={"Внутреннее название вопроса"}
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
handleChange={({ target }) =>

@ -70,7 +70,7 @@ export default function UploadFile({ totalIndex }: Props) {
flexDirection: "column",
}}
>
<Box sx={{ gap: "10px", display: "flex" }}>
<Box sx={{ gap: "10px", display: "flex", mt: isMobile ? "15px" : "0px" }}>
<FormControl
fullWidth
size="small"
@ -151,9 +151,9 @@ export default function UploadFile({ totalIndex }: Props) {
<Box
sx={{
display: "flex",
alignItems: "center",
alignItems: "flex-start",
marginBottom: "20px",
marginTop: isMobile ? "18px" : "15px",
marginTop: "15px",
}}
>
<Typography

@ -26,20 +26,21 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
return (
<Box
sx={{
pt: isMobile ? "25px" : "20px",
pb: isMobile ? "25px" : "20px",
pt: isMobile ? "30px" : "20px",
pb: "20px",
pl: "20px",
pr: isMobile ? "20px" : "0px",
display: "flex",
flexDirection: "column",
gap: "14px",
width: "100%",
width: isMobile ? "auto" : "100%",
}}
>
<Typography sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}>
Настройки вопроса
</Typography>
<CustomCheckbox
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
sx={{ display: isMobile ? "flex" : "block", mr: isMobile ? "0px" : "16px" }}
label={"Автозаполнение адреса"}
checked={listQuestions[quizId][totalIndex].content.autofill}
handleChange={({ target }) => {
@ -49,7 +50,7 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
}}
/>
<CustomCheckbox
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
sx={{ display: isMobile ? "flex" : "block", mr: isMobile ? "0px" : "16px" }}
label={"Необязательный вопрос"}
checked={!listQuestions[quizId][totalIndex].required}
handleChange={(e) => {
@ -58,9 +59,9 @@ export default function SettingsUpload({ totalIndex }: SettingsUploadProps) {
});
}}
/>
<Box sx={{ width: isMobile ? "90%" : "auto", display: "flex", alignItems: "center" }}>
<Box sx={{ display: isMobile ? "flex" : "block", alignItems: "flex-start" }}>
<CustomCheckbox
sx={{ mr: isMobile ? "0px" : "16px" }}
sx={{ mr: isMobile ? "0px" : "16px", height: isMobile ? "100%" : "26px", alignItems: "flex-start" }}
label={"Внутреннее название вопроса"}
checked={listQuestions[quizId][totalIndex].content.innerNameCheck}
handleChange={(e) => {