fix: rating inputs
This commit is contained in:
parent
772397189f
commit
9ab232aec7
@ -12,7 +12,6 @@ export const QUIZ_QUESTION_RATING: Omit<QuizQuestionRating, "id"> = {
|
|||||||
innerName: "",
|
innerName: "",
|
||||||
steps: 5,
|
steps: 5,
|
||||||
ratingExpanded: false,
|
ratingExpanded: false,
|
||||||
ratingDescription: "",
|
|
||||||
form: "star",
|
form: "star",
|
||||||
ratingNegativeDescription: "",
|
ratingNegativeDescription: "",
|
||||||
ratingPositiveDescription: "",
|
ratingPositiveDescription: "",
|
||||||
|
@ -15,7 +15,6 @@ export interface QuizQuestionRating extends QuizQuestionBase {
|
|||||||
innerName: string;
|
innerName: string;
|
||||||
steps: number;
|
steps: number;
|
||||||
ratingExpanded: boolean;
|
ratingExpanded: boolean;
|
||||||
ratingDescription: string;
|
|
||||||
/** Форма иконки */
|
/** Форма иконки */
|
||||||
form: string;
|
form: string;
|
||||||
hint: QuestionHint;
|
hint: QuestionHint;
|
||||||
|
@ -98,17 +98,17 @@ export default function RatingOptions({ totalIndex }: Props) {
|
|||||||
<>
|
<>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
width: isMobile ? "auto" : `${question.content.steps * 44}px`,
|
|
||||||
minWidth: "200px",
|
|
||||||
maxWidth: "440px",
|
|
||||||
display: "flex",
|
display: "flex",
|
||||||
px: "20px",
|
px: "20px",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
gap: "20px",
|
gap: "20px",
|
||||||
|
marginTop: isMobile ? "20px" : 0,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
|
width: isMobile ? "auto" : `${question.content.steps * 44}px`,
|
||||||
|
maxWidth: "440px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
padding: "0 10px",
|
padding: "0 10px",
|
||||||
@ -154,17 +154,17 @@ export default function RatingOptions({ totalIndex }: Props) {
|
|||||||
</Box>
|
</Box>
|
||||||
))}
|
))}
|
||||||
</Box>
|
</Box>
|
||||||
{!question.content.ratingDescription && (
|
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
mb: "20px",
|
mb: "20px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
maxWidth: isMobile ? "303px" : "290px",
|
maxWidth: "410px",
|
||||||
width: "100%",
|
width: "100%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<Box sx={{ minWidth: isMobile ? "140px" : "205px" }}>
|
||||||
<Typography
|
<Typography
|
||||||
ref={negativeRef}
|
ref={negativeRef}
|
||||||
sx={{
|
sx={{
|
||||||
@ -190,10 +190,10 @@ export default function RatingOptions({ totalIndex }: Props) {
|
|||||||
onBlur={({ target }) => debounceNegativeDescription(target.value)}
|
onBlur={({ target }) => debounceNegativeDescription(target.value)}
|
||||||
sx={{
|
sx={{
|
||||||
width: negativeTextWidth + 10 + "px",
|
width: negativeTextWidth + 10 + "px",
|
||||||
|
maxWidth: isMobile ? "140px" : "230px",
|
||||||
background: "transparent",
|
background: "transparent",
|
||||||
fontSize: "18px",
|
fontSize: "18px",
|
||||||
minWidth: "95px",
|
minWidth: "95px",
|
||||||
maxWidth: "230px",
|
|
||||||
transition: "0.2s",
|
transition: "0.2s",
|
||||||
"& .MuiInputBase-root": {
|
"& .MuiInputBase-root": {
|
||||||
"& .MuiInputBase-input": {
|
"& .MuiInputBase-input": {
|
||||||
@ -214,6 +214,8 @@ export default function RatingOptions({ totalIndex }: Props) {
|
|||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ minWidth: isMobile ? "140px" : "205px" }}>
|
||||||
<Typography
|
<Typography
|
||||||
ref={positiveRef}
|
ref={positiveRef}
|
||||||
sx={{
|
sx={{
|
||||||
@ -238,10 +240,10 @@ export default function RatingOptions({ totalIndex }: Props) {
|
|||||||
onBlur={({ target }) => debouncePositiveDescription(target.value)}
|
onBlur={({ target }) => debouncePositiveDescription(target.value)}
|
||||||
sx={{
|
sx={{
|
||||||
width: positiveTextWidth + 10 + "px",
|
width: positiveTextWidth + 10 + "px",
|
||||||
|
maxWidth: isMobile ? "140px" : "230px",
|
||||||
background: "transparent",
|
background: "transparent",
|
||||||
fontSize: "18px",
|
fontSize: "18px",
|
||||||
minWidth: "95px",
|
minWidth: "95px",
|
||||||
maxWidth: "230px",
|
|
||||||
transition: "0.2s",
|
transition: "0.2s",
|
||||||
"& .MuiInputBase-root": {
|
"& .MuiInputBase-root": {
|
||||||
"& .MuiInputBase-input": {
|
"& .MuiInputBase-input": {
|
||||||
@ -263,7 +265,7 @@ export default function RatingOptions({ totalIndex }: Props) {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
<ButtonsOptions
|
<ButtonsOptions
|
||||||
switchState={switchState}
|
switchState={switchState}
|
||||||
|
Loading…
Reference in New Issue
Block a user