правки по мобилке в стартовой странице и вопросах
This commit is contained in:
Tamara
parent
c81b673017
commit
a2ccd7ae50
27
src/assets/icons/ArrowLeftSP.tsx
Normal file
27
src/assets/icons/ArrowLeftSP.tsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import {Box, SxProps, Theme, useTheme} from "@mui/material";
|
||||||
|
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
right: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ArrowLeftSP({right} : Props) {
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
height: "14px",
|
||||||
|
width: "19px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
transform: right ? "rotate(180deg)" : undefined
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8.12 10.808H5.24L0.855999 5.88L5.24 0.952H8.12L4.648 4.936H12.184V6.824H4.648L8.12 10.808Z" fill={theme.palette.brightPurple.main}/>
|
||||||
|
</svg>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -73,6 +73,7 @@ export default function ButtonsOptionsAndPict({
|
|||||||
display: "flex",
|
display: "flex",
|
||||||
flexWrap: isMobile ? "wrap" : "nowrap",
|
flexWrap: isMobile ? "wrap" : "nowrap",
|
||||||
gap: "6px",
|
gap: "6px",
|
||||||
|
maxWidth: isMobile ? "200px" : undefined
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<MiniButtonSetting
|
<MiniButtonSetting
|
||||||
|
|||||||
@ -151,181 +151,181 @@ export default function OptionsAndPicture({ question }: Props) {
|
|||||||
onClose={closeCropModal}
|
onClose={closeCropModal}
|
||||||
onSaveImageClick={handleCropModalSaveClick}
|
onSaveImageClick={handleCropModalSaveClick}
|
||||||
/>
|
/>
|
||||||
<Box
|
{/*<Box*/}
|
||||||
sx={{
|
{/* sx={{*/}
|
||||||
width: "100%",
|
{/* width: "100%",*/}
|
||||||
border: "1px solid #9A9AAF",
|
{/* border: "1px solid #9A9AAF",*/}
|
||||||
borderRadius: "8px",
|
{/* borderRadius: "8px",*/}
|
||||||
display: isTablet ? "block" : "none",
|
{/* display: isTablet ? "block" : "none",*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
>
|
{/*>*/}
|
||||||
<TextField
|
{/* <TextField*/}
|
||||||
fullWidth
|
{/* fullWidth*/}
|
||||||
focused={false}
|
{/* focused={false}*/}
|
||||||
placeholder={"Добавьте ответ"}
|
{/* placeholder={"Добавьте ответ"}*/}
|
||||||
multiline={question.content.largeCheck}
|
{/* multiline={question.content.largeCheck}*/}
|
||||||
InputProps={{
|
{/* InputProps={{*/}
|
||||||
startAdornment: (
|
{/* startAdornment: (*/}
|
||||||
<>
|
{/* <>*/}
|
||||||
<InputAdornment position="start">
|
{/* <InputAdornment position="start">*/}
|
||||||
<PointsIcon
|
{/* <PointsIcon*/}
|
||||||
style={{ color: "#9A9AAF", fontSize: "30px" }}
|
{/* style={{ color: "#9A9AAF", fontSize: "30px" }}*/}
|
||||||
/>
|
{/* />*/}
|
||||||
</InputAdornment>
|
{/* </InputAdornment>*/}
|
||||||
{!isMobile && (
|
{/* {!isMobile && (*/}
|
||||||
<Box
|
{/* <Box*/}
|
||||||
sx={{
|
{/* sx={{*/}
|
||||||
width: "60px",
|
{/* width: "60px",*/}
|
||||||
height: "40px",
|
{/* height: "40px",*/}
|
||||||
background: "#EEE4FC",
|
{/* background: "#EEE4FC",*/}
|
||||||
display: "flex",
|
{/* display: "flex",*/}
|
||||||
justifyContent: "space-between",
|
{/* justifyContent: "space-between",*/}
|
||||||
marginRight: "20px",
|
{/* marginRight: "20px",*/}
|
||||||
marginLeft: "12px",
|
{/* marginLeft: "12px",*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
>
|
{/* >*/}
|
||||||
<Box
|
{/* <Box*/}
|
||||||
sx={{
|
{/* sx={{*/}
|
||||||
display: "flex",
|
{/* display: "flex",*/}
|
||||||
alignItems: "center",
|
{/* alignItems: "center",*/}
|
||||||
justifyContent: "center",
|
{/* justifyContent: "center",*/}
|
||||||
width: "100%",
|
{/* width: "100%",*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
>
|
{/* >*/}
|
||||||
<ImageAddIcons fontSize="22px" color="#7E2AEA" />
|
{/* <ImageAddIcons fontSize="22px" color="#7E2AEA" />*/}
|
||||||
</Box>
|
{/* </Box>*/}
|
||||||
<span
|
{/* <span*/}
|
||||||
style={{
|
{/* style={{*/}
|
||||||
display: "flex",
|
{/* display: "flex",*/}
|
||||||
alignItems: "center",
|
{/* alignItems: "center",*/}
|
||||||
justifyContent: "center",
|
{/* justifyContent: "center",*/}
|
||||||
background: "#7E2AEA",
|
{/* background: "#7E2AEA",*/}
|
||||||
height: "100%",
|
{/* height: "100%",*/}
|
||||||
width: "25px",
|
{/* width: "25px",*/}
|
||||||
color: "white",
|
{/* color: "white",*/}
|
||||||
fontSize: "15px",
|
{/* fontSize: "15px",*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
>
|
{/* >*/}
|
||||||
+
|
{/* +*/}
|
||||||
</span>
|
{/* </span>*/}
|
||||||
</Box>
|
{/* </Box>*/}
|
||||||
)}
|
{/* )}*/}
|
||||||
</>
|
{/* </>*/}
|
||||||
),
|
{/* ),*/}
|
||||||
endAdornment: (
|
{/* endAdornment: (*/}
|
||||||
<InputAdornment position="end">
|
{/* <InputAdornment position="end">*/}
|
||||||
<IconButton
|
{/* <IconButton*/}
|
||||||
sx={{ padding: "0" }}
|
{/* sx={{ padding: "0" }}*/}
|
||||||
aria-describedby="my-popover-id"
|
{/* aria-describedby="my-popover-id"*/}
|
||||||
>
|
{/* >*/}
|
||||||
<MessageIcon
|
{/* <MessageIcon*/}
|
||||||
style={{
|
{/* style={{*/}
|
||||||
color: "#9A9AAF",
|
{/* color: "#9A9AAF",*/}
|
||||||
fontSize: "30px",
|
{/* fontSize: "30px",*/}
|
||||||
marginRight: "6.5px",
|
{/* marginRight: "6.5px",*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
/>
|
{/* />*/}
|
||||||
</IconButton>
|
{/* </IconButton>*/}
|
||||||
<Popover
|
{/* <Popover*/}
|
||||||
id="my-popover-id"
|
{/* id="my-popover-id"*/}
|
||||||
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
|
{/* anchorOrigin={{ vertical: "bottom", horizontal: "left" }}*/}
|
||||||
open={false}
|
{/* open={false}*/}
|
||||||
>
|
{/* >*/}
|
||||||
<TextareaAutosize
|
{/* <TextareaAutosize*/}
|
||||||
style={{ margin: "10px" }}
|
{/* style={{ margin: "10px" }}*/}
|
||||||
placeholder="Подсказка для этого ответа"
|
{/* placeholder="Подсказка для этого ответа"*/}
|
||||||
/>
|
{/* />*/}
|
||||||
</Popover>
|
{/* </Popover>*/}
|
||||||
<IconButton sx={{ padding: "0" }}>
|
{/* <IconButton sx={{ padding: "0" }}>*/}
|
||||||
<DeleteIcon
|
{/* <DeleteIcon*/}
|
||||||
style={{
|
{/* style={{*/}
|
||||||
color: theme.palette.grey2.main,
|
{/* color: theme.palette.grey2.main,*/}
|
||||||
marginRight: "-1px",
|
{/* marginRight: "-1px",*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
/>
|
{/* />*/}
|
||||||
</IconButton>
|
{/* </IconButton>*/}
|
||||||
</InputAdornment>
|
{/* </InputAdornment>*/}
|
||||||
),
|
{/* ),*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
sx={{
|
{/* sx={{*/}
|
||||||
"& .MuiInputBase-root": {
|
{/* "& .MuiInputBase-root": {*/}
|
||||||
padding: "13.5px",
|
{/* padding: "13.5px",*/}
|
||||||
borderRadius: "10px",
|
{/* borderRadius: "10px",*/}
|
||||||
background: "#ffffff",
|
{/* background: "#ffffff",*/}
|
||||||
height: "48px",
|
{/* height: "48px",*/}
|
||||||
},
|
{/* },*/}
|
||||||
"& .MuiOutlinedInput-notchedOutline": {
|
{/* "& .MuiOutlinedInput-notchedOutline": {*/}
|
||||||
border: "none",
|
{/* border: "none",*/}
|
||||||
},
|
{/* },*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
inputProps={{
|
{/* inputProps={{*/}
|
||||||
sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
|
{/* sx: { fontSize: "18px", lineHeight: "21px", py: 0 },*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
/>
|
{/* />*/}
|
||||||
|
|
||||||
{isMobile && (
|
{/*{isMobile && (*/}
|
||||||
<Box
|
{/* <Box*/}
|
||||||
sx={{
|
{/* sx={{*/}
|
||||||
display: "flex",
|
{/* display: "flex",*/}
|
||||||
alignItems: "center",
|
{/* alignItems: "center",*/}
|
||||||
m: "8px",
|
{/* m: "8px",*/}
|
||||||
position: "relative",
|
{/* position: "relative",*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
>
|
{/* >*/}
|
||||||
<Box
|
{/* <Box*/}
|
||||||
sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
|
{/* sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}*/}
|
||||||
/>
|
{/* />*/}
|
||||||
<ImageAddIcons
|
{/* <ImageAddIcons*/}
|
||||||
style={{
|
{/* style={{*/}
|
||||||
position: "absolute",
|
{/* position: "absolute",*/}
|
||||||
color: "#7E2AEA",
|
{/* color: "#7E2AEA",*/}
|
||||||
fontSize: "20px",
|
{/* fontSize: "20px",*/}
|
||||||
left: "45%",
|
{/* left: "45%",*/}
|
||||||
right: "55%",
|
{/* right: "55%",*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
/>
|
{/* />*/}
|
||||||
<Box
|
{/* <Box*/}
|
||||||
sx={{
|
{/* sx={{*/}
|
||||||
display: "flex",
|
{/* display: "flex",*/}
|
||||||
justifyContent: "center",
|
{/* justifyContent: "center",*/}
|
||||||
alignItems: "center",
|
{/* alignItems: "center",*/}
|
||||||
width: "20px",
|
{/* width: "20px",*/}
|
||||||
background: "#EEE4FC",
|
{/* background: "#EEE4FC",*/}
|
||||||
height: "40px",
|
{/* height: "40px",*/}
|
||||||
color: "white",
|
{/* color: "white",*/}
|
||||||
backgroundColor: "#7E2AEA",
|
{/* backgroundColor: "#7E2AEA",*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
>
|
{/* >*/}
|
||||||
<Box
|
{/* <Box*/}
|
||||||
sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
|
{/* sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}*/}
|
||||||
/>
|
{/* />*/}
|
||||||
<ImageAddIcons
|
{/* <ImageAddIcons*/}
|
||||||
style={{
|
{/* style={{*/}
|
||||||
position: "absolute",
|
{/* position: "absolute",*/}
|
||||||
color: "#7E2AEA",
|
{/* color: "#7E2AEA",*/}
|
||||||
fontSize: "20px",
|
{/* fontSize: "20px",*/}
|
||||||
left: "45%",
|
{/* left: "45%",*/}
|
||||||
right: "55%",
|
{/* right: "55%",*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
/>
|
{/* />*/}
|
||||||
<Box
|
{/* <Box*/}
|
||||||
sx={{
|
{/* sx={{*/}
|
||||||
display: "flex",
|
{/* display: "flex",*/}
|
||||||
justifyContent: "center",
|
{/* justifyContent: "center",*/}
|
||||||
alignItems: "center",
|
{/* alignItems: "center",*/}
|
||||||
width: "20px",
|
{/* width: "20px",*/}
|
||||||
background: "#EEE4FC",
|
{/* background: "#EEE4FC",*/}
|
||||||
height: "40px",
|
{/* height: "40px",*/}
|
||||||
color: "white",
|
{/* color: "white",*/}
|
||||||
backgroundColor: "#7E2AEA",
|
{/* backgroundColor: "#7E2AEA",*/}
|
||||||
}}
|
{/* }}*/}
|
||||||
>
|
{/* >*/}
|
||||||
+
|
{/* +*/}
|
||||||
</Box>
|
{/* </Box>*/}
|
||||||
</Box>
|
{/* </Box>*/}
|
||||||
</Box>
|
{/* </Box>*/}
|
||||||
)}
|
{/*)}*/}
|
||||||
</Box>
|
{/*</Box>*/}
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|||||||
@ -23,7 +23,7 @@ import { useUiTools } from "@root/uiTools/store";
|
|||||||
export default function QuestionsPage() {
|
export default function QuestionsPage() {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const { openedModalSettingsId, openBranchingPanel } = useUiTools();
|
const { openedModalSettingsId, openBranchingPanel } = useUiTools();
|
||||||
const isMobile = false//useMediaQuery(theme.breakpoints.down(660));
|
const isMobile = useMediaQuery(theme.breakpoints.down(660));
|
||||||
const quiz = useCurrentQuiz();
|
const quiz = useCurrentQuiz();
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
updateOpenBranchingPanel(false)
|
updateOpenBranchingPanel(false)
|
||||||
@ -79,7 +79,7 @@ export default function QuestionsPage() {
|
|||||||
sx={{
|
sx={{
|
||||||
position: "fixed",
|
position: "fixed",
|
||||||
left: isMobile ? "20px" : "250px",
|
left: isMobile ? "20px" : "250px",
|
||||||
bottom: "20px",
|
bottom: isMobile ? "140px" : "20px",
|
||||||
}}
|
}}
|
||||||
data-cy="create-question"
|
data-cy="create-question"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -245,7 +245,7 @@ export default function EditPage() {
|
|||||||
left: 0,
|
left: 0,
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
width: "100%",
|
width: "100%",
|
||||||
padding: "20px 40px",
|
padding: isMobile ? "20px 16px" : "20px 40px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "flex-end",
|
justifyContent: "flex-end",
|
||||||
gap: "15px",
|
gap: "15px",
|
||||||
@ -320,16 +320,20 @@ export default function EditPage() {
|
|||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
<Button
|
<a href={`/view`} target="_blank" rel="noreferrer" style={{ textDecoration: "none" }}>
|
||||||
variant="contained"
|
<Button
|
||||||
sx={{
|
variant="contained"
|
||||||
fontSize: "14px",
|
sx={{
|
||||||
lineHeight: "18px",
|
fontSize: "14px",
|
||||||
height: "34px",
|
lineHeight: "18px",
|
||||||
}}
|
height: "34px",
|
||||||
>
|
minWidth: "130px"
|
||||||
Опубликовать
|
}}
|
||||||
</Button>
|
>
|
||||||
|
Опубликовать
|
||||||
|
</Button>
|
||||||
|
</a>
|
||||||
|
|
||||||
</Box>
|
</Box>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -2,6 +2,7 @@ import AlignCenterIcon from "@icons/AlignCenterIcon";
|
|||||||
import AlignLeftIcon from "@icons/AlignLeftIcon";
|
import AlignLeftIcon from "@icons/AlignLeftIcon";
|
||||||
import AlignRightIcon from "@icons/AlignRightIcon";
|
import AlignRightIcon from "@icons/AlignRightIcon";
|
||||||
import ArrowDown from "@icons/ArrowDownIcon";
|
import ArrowDown from "@icons/ArrowDownIcon";
|
||||||
|
import ArrowLeft from "@icons/ArrowLeftSP";
|
||||||
import LayoutCenteredIcon from "@icons/LayoutCenteredIcon";
|
import LayoutCenteredIcon from "@icons/LayoutCenteredIcon";
|
||||||
import LayoutExpandedIcon from "@icons/LayoutExpandedIcon";
|
import LayoutExpandedIcon from "@icons/LayoutExpandedIcon";
|
||||||
import LayoutStandartIcon from "@icons/LayoutStandartIcon";
|
import LayoutStandartIcon from "@icons/LayoutStandartIcon";
|
||||||
@ -652,7 +653,7 @@ export default function StartPageSettings() {
|
|||||||
<Button
|
<Button
|
||||||
onClick={() => setFormState("design")}
|
onClick={() => setFormState("design")}
|
||||||
sx={{
|
sx={{
|
||||||
display: "block",
|
display: "flex",
|
||||||
marginTop: "20px",
|
marginTop: "20px",
|
||||||
padding: "0",
|
padding: "0",
|
||||||
fontWeight: "bold",
|
fontWeight: "bold",
|
||||||
@ -662,14 +663,14 @@ export default function StartPageSettings() {
|
|||||||
textUnderlineOffset: "2px",
|
textUnderlineOffset: "2px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
🡰 Вернуться к дизайну
|
<ArrowLeft right={false}/> Вернуться к дизайну
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
{formState === "design" && (
|
{formState === "design" && (
|
||||||
<Button
|
<Button
|
||||||
onClick={() => setFormState("content")}
|
onClick={() => setFormState("content")}
|
||||||
sx={{
|
sx={{
|
||||||
display: "block",
|
display: "flex",
|
||||||
marginLeft: "auto",
|
marginLeft: "auto",
|
||||||
marginTop: "20px",
|
marginTop: "20px",
|
||||||
padding: "0",
|
padding: "0",
|
||||||
@ -680,7 +681,7 @@ export default function StartPageSettings() {
|
|||||||
textUnderlineOffset: "2px",
|
textUnderlineOffset: "2px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Далее заполнить контент 🡲
|
Далее заполнить контент <ArrowLeft right={true}/>
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user