Skip to content
Snippets Groups Projects
Commit ceaf9041 authored by Gabriel Silva Hermida's avatar Gabriel Silva Hermida Committed by Stephanie Briere Americo
Browse files

Issue #44: /view small screen format correction 


Signed-off-by: Gabriel Silva Hermida's avatarGabriel Silva Hermida <gash18@inf.ufpr.br>
parent 6921aecc
Branches
No related tags found
2 merge requests!58Version 1.1,!54Issue #53: Fix password info
Show whitespace changes
Inline Side-by-side
Showing
with 154 additions and 181 deletions
src/components/fieldsVisualizeForm/FormFieldCheckbox.js
+ 8
− 11
View file @ ceaf9041
......@@ -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}
......
src/components/fieldsVisualizeForm/FormFieldRadio.js
+ 9
− 12
View file @ ceaf9041
......@@ -8,29 +8,26 @@ 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) {
......@@ -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>
......
src/components/fieldsVisualizeForm/FormFieldSelect.js
+ 9
− 12
View file @ ceaf9041
......@@ -8,29 +8,26 @@ 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) {
......
src/components/fieldsVisualizeForm/FormFieldSubform.js
+ 57
− 61
View file @ ceaf9041
......@@ -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) {
......@@ -37,7 +37,7 @@ function FormFieldSubform(props) {
.then(function (res) {
setFormData(res.data);
})
.catch(error => {
.catch((error) => {
alert("Um erro inesperado ocorreu ao tentar obter o subform.");
});
}
......@@ -48,11 +48,9 @@ function FormFieldSubform(props) {
}, []);
return (
<div>
<Grid container direction="column" alignItems="center" justify="center">
<>
{formData ? (
<div>
{formData.inputs.map((input, index) => {
formData.inputs.map((input, index) => {
if (input.type === 0)
return (
<FormFieldText
......@@ -97,13 +95,11 @@ function FormFieldSubform(props) {
id={input.subForm.contentFormId}
/>
);
})}
</div>
})
) : (
<p>Loading...</p>
)}
</Grid>
</div>
</>
);
}
......
src/components/fieldsVisualizeForm/FormFieldText.js
+ 7
− 10
View file @ ceaf9041
......@@ -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) {
......
src/components/fieldsVisualizeForm/FormFieldTitle.js
+ 33
− 49
View file @ ceaf9041
......@@ -6,57 +6,52 @@ 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}
......@@ -65,7 +60,6 @@ function FormFieldText(props) {
>
{props.title}
</Typography>
</Grid>
<Grid item xs={9} className={classes.questionsGrid}>
<Typography
style={{ wordWrap: "break-word" }}
......@@ -76,17 +70,7 @@ function FormFieldText(props) {
{props.description}
</Typography>
</Grid>
<Grid
item
container
direction="row"
justify="flex-end"
alignItems="flex-end"
xs={3}
></Grid>
</Grid>
</Paper>
</Grid>
);
}
......
src/pages/VisualizeForm.js
+ 31
− 26
View file @ ceaf9041
......@@ -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() {
......@@ -79,7 +77,7 @@ function VisualizeForm() {
.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>
)}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment