From 0b7c7e117a412300c8630c609ed9f8955ba87898 Mon Sep 17 00:00:00 2001
From: Gabriel Silva Hermida <gash18@inf.ufpr.br>
Date: Thu, 3 Sep 2020 11:18:38 -0300
Subject: [PATCH] Issue #31: Fixing /create and /edit formating
Signed-off-by: Gabriel Silva Hermida <gash18@inf.ufpr.br>
---
.../fieldsDisplayForm/DefaultField.js | 10 ++--
.../fieldsDisplayForm/DisplayForm.js | 10 ++++
.../fieldsDisplayForm/FormFieldCheckbox.js | 3 +-
.../fieldsDisplayForm/FormFieldRadio.js | 3 +-
.../fieldsDisplayForm/FormFieldSelect.js | 3 +-
.../fieldsDisplayForm/FormFieldSubform.js | 2 +-
.../fieldsDisplayForm/FormFieldText.js | 52 ++++++++++++++++---
.../fieldsDisplayForm/FormFieldTitle.js | 5 +-
src/components/fieldsDisplayForm/SideMenu.js | 12 ++---
9 files changed, 77 insertions(+), 23 deletions(-)
diff --git a/src/components/fieldsDisplayForm/DefaultField.js b/src/components/fieldsDisplayForm/DefaultField.js
index 5c2c127..a2bb4c2 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 6591e03..a1f257e 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 a35fe25..0595faf 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 9abb836..b877721 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 1ae1057..959cb50 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 08d4201..cd497ee 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 595841d..7c4d19a 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 ca1b0c0..e42eeea 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 1c5764c..51a29fb 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"
--
GitLab