responsiveness fix

9cb14a7c · Lucas Eduardo Schoenfelder · aa3db47f · 9cb14a7c · 9cb14a7c
Commit 9cb14a7c authored 4 years ago by Lucas Eduardo Schoenfelder
--- a/src/Components/ResourcePageComponents/CommentForm.js
+++ b/src/Components/ResourcePageComponents/CommentForm.js
@@ -72,6 +72,8 @@ export default function CommentForm (props) {
        }
    }
+    let windowWidth = window.innerWidth
    return (
        <StyledForm onSubmit={handleSubmit}>
            <label htmlFor="avaliacao-estrelas" className="start-label">
@@ -91,35 +93,77 @@ export default function CommentForm (props) {
            <div className="star-alert" style={attemptedSubmit ? {visibility : "visible"} : {visibility : "hidden" }}>{props.recurso ? "Avalie se o recurso foi útil." : "Avalie se esta coleção foi útil."}</div>
            <Grid container>
-                <Grid item xs={10}>
+                {
-                <StyledTextField
+                    windowWidth > 990 ?
-                    colecao={!props.recurso}
+                    (
-                    value={comment.value}
+                        <>
-                    multiline
+                        <Grid item xs={10}>
-                    rows="5"
+                            <StyledTextField
-                    error={comment.error}
+                                colecao={!props.recurso}
-                    label={props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção"}
+                                value={comment.value}
-                    onChange={e => handleChange(e)}
+                                multiline
-                    required={true}
+                                rows="5"
-                    help = {comment.error ? (props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção") : ''}
+                                error={comment.error}
-                />
+                                label={props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção"}
-                </Grid>
+                                onChange={e => handleChange(e)}
-                <Grid item xs={2}>
+                                required={true}
-                    <div style={{height : "100%", display : "flex", flexDirection : "column", justifyContent : "flex-end"}}>
+                                help = {comment.error ? (props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção") : ''}
-            {
+                                />
-                props.recurso ?
+                        </Grid>
-                (
+                        <Grid item xs={2}>
-                    <OrangeButton type="submit">Publicar</OrangeButton>
+                            <div style={{height : "100%", display : "flex", flexDirection : "column", justifyContent : "flex-end"}}>
-                )
+                                {
-                :
+                                    props.recurso ?
-                (
+                                    (
-                    <PurpleButton type="submit"><EditIcon/>Enviar</PurpleButton>
+                                        <OrangeButton type="submit">Publicar</OrangeButton>
-                )
+                                    )
-            }
+                                    :
-        </div>
+                                    (
-        </Grid>
+                                        <PurpleButton type="submit"><EditIcon/>Enviar</PurpleButton>
+                                    )
+                                }
+                            </div>
+                        </Grid>
-        <div className="campos-obrigatorios">* Campos obrigatórios.</div>
+                        <div className="campos-obrigatorios">* Campos obrigatórios.</div>
+                        </>
+                    )
+                    :
+                    (
+                        <>
+                        <Grid item xs={12}>
+                            <StyledTextField
+                                colecao={!props.recurso}
+                                value={comment.value}
+                                multiline
+                                rows="5"
+                                error={comment.error}
+                                label={props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção"}
+                                onChange={e => handleChange(e)}
+                                required={true}
+                                help = {comment.error ? (props.recurso ? "Escreva aqui a sua experiência com este Recurso" : "Escreva aqui a sua experiência com esta Coleção") : ''}
+                                />
+                        </Grid>
+                        <Grid item xs={12}>
+                            <div style={{paddingTop : "18px", display : "flex", justifyContent : "space-between"}}>
+                                <div className="campos-obrigatorios">* Campos obrigatórios.</div>
+                                <div style={{width : "40%"}}>
+                                {
+                                    props.recurso ?
+                                    (
+                                        <OrangeButton type="submit">Publicar</OrangeButton>
+                                    )
+                                    :
+                                    (
+                                        <PurpleButton type="submit"><EditIcon/>Enviar</PurpleButton>
+                                    )
+                                }
+                                </div>
+                            </div>
+                        </Grid>
+                    </>
+                    )
+                }
            </Grid >
        </StyledForm>
    )
@@ -177,6 +221,9 @@ const StyledForm = styled.form`
    display : flex;
    flex-direction : column;
    text-align : start;
+    @media screen and (max-width : 990px) {
+        padding-left : 15px;
+    }
    .start-label {
        font-size : 14px;

--- a/src/Components/ResourcePageComponents/CommentsArea.js
+++ b/src/Components/ResourcePageComponents/CommentsArea.js
@@ -183,9 +183,12 @@ const GrayContainer = styled.div`
    display : flex;
    flex-direction : column;
    justify-content : space-between;
-    padding-right : 15px;
+    font-size : 14px;
-    padding-left : 15px;
    padding-bottom : 20px;
+    @media screen and (min-width : 990px) {
+        padding-right : 15px;
+        padding-left : 15px;
+    }
    h3 {
        font-family : 'Roboto Light','Roboto Regular',Roboto;