Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Fix]: Enhance Mobile Responsiveness in "Edit Tutorial" Section #1183 #1184

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

[Fix]: Enhance Mobile Responsiveness in "Edit Tutorial" Section #1183 #1184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions src/components/Tutorials/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,14 @@ import { Collapse, Button } from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { makeStyles } from "@mui/styles";


const useStyles = makeStyles(theme => ({
flexRow: {
display: "flex",
flexDirection: "row"
flexDirection: "row",
[theme.breakpoints.down('sm')]: {
flexDirection: "column"
},
},
collapseContainer: {
minWidth: "100%",
Expand Down Expand Up @@ -199,6 +203,7 @@ const ViewTutorial = () => {
</Grid>
)}


<Grid>
<Grid xs={24} sm={24} md={24}>
<TutorialHeading
Expand All @@ -210,8 +215,9 @@ const ViewTutorial = () => {
/>
</Grid>
</Grid>

<Grid className={classes.flexRow}>
<ExpandMore
{ isDesktop && (<ExpandMore
data-testid="tutorial-collapse-button"
expand={expand}
onClick={() => {
Expand All @@ -223,9 +229,11 @@ const ViewTutorial = () => {
>
<ExpandMoreIcon className={classes.ExpandIcon} />
</ExpandMore>
)}

<Grid
width={stepPanelVisible ? (isDesktop ? "55%" : "100%") : "0"}
width={stepPanelVisible ? (isDesktop ? "55%" : "100%") : (isDesktop ? "0" : "90%")}
marginLeft={ isDesktop ? "" : "30px"}
padding={stepPanelVisible ? "0 2rem" : "0"}
className={classes.widthTransition}
>
Expand All @@ -249,7 +257,7 @@ const ViewTutorial = () => {
</Collapse>
</Grid>

<Grid className={classes.editorContainer}>
<Grid className={classes.editorContainer} style={{ marginTop: "20px", padding: isDesktop ? "" : "10px"}}>
<Grid className="tutorial-content" justify="center" container>
<Grid
xs={24}
Expand Down
12 changes: 8 additions & 4 deletions src/components/Tutorials/subComps/ControlButtons.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ const useStyles = makeStyles(theme => ({
display: "flex",
justifyContent: "space-between",
[theme.breakpoints.down("sm")]: {
flexDirection: "column",
flexDirection: "",
alignItems: "center",
gap: "30px"
gap: "30px",
}
},
rightButtonsGroup: {
Expand All @@ -24,8 +24,12 @@ const useStyles = makeStyles(theme => ({
"&:hover": {
borderWidth: "2px"
},
minWidth: "fit-content"
minWidth: "fit-content",
[theme.breakpoints.down("sm")]: {
marginLeft: "-15px"
}
},

completeButton: {
minWidth: "fit-content"
}
Expand All @@ -39,7 +43,7 @@ const ControlButtons = ({
setStepData
}) => {
const classes = useStyles();
if (!hide && stepsData) {
if (stepsData) {
return (
<Grid>
<Box className={classes.container}>
Expand Down
29 changes: 23 additions & 6 deletions src/components/Tutorials/subComps/EditControls.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,9 +116,10 @@ const EditControls = ({
return (
<>
<Stack
direction={"row"}
direction={isDesktop ? "row" : "column"}
sx={{
px: 2
px: 2,
mt: isDesktop ? 0 : 2
}}
>
<Button
Expand All @@ -127,12 +128,14 @@ const EditControls = ({
variant="contained"
sx={{
boxShadow: "none",
borderRadius: 1
borderRadius: 1,
mb: isDesktop ? 0 : 2
}}
onClick={() => toggleAddNewStep()}
>
<AddIcon /> Add New Step
</Button>
<div>
<Button
className="ml-24"
color="warning"
Expand All @@ -149,6 +152,9 @@ const EditControls = ({
setViewRemoveStepModal(!viewRemoveStepModal);
}}
disabled={step_length === 1}
sx={{
ml: isDesktop ? 0 : 5
}}
>
<DeleteIcon /> Remove step
<RemoveStepModal
Expand All @@ -160,6 +166,8 @@ const EditControls = ({
step_length={step_length}
/>
</Button>
</div>

<Box
sx={{
flexGrow: 1
Expand All @@ -174,20 +182,26 @@ const EditControls = ({
{mode === "view" && (
<Button
type="primary"
className="ml-24"
// className="ml-24"
onClick={() => setMode("edit")}
id="editorMode"
data-testId="editorMode"
sx={{
ml: isDesktop ? 0 : 2
}}
>
<EditIcon /> Editor mode
</Button>
)}
{mode === "edit" && (
<Button
type="primary"
className="ml-24"
// className="ml-24"
onClick={() => setMode("view")}
data-testId="previewMode"
sx={{
ml: isDesktop ? 0 : 2
}}
>
<FileCopyIcon /> Preview mode
</Button>
Expand All @@ -197,10 +211,13 @@ const EditControls = ({
onClick={handlePublishTutorial}
type="dashed"
disabled={publishLoad}
sx={{
ml: isDesktop ? 0 : 4
}}
>
<FileCopyIcon /> {isPublished ? "Unpublish" : "Publish"}
</Button>
<DropdownMenu key="more" />
<DropdownMenu key="more"/>
</>
)}
</div>
Expand Down
40 changes: 27 additions & 13 deletions src/components/Tutorials/subComps/RemoveStepModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import { useFirebase, useFirestore } from "react-redux-firebase";
import { useDispatch } from "react-redux";
import { removeStep } from "../../../store/actions";
import Snackbar from "@mui/material/Snackbar";
import { useMediaQuery } from "react-responsive";
import Typography from "@mui/material/Typography";
import { Box } from "@mui/material";

const RemoveStepModal = ({
owner,
Expand All @@ -20,6 +22,10 @@ const RemoveStepModal = ({
const dispatch = useDispatch();
const [visible, setVisible] = useState(false);

const isDesktop = useMediaQuery({
query: "(min-device-width: 767px)"
});

useEffect(() => {
setVisible(viewModal);
}, [viewModal]);
Expand Down Expand Up @@ -64,30 +70,38 @@ const RemoveStepModal = ({
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
style={{
border: "2px solid #000",
background: "whitesmoke",
boxShadow: "2rem gray",
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "10rem",
width: "20rem",
position: "absolute",
top: "40%",
left: "40%"
justifyContent: "center"
}}
>
<div>
<Typography>This action is can not be undone!</Typography>
<Box
style={{
border: "2px solid #000",
backgroundColor: "#fff",
boxShadow: "2rem gray",
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "12rem",
width: "20rem",
position: "absolute",
top: "40%",
left: isDesktop ? "40%" : " 12%"
}}
>
<div style={{ width: "200px", textAlign: "center", backgroundColor: "" }}>
<Typography style={{ fontSize: "20px" }}>This action is can not be undone!</Typography>
<form onSubmit={handleOnOk}>
<Button key="back" onClick={handleOnCancel}>
<Button key="back" onClick={handleOnCancel} style={{ color: "white", marginTop: "10px", backgroundColor: "#000" }}>
<Typography>Cancel</Typography>
</Button>
<Button key="remove" type="submit">
<Button key="remove" type="submit" style={{ marginTop: "10px", marginLeft: "20px", background: "#fff" }}>
<Typography> Remove</Typography>
</Button>
</form>
</div>
</Box>
</Modal>
);
};
Expand Down
2 changes: 1 addition & 1 deletion src/components/Tutorials/subComps/StepsPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const StepsPanel = ({
</Grid>
</Grid>
{!hideButton &&
false && ( //remove false to show
false && ( //remove false to show
<Button
type="link"
size="large"
Expand Down
2 changes: 1 addition & 1 deletion src/components/Tutorials/subComps/TutorialTitle.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const TutorialHeading = ({
<Grid
style={{
display: "flex",
flexDirection: "row",
flexDirection: isDesktop ? "row" : "column",
justifyContent: "space-around",
alignItems: "center"
}}
Expand Down