Tablet version update
This commit is contained in:
parent
c8436c1909
commit
270eb4863a
@ -117,6 +117,7 @@ export default function QuestionsPageCard({ totalIndex, draggableProps, isDraggi
|
|||||||
p: 0,
|
p: 0,
|
||||||
maxWidth: isTablet ? "549px" : "640px",
|
maxWidth: isTablet ? "549px" : "640px",
|
||||||
width: "100%",
|
width: "100%",
|
||||||
|
marginRight: isMobile ? "0px" : "16.1px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TextField
|
<TextField
|
||||||
@ -193,7 +194,6 @@ export default function QuestionsPageCard({ totalIndex, draggableProps, isDraggi
|
|||||||
<ArrowDownIcon
|
<ArrowDownIcon
|
||||||
style={{
|
style={{
|
||||||
width: "18px",
|
width: "18px",
|
||||||
marginLeft: isMobile ? "0px" : "16.1px",
|
|
||||||
color: "#4D4D4D",
|
color: "#4D4D4D",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
@ -233,19 +233,19 @@ export default function QuestionsPageCard({ totalIndex, draggableProps, isDraggi
|
|||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<OneIcon style={{ fontSize: "30px", marginLeft: "1.5px" }} />
|
<OneIcon style={{ fontSize: "30px", marginRight: "-2px" }} />
|
||||||
</Box>
|
</Box>
|
||||||
<IconButton
|
<IconButton
|
||||||
disableRipple
|
disableRipple
|
||||||
sx={{
|
sx={{
|
||||||
padding: isMobile ? "0" : "5px 8px 8px 8px",
|
padding: isMobile ? "0" : "5px 10px 8px 8px",
|
||||||
position: isMobile ? "absolute" : "relative",
|
position: isMobile ? "absolute" : "relative",
|
||||||
right: isMobile ? "0" : null,
|
right: isMobile ? "0" : null,
|
||||||
bottom: isMobile ? "0" : null,
|
bottom: isMobile ? "0" : null,
|
||||||
}}
|
}}
|
||||||
{...draggableProps}
|
{...draggableProps}
|
||||||
>
|
>
|
||||||
<PointsIcon style={{ color: "#4D4D4D", fontSize: "30px", marginLeft: "-px" }} />
|
<PointsIcon style={{ color: "#4D4D4D", fontSize: "30px" }} />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
@ -52,6 +52,7 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
|
|||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
gap: "14px",
|
gap: "14px",
|
||||||
width: "100%",
|
width: "100%",
|
||||||
|
maxWidth: isFigmaTablte ? "297px" : "360px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography
|
<Typography
|
||||||
@ -71,25 +72,30 @@ export default function SettingDropDown({ totalIndex }: SettingDropDownProps) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<Box sx={{ display: isMobile ? "none" : "block" }}>
|
<Box sx={{ display: isMobile ? "none" : "block", mt: isMobile ? "11px" : "6px" }}>
|
||||||
<Typography
|
<Typography
|
||||||
sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
|
sx={{
|
||||||
|
height: isMobile ? "18px" : "auto",
|
||||||
|
fontWeight: "500",
|
||||||
|
fontSize: "18px",
|
||||||
|
color: " #4D4D4D",
|
||||||
|
mb: "14px",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Текст в выпадающем списке
|
Текст в выпадающем списке
|
||||||
</Typography>
|
</Typography>
|
||||||
|
<CustomTextField
|
||||||
|
placeholder={"Выберите вариант"}
|
||||||
|
text={listQuestions[quizId][totalIndex].content.default}
|
||||||
|
onChange={({ target }) => debounceAnswer(target.value)}
|
||||||
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
<CustomTextField
|
|
||||||
sx={{ maxWidth: "360px" }}
|
|
||||||
placeholder={"Выберите вариант"}
|
|
||||||
text={listQuestions[quizId][totalIndex].content.default}
|
|
||||||
onChange={({ target }) => debounceAnswer(target.value)}
|
|
||||||
/>
|
|
||||||
</Box>
|
</Box>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
pt: isMobile ? "0px" : "20px",
|
pt: isMobile ? "0px" : "20px",
|
||||||
pb: "20px",
|
pb: "20px",
|
||||||
pl: isFigmaTablte ? (isMobile ? "20px" : "34px") : "28px",
|
pl: isFigmaTablte ? (isMobile ? "20px" : "30px") : "0px",
|
||||||
pr: isFigmaTablte ? "19px" : "20px",
|
pr: isFigmaTablte ? "19px" : "20px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
|
|||||||
@ -48,7 +48,7 @@ export default function Emoji({ totalIndex }: Props) {
|
|||||||
width: "100%",
|
width: "100%",
|
||||||
border: "1px solid #9A9AAF",
|
border: "1px solid #9A9AAF",
|
||||||
borderRadius: "8px",
|
borderRadius: "8px",
|
||||||
marginBottom: isMobile ? "15px" : "20px",
|
marginBottom: "15px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TextField
|
<TextField
|
||||||
@ -148,7 +148,7 @@ export default function Emoji({ totalIndex }: Props) {
|
|||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
<Box sx={{ display: "flex", alignItems: "center", marginBottom: "17px" }}>
|
<Box sx={{ display: "flex", alignItems: "center", marginBottom: "20px" }}>
|
||||||
<Link
|
<Link
|
||||||
component="button"
|
component="button"
|
||||||
variant="body2"
|
variant="body2"
|
||||||
|
|||||||
@ -38,7 +38,7 @@ export default function SettingEmoji({ totalIndex }: SettingEmojiProps) {
|
|||||||
pt: isMobile ? "25px" : "20px",
|
pt: isMobile ? "25px" : "20px",
|
||||||
pb: isMobile ? "25px" : "20px",
|
pb: isMobile ? "25px" : "20px",
|
||||||
pl: "20px",
|
pl: "20px",
|
||||||
pr: isFigmaTablte ? (isMobile ? "20px" : "0px") : "28px",
|
pr: isFigmaTablte ? (isWrappColumn ? "20px" : "0px") : "0px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
gap: "14px",
|
gap: "14px",
|
||||||
|
|||||||
@ -42,7 +42,6 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP
|
|||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
flexDirection: isWrappColumn ? "column" : "none",
|
flexDirection: isWrappColumn ? "column" : "none",
|
||||||
marginRight: isFigmaTablte ? (isMobile ? "0" : "0px") : "30px",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
@ -53,6 +52,7 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP
|
|||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
gap: "14px",
|
gap: "14px",
|
||||||
|
maxWidth: isFigmaTablte ? "297px" : "360px",
|
||||||
width: "100%",
|
width: "100%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@ -75,26 +75,32 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{!isWrappColumn && (
|
{!isWrappColumn && (
|
||||||
<>
|
<Box sx={{ mt: isMobile ? "11px" : "6px", width: "100%" }}>
|
||||||
<Typography
|
<Typography
|
||||||
sx={{ height: isMobile ? "18px" : "auto", fontWeight: "500", fontSize: "18px", color: " #4D4D4D" }}
|
sx={{
|
||||||
|
height: isMobile ? "18px" : "auto",
|
||||||
|
fontWeight: "500",
|
||||||
|
fontSize: "18px",
|
||||||
|
color: " #4D4D4D",
|
||||||
|
mb: "14px",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Текст-заглушка на картинке
|
Текст-заглушка на картинке
|
||||||
</Typography>
|
</Typography>
|
||||||
<CustomTextField
|
<CustomTextField
|
||||||
sx={{ maxWidth: "330px", width: "100%", mr: isMobile ? "0px" : "16px" }}
|
sx={{ maxWidth: "360px", width: "100%", mr: isMobile ? "0px" : "16px" }}
|
||||||
placeholder={"Пример текста"}
|
placeholder={"Пример текста"}
|
||||||
text={listQuestions[quizId][totalIndex].content.replText}
|
text={listQuestions[quizId][totalIndex].content.replText}
|
||||||
onChange={({ target }) => debounced(target.value)}
|
onChange={({ target }) => debounced(target.value)}
|
||||||
/>
|
/>
|
||||||
</>
|
</Box>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
pt: isMobile ? "0px" : "20px",
|
pt: isMobile ? "0px" : "20px",
|
||||||
pb: "20px",
|
pb: "20px",
|
||||||
pl: isFigmaTablte ? (isMobile ? "20px" : "34px") : "28px",
|
pl: isFigmaTablte ? (isWrappColumn ? "20px" : "31px") : "20px",
|
||||||
pr: isFigmaTablte ? "19px" : "20px",
|
pr: isFigmaTablte ? "19px" : "20px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
@ -156,7 +162,7 @@ export default function SettingOptionsAndPict({ totalIndex }: SettingOptionsAndP
|
|||||||
Текст-заглушка на картинке
|
Текст-заглушка на картинке
|
||||||
</Typography>
|
</Typography>
|
||||||
<CustomTextField
|
<CustomTextField
|
||||||
sx={{ maxWidth: "330px", width: "100%" }}
|
sx={{ maxWidth: "360px", width: "100%" }}
|
||||||
placeholder={"Пример текста"}
|
placeholder={"Пример текста"}
|
||||||
text={listQuestions[quizId][totalIndex].content.replText}
|
text={listQuestions[quizId][totalIndex].content.replText}
|
||||||
onChange={({ target }) => debounced(target.value)}
|
onChange={({ target }) => debounced(target.value)}
|
||||||
|
|||||||
@ -39,18 +39,18 @@ export default function OwnTextField({ totalIndex }: Props) {
|
|||||||
width: "auto",
|
width: "auto",
|
||||||
maxWidth: "745px",
|
maxWidth: "745px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
pb: "20px",
|
pb: "15px",
|
||||||
pl: "20px",
|
pl: "20px",
|
||||||
pr: "20px",
|
pr: "20px",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
gap: isMobile ? "18px" : "20px",
|
gap: isMobile ? "15px" : "20px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<CustomTextField
|
<CustomTextField
|
||||||
placeholder={"Пример ответа"}
|
placeholder={"Пример ответа"}
|
||||||
text={listQuestions[quizId][totalIndex].content.placeholder}
|
text={listQuestions[quizId][totalIndex].content.placeholder}
|
||||||
onChange={({ target }) => debounced(target.value)}
|
onChange={({ target }) => debounced(target.value)}
|
||||||
sx={{ maxWidth: "640px", width: "100%" }}
|
sx={{ maxWidth: isFigmaTablte ? "549px" : "640px", width: "100%" }}
|
||||||
/>
|
/>
|
||||||
<Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
|
<Box sx={{ display: "flex", alignItems: "center", gap: "12px" }}>
|
||||||
<Typography
|
<Typography
|
||||||
|
|||||||
@ -55,7 +55,7 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
|
|||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
flexDirection: isWrappColumn ? "column" : null,
|
flexDirection: isWrappColumn ? "column" : null,
|
||||||
marginRight: isMobile ? "0px" : "50px",
|
marginRight: isFigmaTablte ? "0px" : "32px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
@ -107,7 +107,7 @@ export default function SettingTextField({ totalIndex }: SettingTextFieldProps)
|
|||||||
pt: isMobile ? "0px" : "20px",
|
pt: isMobile ? "0px" : "20px",
|
||||||
pb: "20px",
|
pb: "20px",
|
||||||
pl: isFigmaTablte ? (isWrappColumn ? "20px" : "34px") : "20px",
|
pl: isFigmaTablte ? (isWrappColumn ? "20px" : "34px") : "20px",
|
||||||
pr: isFigmaTablte ? "19px" : "20px",
|
pr: isFigmaTablte ? "14px" : "20px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
gap: isMobile ? "13px" : "14px",
|
gap: isMobile ? "13px" : "14px",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user