Skip to content
Snippets Groups Projects
Commit 0b7c7e11 authored by Gabriel Silva Hermida's avatar Gabriel Silva Hermida
Browse files

Issue #31: Fixing /create and /edit formating 


Signed-off-by: Gabriel Silva Hermida's avatarGabriel Silva Hermida <gash18@inf.ufpr.br>
parent 8e67bd52
No related branches found
No related tags found
3 merge requests!58Version 1.1,!54Issue #53: Fix password info,!31Issue #31: Fixing /create and /edit formating
Hide whitespace changes
Inline Side-by-side
Showing
with 77 additions and 23 deletions
src/components/fieldsDisplayForm/DefaultField.js
+ 7
− 3
View file @ 0b7c7e11
......@@ -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}
......
src/components/fieldsDisplayForm/DisplayForm.js
+ 10
− 0
View file @ 0b7c7e11
......@@ -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) => {
......
src/components/fieldsDisplayForm/FormFieldCheckbox.js
+ 2
− 1
View file @ 0b7c7e11
......@@ -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}
......
src/components/fieldsDisplayForm/FormFieldRadio.js
+ 2
− 1
View file @ 0b7c7e11
......@@ -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}
......
src/components/fieldsDisplayForm/FormFieldSelect.js
+ 2
− 1
View file @ 0b7c7e11
......@@ -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}
......
src/components/fieldsDisplayForm/FormFieldSubform.js
+ 1
− 1
View file @ 0b7c7e11
......@@ -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%",
......
src/components/fieldsDisplayForm/FormFieldText.js
+ 46
− 6
View file @ 0b7c7e11
......@@ -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"
......
src/components/fieldsDisplayForm/FormFieldTitle.js
+ 4
− 1
View file @ 0b7c7e11
......@@ -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)}
......
src/components/fieldsDisplayForm/SideMenu.js
+ 3
− 9
View file @ 0b7c7e11
......@@ -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"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment