From c3835816c55f366d7a01fd61faab51b1543da0c9 Mon Sep 17 00:00:00 2001
From: Gabriel Silva Hermida <gash18@inf.ufpr.br>
Date: Tue, 22 Sep 2020 10:19:31 -0300
Subject: [PATCH] Issue #44: /view small screen format correction
Signed-off-by: Gabriel Silva Hermida <gash18@inf.ufpr.br>
---
.../fieldsVisualizeForm/FormFieldCheckbox.js | 19 ++-
.../fieldsVisualizeForm/FormFieldRadio.js | 21 ++--
.../fieldsVisualizeForm/FormFieldSelect.js | 21 ++--
.../fieldsVisualizeForm/FormFieldSubform.js | 118 +++++++++---------
.../fieldsVisualizeForm/FormFieldText.js | 17 ++-
.../fieldsVisualizeForm/FormFieldTitle.js | 82 +++++-------
src/pages/VisualizeForm.js | 57 +++++----
7 files changed, 154 insertions(+), 181 deletions(-)
diff --git a/src/components/fieldsVisualizeForm/FormFieldCheckbox.js b/src/components/fieldsVisualizeForm/FormFieldCheckbox.js
index 2ff9e25..3f23367 100644
--- a/src/components/fieldsVisualizeForm/FormFieldCheckbox.js
+++ b/src/components/fieldsVisualizeForm/FormFieldCheckbox.js
@@ -7,29 +7,26 @@ import Checkbox from "@material-ui/core/Checkbox";
import FieldFooterOptions from "./FieldFooterOptions";
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
width: theme.spacing(100),
minheight: theme.spacing(18),
- margin: theme.spacing(2),
["@media (max-width:827px)"]: {
- width: theme.spacing(70)
+ width: "85%",
},
- ["@media (max-width:590px)"]: {
- width: theme.spacing(40)
- }
+ marginBottom: "12px",
},
questionsGrid: {
- marginBottom: "20px"
+ marginBottom: "20px",
},
text: {
- color: "black"
+ color: "black",
},
validation: {
fontSize: "14px",
- color: "red"
- }
+ color: "red",
+ },
}));
function FormFieldCheckbox(props) {
@@ -72,7 +69,7 @@ function FormFieldCheckbox(props) {
direction="column"
justify="flex-start"
alignItems="flex-start"
- xs={5}
+ xs={12}
className={classes.questionsGrid}
>
{options}
diff --git a/src/components/fieldsVisualizeForm/FormFieldRadio.js b/src/components/fieldsVisualizeForm/FormFieldRadio.js
index c470b27..24d8e1b 100644
--- a/src/components/fieldsVisualizeForm/FormFieldRadio.js
+++ b/src/components/fieldsVisualizeForm/FormFieldRadio.js
@@ -8,36 +8,33 @@ import RadioGroup from "@material-ui/core/RadioGroup";
import FieldFooterOptions from "./FieldFooterOptions";
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
width: theme.spacing(100),
minheight: theme.spacing(18),
- margin: theme.spacing(2),
["@media (max-width:827px)"]: {
- width: theme.spacing(70)
+ width: "85%",
},
- ["@media (max-width:590px)"]: {
- width: theme.spacing(40)
- }
+ marginBottom: "12px",
},
questionsGrid: {
- marginBottom: "20px"
+ marginBottom: "20px",
},
text: {
- color: "black"
+ color: "black",
},
validation: {
fontSize: "14px",
- color: "red"
- }
+ color: "red",
+ },
}));
function FormFieldRadio(props) {
const classes = useStyles();
/** HTML object to be displayed on component return. */
- const options = props.options.map(function(x, index) {
+ const options = props.options.map(function (x, index) {
return (
<span>
<Typography
@@ -73,7 +70,7 @@ function FormFieldRadio(props) {
direction="column"
justify="flex-start"
alignItems="flex-start"
- xs={5}
+ xs={12}
className={classes.questionsGrid}
>
<RadioGroup>{options}</RadioGroup>
diff --git a/src/components/fieldsVisualizeForm/FormFieldSelect.js b/src/components/fieldsVisualizeForm/FormFieldSelect.js
index a52bb58..991dd25 100644
--- a/src/components/fieldsVisualizeForm/FormFieldSelect.js
+++ b/src/components/fieldsVisualizeForm/FormFieldSelect.js
@@ -8,36 +8,33 @@ import Typography from "@material-ui/core/Typography";
import FieldFooterOptions from "./FieldFooterOptions";
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
width: theme.spacing(100),
- minheight: theme.spacing(18),
- margin: theme.spacing(2),
+ height: "15%",
["@media (max-width:827px)"]: {
- width: theme.spacing(70)
+ width: "85%",
},
- ["@media (max-width:590px)"]: {
- width: theme.spacing(40)
- }
+ marginBottom: "12px",
},
questionsGrid: {
- marginBottom: "20px"
+ marginBottom: "20px",
},
text: {
- color: "black"
+ color: "black",
},
validation: {
fontSize: "14px",
- color: "red"
- }
+ color: "red",
+ },
}));
function FormFieldSelect(props) {
const classes = useStyles();
/** HTML object to be displayed on component return. */
- const options = props.options.map(function(x) {
+ const options = props.options.map(function (x) {
return <MenuItem value={x.placement}>{x.value}</MenuItem>;
});
diff --git a/src/components/fieldsVisualizeForm/FormFieldSubform.js b/src/components/fieldsVisualizeForm/FormFieldSubform.js
index f87e04a..5812a36 100644
--- a/src/components/fieldsVisualizeForm/FormFieldSubform.js
+++ b/src/components/fieldsVisualizeForm/FormFieldSubform.js
@@ -10,15 +10,15 @@ import FormFieldSelect from "./FormFieldSelect";
import FormFieldRadio from "./FormFieldRadio";
import FormFieldCheckbox from "./FormFieldCheckbox";
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
menu: {
width: theme.spacing(6),
minheight: theme.spacing(15),
position: "fixed",
top: theme.spacing(10),
left: "90%",
- padding: theme.spacing(1)
- }
+ padding: theme.spacing(1),
+ },
}));
function FormFieldSubform(props) {
@@ -34,10 +34,10 @@ function FormFieldSubform(props) {
async function getForm(id) {
const res = await api
.get(`/form/${id}`)
- .then(function(res) {
+ .then(function (res) {
setFormData(res.data);
})
- .catch(error => {
+ .catch((error) => {
alert("Um erro inesperado ocorreu ao tentar obter o subform.");
});
}
@@ -48,62 +48,58 @@ function FormFieldSubform(props) {
}, []);
return (
- <div>
- <Grid container direction="column" alignItems="center" justify="center">
- {formData ? (
- <div>
- {formData.inputs.map((input, index) => {
- if (input.type === 0)
- return (
- <FormFieldText
- question={input.question}
- description={input.description}
- id={input.id}
- />
- );
- else if (input.type === 3)
- return (
- <FormFieldSelect
- question={input.question}
- id={input.id}
- description={input.description}
- options={input.sugestions}
- />
- );
- else if (input.type === 2)
- return (
- <FormFieldRadio
- question={input.question}
- description={input.description}
- id={input.id}
- options={input.sugestions}
- />
- );
- else if (input.type === 1)
- return (
- <FormFieldCheckbox
- question={input.question}
- description={input.description}
- options={input.sugestions}
- id={input.id}
- />
- );
- else if (input.type === 4)
- return (
- <FormFieldSubform
- question={input.question}
- description={input.description}
- options={input.sugestions}
- id={input.subForm.contentFormId}
- />
- );
- })}
- </div>
- ) : (
- <p>Loading...</p>
- )}
- </Grid>
- </div>
+ <>
+ {formData ? (
+ formData.inputs.map((input, index) => {
+ if (input.type === 0)
+ return (
+ <FormFieldText
+ question={input.question}
+ description={input.description}
+ id={input.id}
+ />
+ );
+ else if (input.type === 3)
+ return (
+ <FormFieldSelect
+ question={input.question}
+ id={input.id}
+ description={input.description}
+ options={input.sugestions}
+ />
+ );
+ else if (input.type === 2)
+ return (
+ <FormFieldRadio
+ question={input.question}
+ description={input.description}
+ id={input.id}
+ options={input.sugestions}
+ />
+ );
+ else if (input.type === 1)
+ return (
+ <FormFieldCheckbox
+ question={input.question}
+ description={input.description}
+ options={input.sugestions}
+ id={input.id}
+ />
+ );
+ else if (input.type === 4)
+ return (
+ <FormFieldSubform
+ question={input.question}
+ description={input.description}
+ options={input.sugestions}
+ id={input.subForm.contentFormId}
+ />
+ );
+ })
+ ) : (
+ <p>Loading...</p>
+ )}
+ </>
);
}
diff --git a/src/components/fieldsVisualizeForm/FormFieldText.js b/src/components/fieldsVisualizeForm/FormFieldText.js
index 92d7cc0..ce3d8bf 100644
--- a/src/components/fieldsVisualizeForm/FormFieldText.js
+++ b/src/components/fieldsVisualizeForm/FormFieldText.js
@@ -5,29 +5,26 @@ import Paper from "@material-ui/core/Paper";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
width: theme.spacing(100),
height: "15%",
- margin: theme.spacing(2),
["@media (max-width:827px)"]: {
- width: theme.spacing(70)
+ width: "85%",
},
- ["@media (max-width:590px)"]: {
- width: theme.spacing(40)
- }
+ marginBottom: "12px",
},
questionsGrid: {
- marginBottom: "20px"
+ marginBottom: "20px",
},
text: {
- color: "black"
+ color: "black",
},
validation: {
fontSize: "14px",
- color: "red"
- }
+ color: "red",
+ },
}));
function FormFieldText(props) {
diff --git a/src/components/fieldsVisualizeForm/FormFieldTitle.js b/src/components/fieldsVisualizeForm/FormFieldTitle.js
index 530c7f3..97bfb3a 100644
--- a/src/components/fieldsVisualizeForm/FormFieldTitle.js
+++ b/src/components/fieldsVisualizeForm/FormFieldTitle.js
@@ -6,87 +6,71 @@ import Typography from "@material-ui/core/Typography";
import FieldFooterOptions from "./FieldFooterOptions";
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
width: theme.spacing(100),
height: "40%",
- margin: theme.spacing(2),
color: "#000000",
["@media (max-width:827px)"]: {
- width: theme.spacing(70)
+ width: "85%",
},
- ["@media (max-width:590px)"]: {
- width: theme.spacing(40)
- }
+ marginBottom: "12px",
+ marginTop: "16px",
},
questionsGrid: {
marginBottom: "20px",
color: "#000000",
["@media (max-width:827px)"]: {
- width: theme.spacing(70)
- }
+ width: theme.spacing(70),
+ },
},
title: {
fontSize: "45px",
color: "#000000",
["@media (max-width:827px)"]: {
- fontSize: "35px"
+ fontSize: "35px",
},
["@media (max-width:590px)"]: {
- fontSize: "25px"
- }
+ fontSize: "25px",
+ },
},
description: {
fontSize: "30px",
color: "#000000",
["@media (max-width:827px)"]: {
- fontSize: "25px"
+ fontSize: "25px",
},
["@media (max-width:590px)"]: {
- fontSize: "15px"
- }
- }
+ fontSize: "15px",
+ },
+ },
}));
function FormFieldText(props) {
const classes = useStyles();
return (
- <Grid>
- <Paper className={classes.paper}>
- <Grid container>
- <Grid item xs={12} className={classes.questionsGrid}>
- <Typography
- style={{ wordWrap: "break-word" }}
- className={classes.title}
- variant="h3"
- gutterBottom
- >
- {props.title}
- </Typography>
- </Grid>
- <Grid item xs={9} className={classes.questionsGrid}>
- <Typography
- style={{ wordWrap: "break-word" }}
- className={classes.description}
- variant="h4"
- gutterBottom
- >
- {props.description}
- </Typography>
- </Grid>
- <Grid
- item
- container
- direction="row"
- justify="flex-end"
- alignItems="flex-end"
- xs={3}
- ></Grid>
- </Grid>
- </Paper>
- </Grid>
+ <Paper className={classes.paper}>
+ <Typography
+ style={{ wordWrap: "break-word" }}
+ className={classes.title}
+ variant="h3"
+ gutterBottom
+ >
+ {props.title}
+ </Typography>
+ <Grid item xs={9} className={classes.questionsGrid}>
+ <Typography
+ style={{ wordWrap: "break-word" }}
+ className={classes.description}
+ variant="h4"
+ gutterBottom
+ >
+ {props.description}
+ </Typography>
+ </Grid>
+ </Paper>
);
}
diff --git a/src/pages/VisualizeForm.js b/src/pages/VisualizeForm.js
index a161ada..1408c85 100644
--- a/src/pages/VisualizeForm.js
+++ b/src/pages/VisualizeForm.js
@@ -13,15 +13,7 @@ import FormFieldCheckbox from "../components/fieldsVisualizeForm/FormFieldCheckb
import FormFieldTitle from "../components/fieldsVisualizeForm/FormFieldTitle";
import FormFieldSubform from "../components/fieldsVisualizeForm/FormFieldSubform";
-const useStyles = makeStyles(theme => ({
- menu: {
- width: theme.spacing(6),
- minheight: theme.spacing(15),
- position: "fixed",
- top: theme.spacing(10),
- left: "90%",
- padding: theme.spacing(1)
- },
+const useStyles = makeStyles((theme) => ({
button: {
type: "submit",
width: "100%",
@@ -30,13 +22,19 @@ const useStyles = makeStyles(theme => ({
padding: "10px 20px",
fontSize: "18px",
"&:hover": {
- backgroundColor: "rgb(25, 109, 23)"
- }
+ backgroundColor: "rgb(25, 109, 23)",
+ },
},
pageBody: {
minHeight: "calc(100vh - 92.4px - 78px)",
- paddingBottom: "78px"
- }
+ paddingBottom: "78px",
+ },
+ sizeFormating: {
+ ["@media (max-width:430px)"]: {
+ marginLeft: "3%",
+ width: "92%",
+ },
+ },
}));
const theme = createMuiTheme({
@@ -44,19 +42,19 @@ const theme = createMuiTheme({
MuiInput: {
underline: {
"&:before": {
- borderBottom: "1px solid #35c7fc"
+ borderBottom: "1px solid #35c7fc",
},
"&:after": {
- borderBottom: "1px solid #3f51b5"
- }
- }
+ borderBottom: "1px solid #3f51b5",
+ },
+ },
},
MuiButton: {
label: {
- color: "black"
- }
- }
- }
+ color: "black",
+ },
+ },
+ },
});
function VisualizeForm() {
@@ -76,10 +74,10 @@ function VisualizeForm() {
async function getForm(id) {
const res = await api
.get(`/form/${id}`)
- .then(function(res) {
+ .then(function (res) {
setFormData(res.data);
})
- .catch(error => {
+ .catch((error) => {
if (error.response.status === 401) {
let path = `/signin`;
history.push(path);
@@ -105,9 +103,16 @@ function VisualizeForm() {
return (
<MuiThemeProvider theme={theme}>
<div className={classes.pageBody}>
- <Grid container direction="column" alignItems="center" justify="center">
+ <Grid
+ container
+ xs={12}
+ direction="column"
+ alignItems="center"
+ justify="center"
+ className={classes.sizeFormating}
+ >
{formData ? (
- <div>
+ <>
<FormFieldTitle
title={formData.title}
description={formData.description}
@@ -158,7 +163,7 @@ function VisualizeForm() {
/>
);
})}
- </div>
+ </>
) : (
<p>Loading...</p>
)}
--
GitLab