diff --git a/src/Components/ResourcePageComponents/CommentForm.js b/src/Components/ResourcePageComponents/CommentForm.js index 0b13b1479b9329bf1f31228575d829fb60f27f2a..efbf0a0349ad1184ac616bd738faffa5abfba7a0 100644 --- 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 - 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={2}> - <div style={{height : "100%", display : "flex", flexDirection : "column", justifyContent : "flex-end"}}> - { - props.recurso ? - ( - <OrangeButton type="submit">Publicar</OrangeButton> - ) - : - ( - <PurpleButton type="submit"><EditIcon/>Enviar</PurpleButton> - ) - } - </div> - </Grid> + { + windowWidth > 990 ? + ( + <> + <Grid item xs={10}> + <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={2}> + <div style={{height : "100%", display : "flex", flexDirection : "column", justifyContent : "flex-end"}}> + { + props.recurso ? + ( + <OrangeButton type="submit">Publicar</OrangeButton> + ) + : + ( + <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; diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js index 3aaf2cc31686400bd9230bafc2d660d1b751a7ef..924a690434497aa0f7e133ff4ddec765310d5566 100644 --- 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; - padding-left : 15px; + font-size : 14px; padding-bottom : 20px; + @media screen and (min-width : 990px) { + padding-right : 15px; + padding-left : 15px; + } h3 { font-family : 'Roboto Light','Roboto Regular',Roboto;