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