diff --git a/src/components/fieldsDisplayForm/DefaultField.js b/src/components/fieldsDisplayForm/DefaultField.js
index 5c2c127e6ad1d30b1b9ceacd79ef278720bd4541..a2bb4c2b9e3bd963d63d88f5114b13d53c12f5c2 100644
--- a/src/components/fieldsDisplayForm/DefaultField.js
+++ b/src/components/fieldsDisplayForm/DefaultField.js
@@ -27,17 +27,21 @@ export default function DefaultField(props) {
<>
<Grid item xs={12} sm={6} className={classes.questionsGrid}>
<TextField
+ multiline
value={props.question}
label="Pergunta"
className={classes.textFieldStyle}
onChange={(e) => setQuestionField(e.target.value, props.idq)}
/>
- <Grid className={classes.errorGrid}>
- {props.error.errorMsg.question}
- </Grid>
+ {props.error.errorMsg.question && (
+ <Grid className={classes.errorGrid}>
+ {props.error.errorMsg.question}
+ </Grid>
+ )}
</Grid>
<Grid item xs={12} sm={6} className={classes.questionsGrid}>
<TextField
+ multiline
value={props.description}
label="Descrição"
className={classes.textFieldStyle}
diff --git a/src/components/fieldsDisplayForm/DisplayForm.js b/src/components/fieldsDisplayForm/DisplayForm.js
index 6591e03f17ddf26f645381a4951a52c1cf392311..a1f257e236ce521afed7665a2af787941c2bac54 100644
--- a/src/components/fieldsDisplayForm/DisplayForm.js
+++ b/src/components/fieldsDisplayForm/DisplayForm.js
@@ -41,6 +41,15 @@ const useStyles = makeStyles((theme) => ({
marginTop: "-90px",
},
},
+ sizeFormating: {
+ ["@media (max-width:600px)"]: {
+ ["@media (max-width:430px)"]: {
+ marginLeft: "1%",
+ width: "95%",
+ },
+ marginLeft: "2%",
+ },
+ },
}));
/** CSS style used through Material Ui. */
const theme = createMuiTheme({
@@ -96,6 +105,7 @@ function DisplayForm() {
sm={8}
direction="column"
alignItems="center"
+ className={classes.sizeFormating}
>
<Droppable droppableId={columnId}>
{(provided, snapshot) => {
diff --git a/src/components/fieldsDisplayForm/FormFieldCheckbox.js b/src/components/fieldsDisplayForm/FormFieldCheckbox.js
index a35fe25b44b154cfd6efc66aaa4ae57352e9ad36..0595faf5caf91c5dc119b53770b285e4f4992224 100644
--- a/src/components/fieldsDisplayForm/FormFieldCheckbox.js
+++ b/src/components/fieldsDisplayForm/FormFieldCheckbox.js
@@ -21,7 +21,7 @@ const useStyles = makeStyles((theme) => ({
["@media (max-width:1050px)"]: {
width: theme.spacing(63),
["@media (max-width:849px)"]: {
- width: "100%",
+ width: "85%",
},
},
marginBottom: "2%",
@@ -98,6 +98,7 @@ function FormFieldCheckbox(props) {
</Grid>
<Grid item xs={8}>
<TextField
+ multiline
label={"Opção " + index}
value={x}
className={classes.textFieldStyle}
diff --git a/src/components/fieldsDisplayForm/FormFieldRadio.js b/src/components/fieldsDisplayForm/FormFieldRadio.js
index 9abb8362a91c51e9235ad514861f42f2ae3babe5..b87772183a453e95a93022f65ede9791eb51dd13 100644
--- a/src/components/fieldsDisplayForm/FormFieldRadio.js
+++ b/src/components/fieldsDisplayForm/FormFieldRadio.js
@@ -21,7 +21,7 @@ const useStyles = makeStyles((theme) => ({
["@media (max-width:1050px)"]: {
width: theme.spacing(63),
["@media (max-width:849px)"]: {
- width: "100%",
+ width: "85%",
},
},
marginBottom: "2%",
@@ -97,6 +97,7 @@ function FormFieldRadio(props) {
</Grid>
<Grid item xs={8}>
<TextField
+ multiline
label={"Opção " + index}
value={x}
className={classes.textFieldStyle}
diff --git a/src/components/fieldsDisplayForm/FormFieldSelect.js b/src/components/fieldsDisplayForm/FormFieldSelect.js
index 1ae105707c9fb70adcf810d20d38bb5a3d874e81..959cb50f4627b21668f5ce2e99218174dc2cd096 100644
--- a/src/components/fieldsDisplayForm/FormFieldSelect.js
+++ b/src/components/fieldsDisplayForm/FormFieldSelect.js
@@ -20,7 +20,7 @@ const useStyles = makeStyles((theme) => ({
["@media (max-width:1050px)"]: {
width: theme.spacing(63),
["@media (max-width:849px)"]: {
- width: "100%",
+ width: "85%",
},
},
marginBottom: "2%",
@@ -85,6 +85,7 @@ function FormFieldSelect(props) {
<Grid container>
<Grid item xs={10}>
<TextField
+ multiline
label={"Opção " + index}
value={x}
className={classes.textFieldStyle}
diff --git a/src/components/fieldsDisplayForm/FormFieldSubform.js b/src/components/fieldsDisplayForm/FormFieldSubform.js
index 08d4201a35a74706fef133d70bebd698d28ec410..cd497ee76f24265802173fc0a8d1c1d681b50d4f 100644
--- a/src/components/fieldsDisplayForm/FormFieldSubform.js
+++ b/src/components/fieldsDisplayForm/FormFieldSubform.js
@@ -20,7 +20,7 @@ const useStyles = makeStyles((theme) => ({
["@media (max-width:1050px)"]: {
width: theme.spacing(63),
["@media (max-width:849px)"]: {
- width: "100%",
+ width: "85%",
},
},
marginBottom: "2%",
diff --git a/src/components/fieldsDisplayForm/FormFieldText.js b/src/components/fieldsDisplayForm/FormFieldText.js
index 595841d7e57a74ba40b3eac2af119450c2bb84da..7c4d19ad74759fd6ab8fa11e47e34badc466a46a 100644
--- a/src/components/fieldsDisplayForm/FormFieldText.js
+++ b/src/components/fieldsDisplayForm/FormFieldText.js
@@ -24,7 +24,7 @@ const useStyles = makeStyles((theme) => ({
["@media (max-width:1050px)"]: {
width: theme.spacing(63),
["@media (max-width:849px)"]: {
- width: "100%",
+ width: "85%",
},
},
marginBottom: "2%",
@@ -35,10 +35,17 @@ const useStyles = makeStyles((theme) => ({
questionsGrid: {
marginBottom: "20px",
},
+ validationGrid: {
+ marginBottom: "20px",
+ marginLeft: "15%",
+ ["@media (max-width:600px)"]: {
+ marginLeft: "0px",
+ },
+ },
errorGrid: {
marginTop: "1%",
color: "#ff4646",
- width: "40%",
+ width: "80%",
fontSize: "13px",
},
row: {
@@ -49,6 +56,32 @@ const useStyles = makeStyles((theme) => ({
marginTop: "5%",
},
},
+ selectFormating: {
+ ["@media (max-width:430px)"]: {
+ minWidth: "0px",
+ width: "85%",
+ },
+ minWidth: "250px",
+ },
+ subformSelect: {
+ ["@media (max-width:430px)"]: {
+ width: "70%",
+ fontSize: "76%",
+ },
+ },
+ excludeFormating: {
+ ["@media (max-width:1050px)"]: {
+ marginLeft: "40%",
+ },
+ },
+ excludeFormatingSmall: {
+ ["@media (max-width:1050px)"]: {
+ marginLeft: "10%",
+ },
+ ["@media (max-width: 600px)"]: {
+ marginLeft: "50%",
+ },
+ },
}));
/** Main function that returns the content of the option 'question'. */
function FormFieldText(props) {
@@ -119,6 +152,7 @@ function FormFieldText(props) {
Selecione uma validação
</InputLabel>
<Select
+ className={classes.selectFormating}
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
onChange={(event) =>
@@ -126,7 +160,6 @@ function FormFieldText(props) {
}
value={props.validationType}
label="Selecione uma validação"
- style={{ minWidth: "250px" }}
error={props.validationType ? false : true}
>
{validationOpts.map((x) => (
@@ -137,9 +170,8 @@ function FormFieldText(props) {
</Select>
</Grid>
{props.validationType ? (
- <Grid item xs={12} sm={5} className={classes.questionsGrid}>
+ <Grid item xs={12} className={classes.validationGrid}>
<TextField
- style={{ width: "45%" }}
label="Quantidade"
value={props.validationValue}
onChange={(event) =>
@@ -151,7 +183,15 @@ function FormFieldText(props) {
</Grid>
</Grid>
) : null}
- <Grid item xs={1}>
+ <Grid
+ item
+ xs={1}
+ className={
+ props.validationType
+ ? classes.excludeFormatingSmall
+ : classes.excludeFormating
+ }
+ >
<Tooltip
title="Remover a validação"
aria-label="Remover a validação"
diff --git a/src/components/fieldsDisplayForm/FormFieldTitle.js b/src/components/fieldsDisplayForm/FormFieldTitle.js
index ca1b0c01bf5d5a544b9b446c8ee838301a4cfc4e..e42eeea54baf6e146a0c0c8ab27e4b095af54fab 100644
--- a/src/components/fieldsDisplayForm/FormFieldTitle.js
+++ b/src/components/fieldsDisplayForm/FormFieldTitle.js
@@ -13,7 +13,7 @@ const useStyles = makeStyles((theme) => ({
["@media (max-width:1050px)"]: {
width: theme.spacing(63),
["@media (max-width:849px)"]: {
- width: "100%",
+ width: "85%",
},
},
marginBottom: "2%",
@@ -29,6 +29,7 @@ const useStyles = makeStyles((theme) => ({
},
description: {
fontSize: "x-large",
+ marginBottom: "2%",
},
errorGrid: {
marginTop: "1%",
@@ -46,6 +47,7 @@ function FormFieldText(props) {
return (
<Paper className={classes.paper}>
<TextField
+ multiline
value={props.question}
label="Título do formulário"
fullWidth
@@ -64,6 +66,7 @@ function FormFieldText(props) {
<Grid item xs={9} className={classes.questionsGrid}>
<TextField
+ multiline
value={props.description}
label="Descrição do formulário"
onChange={(e) => setDescriptionField(e.target.value, props.idq)}
diff --git a/src/components/fieldsDisplayForm/SideMenu.js b/src/components/fieldsDisplayForm/SideMenu.js
index 1c5764c85a5f43047221218aef22ffbe46a118b5..51a29fbe6958aa0b2d1abddfb132e2afe2fec676 100644
--- a/src/components/fieldsDisplayForm/SideMenu.js
+++ b/src/components/fieldsDisplayForm/SideMenu.js
@@ -41,12 +41,6 @@ const useStyles = makeStyles((theme) => ({
newQuestionGrid: {
marginTop: "5%",
},
- test: {
- display: "flex",
- flexDirection: "row",
- maxWidth: "190px",
- height: "268.5",
- },
flex: {},
newQuestionGrid: {
["@media(max-width: 1050px)"]: {
@@ -70,7 +64,7 @@ function SideMenu(props) {
<h4>Adicionar pergunta:</h4>
</Grid>
<IconButton
- aria-label="add select"
+ aria-label="add question"
type="submit"
size="medium"
className={classes.addButton}
@@ -103,7 +97,7 @@ function SideMenu(props) {
}}
>
<RadioButtonCheckedIcon />
- Múltipla escolha
+ Seleção Única
</IconButton>
<IconButton
aria-label="add checkbox"
@@ -115,7 +109,7 @@ function SideMenu(props) {
}}
>
<CheckBoxOutlineBlankIcon />
- Seleção Única
+ Múltipla Escolha
</IconButton>
<IconButton
aria-label="add subform"