diff --git a/src/Components/Acessibility/ContrastBar.css b/src/Components/Acessibility/ContrastBar.css
index 059d5938680078875434cee03977aee3bdf1482d..17fdac74a260deeda4addbc9c4edd2a81bc8cf71 100644
--- a/src/Components/Acessibility/ContrastBar.css
+++ b/src/Components/Acessibility/ContrastBar.css
@@ -16,6 +16,10 @@ GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
+.Constrasticon {
+ width: 1em;
+ height: 1em;
+}
.contrastButton{
border: none;
@@ -30,16 +34,18 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
background-color: white;
}
.bar{
+ overflow: auto;
background-color: white;
width: 100%;
- height: 18px;
+
border-bottom: 1px solid #666;
}
.Contrastbar{
+ overflow: auto;
background-color: black;
width: 100%;
- height: 18px;
+
border-bottom: 1px solid white;
}
@@ -48,7 +54,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
text-decoration: underline;
cursor: pointer;
width: 140px;
- font-size: 13px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
@@ -59,21 +64,18 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
color: #666;
cursor: pointer;
width: 140px;
- font-size: 13px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
vertical-align: middle;
- }
+}
.textRight {
float:right;
height:100%;
display: flex;
- font-size: 13px;
}
.textLeft {
float:left;
height:100%;
- font-size: 13px;
}
\ No newline at end of file
diff --git a/src/Components/Acessibility/ContrastBar.js b/src/Components/Acessibility/ContrastBar.js
index 61156fdc9d76f0038c5f7a37db8531117467d6c6..572279452c970f4179557d1809f7ed6950d12407 100644
--- a/src/Components/Acessibility/ContrastBar.js
+++ b/src/Components/Acessibility/ContrastBar.js
@@ -56,8 +56,6 @@ function ContrastBar() {
})
}
- React.useEffect(() => { }, [state]);
-
const toggleContrast = () => {
var status = (state.contrast === '' ? 'Contrast' : '')
@@ -79,17 +77,6 @@ function ContrastBar() {
return (
<React.Fragment>
<div className={`${state.contrast}bar`}>
- <div className='textLeft hide-on-small-and-down'>
- <a className={`${state.contrast}text`} accessKey="1" href="#conteudo" title="Ir para o conteúdo alt + 1">
- Conteúdo 1
- </a>
- <a className={`${state.contrast}text`} accessKey="2" href="#menu" title="Ir para o menu alt + 2">
- Menu 2
- </a>
- <a className={`${state.contrast}text`} accessKey="3" href="#rodape" title="Ir para o rodapé alt + 3">
- Rodapé 3
- </a>
- </div>
<div className='textRight'>
<div>
<a className={`${state.contrast}text`} onClick={incrementFontSize} title="Aumentar tamanho da fonte">
@@ -104,7 +91,7 @@ function ContrastBar() {
</div>
<div onClick={toggleContrast}>
<a className={`${state.contrast}text`} title="Ativar modo de alto contraste">
- <img src={state.contrast === '' ? ContrastImageOff : ContrastImageOn} style={{ marginRight: 5 }} alt="ContrastIcon" width="11" height="11" />
+ <img className='Constrasticon' src={state.contrast === '' ? ContrastImageOff : ContrastImageOn} style={{ marginRight: 5 }} alt="ContrastIcon" />
Contraste
</a>
</div>
diff --git a/src/Components/CollectionCommentSection.js b/src/Components/CollectionCommentSection.js
index 64f74b2200282e53f0f42c3e0346279410eff394..a317a429b6174183140a772b4eab292bc10d4c66 100644
--- a/src/Components/CollectionCommentSection.js
+++ b/src/Components/CollectionCommentSection.js
@@ -20,7 +20,6 @@ import React, { useRef, useState, useEffect, Fragment } from 'react';
import { Grid } from '@material-ui/core';
import Card from '@material-ui/core/Card';
import Button from '@material-ui/core/Button';
-import EditIcon from '@material-ui/icons/Edit';
import styled from 'styled-components';
import CommentForm from './ResourcePageComponents/CommentForm.js';
import Comment from './Comment.js';
@@ -66,10 +65,6 @@ export default function CollectionCommentSection(props) {
setDeleteSnackOpen(!delete_snack_open);
}
- const handleScrollToCommentForm = () => {
- window.scrollTo(0, comment_ref.current.offsetTop);
- }
-
function handleOpenSnackSignIn() {
const info = {
open: true,
@@ -129,12 +124,7 @@ export default function CollectionCommentSection(props) {
`
const Secondary = styled.h3`
font-weight: 100;
- color: ${props => props.contrast === "" ? "black" : "white"};
- `
- const ButtonText = styled.span`
- font-weight: 900;
- color: ${props => props.contrast === "" ? "white" : "yellow"};
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const Image = styled.img`
`
@@ -143,22 +133,12 @@ export default function CollectionCommentSection(props) {
<Image src={Comentarios} style={{ width: "100%", maxWidth: 234 }} />
<BlueTitle contrast={contrast}>Compartilhe sua opinião com a rede!</BlueTitle>
<Secondary contrast={contrast}>Gostou desta coleção? Comente e compartilhe com a rede sua opinião. Interagindo com a rede, você contribui para que mais coleções como esta sejam criadas.</Secondary>
- <Button
- variant="contained"
- color="primary"
- style={contrast.contrast === "" ? {} : { backgroundColor: "black", border: "1px solid white" }}
- startIcon={<EditIcon />}
- onClick={handleScrollToCommentForm}
- >
- <ButtonText contrast={contrast}>Relatar experiência</ButtonText>
- </Button>
</NoCommentsContainer>
);
}
const CollectionComments = (contrast) => {
return (
<ComentariosBox contrast={contrast}>
- <h3>{totalReviews} {totalReviews !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
{reviews.map(r => {
return (
<div className="comentario-template" key={r.created_at}>
@@ -265,7 +245,7 @@ export default function CollectionCommentSection(props) {
<span className="span-purple">Você precisa entrar para comentar</span>
<Button onClick={() => setSignUpOpen(true)} style={props.contrast === "" ? { textTransform: "uppercase", color: "#666", fontWeight: "700" } : { textTransform: "uppercase", color: "yellow", fontWeight: "700", textDecoration: "underline" }}>
<ExitToAppIcon />ENTRAR
- </Button>
+ </Button>
</LogInToComment>
</Grid>
}
@@ -287,7 +267,7 @@ export default function CollectionCommentSection(props) {
>
<Alert onClose={handlePostSnackbar} severity="info">
Seu comentário foi publicado com sucesso!
- </Alert>
+ </Alert>
</Snackbar>
<Snackbar
open={delete_snack_open}
@@ -325,17 +305,17 @@ const ComentariosBox = styled.div`
border-bottom : 1px solid #f4f4f4;
}
- .load-more{
- width: 100%;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- }
-
- .button{
- box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
- }
+ .load-more{
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .button{
+ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+ }
`
const Avatar = styled.img`
@@ -384,7 +364,7 @@ const CommentAreaContainer = styled(Grid)`
const CommentAreaCard = styled(Card)`
padding: 45px;
background: ${props => props.contrast === "" ? "#f4f4f4" : "black !important"};
- border: ${props => props.contrast === "" ? "" : "1px solid white!important"};
+ border: ${props => props.contrast === "" ? "" : "1px solid white !important"};
`
const Title = styled.h1`
text-align: center;
diff --git a/src/Components/FormInput.js b/src/Components/FormInput.js
index c8c1e77b2697ece08c5a2e478afdaa5394b89956..feae566cc84594292aa6cbc4ae3c40f991846af7 100644
--- a/src/Components/FormInput.js
+++ b/src/Components/FormInput.js
@@ -86,11 +86,12 @@ export default function FormInput(props) {
contrast={props.contrast}
label={props.placeholder}
margin="normal"
- id={props.name}
+ id={props.id}
name={props.name}
type={props.inputType}
value={props.value}
onChange={props.handleChange}
+ onKeyDown={props.onKeyDown}
variant="outlined"
rows={props.rows}
error={props.error}
diff --git a/src/Components/FormationMaterialDescription.js b/src/Components/FormationMaterialDescription.js
index 8086eb4e61bd894617dd527c7d7adc98700ed9fa..f348771430afc319e0252cf9eb1935e7e379f93e 100644
--- a/src/Components/FormationMaterialDescription.js
+++ b/src/Components/FormationMaterialDescription.js
@@ -103,7 +103,7 @@ export default function FormationMaterialDescription(props) {
colecao_obj.id === 3 ? <LongUserIcon src={IcNute} />
: <div>
<UserIcon src={IcPeninsula} />
- <Red>
+ <Red contrast={props.contrast}>
{colecao_obj.developed}
</Red>
</div>
@@ -142,7 +142,7 @@ const Description = styled.p`
color: ${props => props.contrast === "" ? "#666" : "white"};
`
const TextContainer = styled.div`
- background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ background: ${props => props.contrast === "" ? "white" : "black"};
margin: 15px;
height: 100%;
@media screen and (max-width: 768px) {
@@ -185,7 +185,7 @@ export const WrappingCard = styled(Card)`
const IconList = styled.div`
margin: 15px;
- background: ${props => props.contrast === "" ? "#f4f4f4" : "black"};
+ background: ${props => props.contrast === "" ? "white" : "black"};
`
const IconItem = styled.span`
width: 100%;
diff --git a/src/Components/FormationMaterialHeader.js b/src/Components/FormationMaterialHeader.js
index af2417ff6835208ee354dc70f514e34c51205d3b..b231cd0f7c91835d37d2b614b5b839127cbd9d6a 100644
--- a/src/Components/FormationMaterialHeader.js
+++ b/src/Components/FormationMaterialHeader.js
@@ -78,7 +78,7 @@ export default function FormationMaterialHeader(props) {
</Grid>
<Grid item>
{colecao ?
- <StyledLink contrast={props.contrast}>
+ <StyledDiv contrast={props.contrast}>
<Button
className="button"
variant="contained"
@@ -88,7 +88,7 @@ export default function FormationMaterialHeader(props) {
>
{props.colecao ? "Ver todos os módulos" : "Iniciar leitura"}
</Button>
- </StyledLink>
+ </StyledDiv>
:
<StyledLink contrast={props.contrast} to={'/iframe-colecao?colecao=' + colecao_obj.id + '&topico=' + topico_obj.id}>
<Button
@@ -165,3 +165,17 @@ const StyledLink = styled(Link)`
}
}
`
+
+const StyledDiv = styled.div`
+ color: ${props => props.contrast === "" ? "#e81f4f !important" : "yellow !important"};
+ text-decoration: ${props => props.contrast === "" ? "none !important" : "underline !important"};
+
+ .button{
+ background-color: ${props => props.contrast === "" ? "" : "black "};
+ color: ${props => props.contrast === "" ? "white" : "yellow"};
+ border: ${props => props.contrast === "" ? "0" : "1px solid white"};
+ :hover{
+ background-color: ${props => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+ }
+ }
+`
diff --git a/src/Components/HomeScreenSearchBar.js b/src/Components/HomeScreenSearchBar.js
index 9b6926072fba239cfbd6ba9533aa17b1b3c86bc4..06f54a431882b3ebd5ba33831c300af59289bff2 100644
--- a/src/Components/HomeScreenSearchBar.js
+++ b/src/Components/HomeScreenSearchBar.js
@@ -24,10 +24,28 @@ import Menu from '@material-ui/core/Menu';
import { Store } from '../Store';
import { List, ListItem, ListItemIcon, ListItemText, MenuItem, Button, TextField } from '@material-ui/core'
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import { makeStyles } from '@material-ui/core/styles';
import SearchIcon from '@material-ui/icons/Search';
-/*import {Link} from 'react-router-dom'*/
+
+export const useStyles = makeStyles(theme => ({
+ darkTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ color: "white",
+ width: "100%"
+ },
+ lightTextField: {
+ maxWidth: "100%",
+ fontSize: "15px",
+ color: "black",
+ width: "100%"
+ }
+}));
export default function HomeScreenSearchBar() {
+
+ const classes = useStyles();
+
const [query, setQuery] = useState("")
const [searchClass, setSearchClass] = useState('LearningObject')
@@ -67,9 +85,9 @@ export default function HomeScreenSearchBar() {
}
const options = [
- { text: "Recursos", value: "LearningObject", color: state.contrast === "" ? "#ff7f00" : "yellow" },
- { text: "Coleções", value: "Collection", color: state.contrast === "" ? "#673ab7" : "yellow" },
- { text: "Usuários", value: "User", color: state.contrast === "" ? "#00bcd4" : "yellow" },
+ { text: "Recursos", value: "LearningObject", color: state.contrast === "" ? "#ff7f00" : "yellow", backColor: state.contrast === "" ? "#ff7f00" : "black"},
+ { text: "Coleções", value: "Collection", color: state.contrast === "" ? "#673ab7" : "yellow", backColor: state.contrast === "" ? "#673ab7" : "black"},
+ { text: "Usuários", value: "User", color: state.contrast === "" ? "#00bcd4" : "yellow", backColor: state.contrast === "" ? "#00bcd4" : "black"},
]
const [anchorEl, setAnchorEl] = React.useState(null);
const [selectedIndex, setSelectedIndex] = React.useState(0);
@@ -89,19 +107,19 @@ export default function HomeScreenSearchBar() {
setAnchorEl(null);
};
- const WIDTH = window.innerWidth;
-
return (
<StyledGrid container contrast={state.contrast}>
{goSearch && <Redirect to={`/busca?page=0&results_per_page=12&order=review_average&query=${state.search.query}&search_class=${state.search.class}`} />}
- <Grid item md={7} xs={12} className="first white">
+ <Grid item md={7} xs={12} className={state.contrast === "" ? "first white" : "first black"}>
<StyledTextField
+ contrast={state.contrast}
id="standard-search"
placeholder="O que está buscando?"
type="search"
margin="normal"
value={query}
+ InputProps={state.contrast === "" ? { className: classes.lightTextField } : { className: classes.darkTextField }}
onChange={handleChange}
onKeyPress={handleKeyDown}
fullwidth
@@ -148,12 +166,8 @@ export default function HomeScreenSearchBar() {
</Grid>
<Grid item md={2} xs={12}>
<div style={{ height: "100%" }}>
- <Button onClick={handleKeyDown} className="custom-button" style={{ backgroundColor: options[selectedIndex].color, color: "#fff" }}>
- {
- WIDTH < 503 &&
- <span>Buscar</span>
- }
- <SearchIcon fontSize="large" />
+ <Button onClick={handleKeyDown} className="custom-button" style={{ backgroundColor: options[selectedIndex].backColor, color: "#fff" }}>
+ <SearchIcon fontSize="large" style={state.contrast === "" ? {color: "white"} : {color: "yellow"}}/>
</Button>
</div>
</Grid>
@@ -162,35 +176,65 @@ export default function HomeScreenSearchBar() {
}
const StyledTextField = styled(TextField)`
+ background-color: ${props => props.contrast === "" ? "white" : "black"};
max-width: 100%;
font-size : 15px;
font-weight : lighter;
- color : inherit;
width : 90% !important;
margin-right : 10px !important;
margin-left : 10px !important;
+
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+ }
+ fieldset {
+ border-color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+ }
+
+ label{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
+ label.Mui-focused {
+ color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+ }
+
+ .MuiFormHelperText-root {
+ text-align : left;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
+
.MuiInput-underline::after {
- border-bottom : none !important;
+ border-bottom: 2px solid ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
}
+
`
const StyledGrid = styled(Grid)`
- padding-top : 20px;
+ margin-top : 20px;
- .MuiGrid-item {
+ .first {
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
@media screen and (max-width : 502px) {
- border-radius : 5px;
- margin-bottom : 10px !important;
+ border-top-left-radius : 5px;
+ border-top-right-radius : 5px;
+ }
+ @media screen and (min-width : 502px) {
+ border-top-left-radius : 5px;
+ border-bottom-left-radius : 5px;
}
}
- .first {
+ .second {
@media screen and (max-width : 502px) {
- margin-top : 10px;
+ border-left: ${props => props.contrast === "" ? "" : "1px solid white"};
+ border-right: ${props => props.contrast === "" ? "" : "1px solid white"};
}
@media screen and (min-width : 502px) {
- border-top-left-radius : 5px;
- border-bottom-left-radius : 5px;
+ border-top: ${props => props.contrast === "" ? "" : "1px solid white"};
+ border-bottom: ${props => props.contrast === "" ? "" : "1px solid white"};
}
}
@@ -198,12 +242,10 @@ const StyledGrid = styled(Grid)`
background-color : #fff;
}
- .MuiList-root {
- @media screen and (min-width : 502px) {
- border-left: 1px solid #ccc !important;
- }
-
+ .black {
+ background-color : black;
}
+
.MuiPaper-root {
width : 100% !important;
}
@@ -212,6 +254,7 @@ const StyledGrid = styled(Grid)`
}
.custom-button {
+ border: ${props => props.contrast === "" ? "" : "1px solid white"};
height: 100% !important;
width: 100% !important;
margin: 0 !important;
@@ -219,8 +262,10 @@ const StyledGrid = styled(Grid)`
align-items : center !important;
@media screen and (max-width : 502px) {
- padding-top : 10px;
- border-radius : 5px;
+ border-top-left-radius : 0 !important;
+ border-top-right-radius : 0 !important;
+ border-bottom-left-radius : 5px !important;
+ border-bottom-right-radius : 5px !important;
}
@media screen and (min-width : 502px) {
diff --git a/src/Components/LoginContainerFunction.js b/src/Components/LoginContainerFunction.js
index 699f3da6e2525fbf62324c02c65ef5d37fb6e514..8769e8093855fe957e3d4594dd9ad76df1838e11 100644
--- a/src/Components/LoginContainerFunction.js
+++ b/src/Components/LoginContainerFunction.js
@@ -208,7 +208,7 @@ const ContainerStyled = styled.div`
min-width : unset !important;
}
- `
+`
export const DialogHeaderStyled = styled.div`
text-align : center;
@@ -217,7 +217,7 @@ export const DialogHeaderStyled = styled.div`
justify-content : space-between;
padding : 10px 26px 0 26px;
height : 64px;
- `
+`
const H2Styled = styled.h2`
align-self : center;
color: ${props => props.contrast === "" ? "#666" : "white"};
@@ -227,7 +227,7 @@ const H2Styled = styled.h2`
justify-content: space-between;
text-align: center;
letter-spacing: .005em;
- `
+`
export const StyledCloseModalButton = styled(Button)`
display : inline-block;
@@ -241,26 +241,22 @@ export const StyledCloseModalButton = styled(Button)`
.icon{
color: ${props => props.contrast === "" ? "#666" : "white"};
}
- `
+`
export const DialogContentDiv = styled.div`
padding : 20px 30px;
overflow : visible !important;
- `
+`
export const SocialConnectDiv = styled.div`
- margin-top : 0;
- display : flex;
- flex-direction : row;
- `
+ margin: auto;
+
+`
export const StyledGoogleLoginButton = styled(GoogleLogin)`
background-color : #fff !important;
color : #666 !important;
border : 1px solid rgb(66, 133, 244);
box-shadow: 0 0 0 1px #4285f4 !important;
- :hover {
- background-color: #f4f4f4 !important;
- }
- `
+`
const DialogFooterStyled = styled.div`
box-sizing : border-box;
@@ -271,7 +267,7 @@ const DialogFooterStyled = styled.div`
justify-content : center;
text-align : center;
line-height : 1.42857143
- `
+`
export const RightSideStrikedH3 = styled.div`
@@ -281,7 +277,7 @@ export const RightSideStrikedH3 = styled.div`
font-weight : 500;
margin-right : 5px;
width : 44%;
- `
+`
export const LeftSideStrikedH3 = styled.div`
display : inline-block;
@@ -290,12 +286,12 @@ export const LeftSideStrikedH3 = styled.div`
font-weight : 500;
margin-left : 5px;
width : 44%;
- `
+`
export const H3Div = styled.div`
margin-top : 0;
margin-bottom : 10px;
- `
+`
const H3Styled = styled.h3`
overflow : hidden;
@@ -303,18 +299,18 @@ const H3Styled = styled.h3`
font-size : 14px;
color: ${props => props.contrast === "" ? "#666" : "white"};
margin : 10px 0;
- `
+`
const StyledAnchor = styled.a`
color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- `
+`
const ConfirmContainerStyled = styled.div`
display : flex;
margin-top : 10px;
align-items : center;
justify-content : center;
- `
+`
const StyledLoginButton = styled(Button)`
background-color: ${props => props.contrast === "" ? "#00bcd4 !important" : "black !important"};
box-shadow : none !important;
@@ -331,10 +327,7 @@ const StyledLoginButton = styled(Button)`
align-items : center !important;
border-radius: 3px !important;
align-self : 50% !important;
- :hover {
- background-color: ${props => props.contrast === "" ? "#00acc1 !important" : "rgba(255,255,0,0.24) !important"};
- }
- `
+`
const RememberRecover = styled.div`
@@ -342,7 +335,7 @@ const RememberRecover = styled.div`
justify-content : space-between;
font-size: 12px;
font-weight : 400;
- `
+`
const StyledLabel = styled.div`
box-sizing : border-box;
@@ -350,21 +343,21 @@ const StyledLabel = styled.div`
vertical-align : middle !important;
color: ${props => props.contrast === "" ? "#666" : "yellow"};
text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- `
+`
const UserForgotTheirPasswordSpan = styled.span`
- margin-top : 1em;
- font-size : 12px;
- font-weight : 400;
- text-align : right;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- `
+ margin-top : 1em;
+ font-size : 12px;
+ font-weight : 400;
+ text-align : right;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+`
const StyledSpan = styled.span`
- font-size : 12px;
- font-weight : 400;
- padding-top : 2px;
- `
+ font-size : 12px;
+ font-weight : 400;
+ padding-top : 2px;
+`
export const GoogleLoginButton = styled(Button)`
background-color: ${props => props.contrast === "" ? "#fff !important" : "black !important"};
box-shadow: ${props => props.contrast === "" ? "0 0 0 1px #4285f4 !important" : "0 0 0 1px white !important"};
diff --git a/src/Components/MaterialCard.js b/src/Components/MaterialCard.js
index 790a5de654131eadf352d4cfd36999292dc11585..9806251bce3413175439482978c53a60b85ffc9f 100644
--- a/src/Components/MaterialCard.js
+++ b/src/Components/MaterialCard.js
@@ -76,21 +76,19 @@ export default function MaterialCard(props) {
width <= 767 ?
<Link className={`${props.contrast}LinkColor`} to={`/colecao?colecao=${props.id}`}>
<Button
- style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }}
+ style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "yellow" }}
endIcon={<ExpandMoreRoundedIcon />}
>
-
Ver módulos
</Button>
</Link>
:
<Button
className={`${props.contrast}LinkColor`}
- style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "white" }}
+ style={ props.contrast === "" ? { color: "#e81f4f" } : { color: "yellow" }}
endIcon={<ExpandMoreRoundedIcon />}
onClick={HandleButtonPressed}
>
-
Ver módulos
</Button>
}
diff --git a/src/Components/MenuBar.js b/src/Components/MenuBar.js
index 7cb8c6d998af016f49feed4db55e13fafc9a253b..3cf316ad6907f1e1d972702da96c7fbd1ece5dfd 100644
--- a/src/Components/MenuBar.js
+++ b/src/Components/MenuBar.js
@@ -60,7 +60,7 @@ const ButtonPublicarRecurso = styled(Button)`
font-stretch : expanded;
max-width: 200 !important;
:hover {
- background-color: ${(props) => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ background-color: ${(props) => props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
}
.MuiSvgIcon-root {
vertical-align : middle !important;
@@ -69,7 +69,7 @@ const ButtonPublicarRecurso = styled(Button)`
`
const IconSearchStyled = styled(IconSearch)`
- color: ${props => props.contrast === "" ? "#16b8dd !important" : "white !important"};
+ color: ${props => props.contrast === "" ? "#16b8dd !important" : "white !important"};
`
const ImageStyled = styled.img`
height: 50px;
@@ -98,122 +98,118 @@ export const ButtonPubRecursoStyled = styled(Button)`
margin : 0 8px !important;
font-weight : normal !important;
:hover {
- background-color: ${(props) =>
- props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
+ background-color: ${(props) =>
+ props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
`
export default function MenuBar(props) {
- const { state } = useContext(Store)
-
- const buildMyAreaTabs = () => {
- const minhaArea = [
- { name: "Perfil e Atividades", href: "/perfil", value: '0' },
- { name: "Recursos Publicados", href: "/perfil", value: '1' },
- { name: "Favoritos", href: "/perfil", value: '2' },
- { name: "Coleções", href: "/perfil", value: '3' },
- { name: "Rede", href: "/perfil", value: '4' },
- { name: "Configurações", href: "/editarperfil", value: '5' },
- ]
+ const { state } = useContext(Store)
+
+ const buildMyAreaTabs = () => {
+ const minhaArea = [
+ { name: "Perfil e Atividades", href: "/perfil", value: '0' },
+ { name: "Recursos Publicados", href: "/perfil", value: '1' },
+ { name: "Favoritos", href: "/perfil", value: '2' },
+ { name: "Coleções", href: "/perfil", value: '3' },
+ { name: "Rede", href: "/perfil", value: '4' },
+ { name: "Configurações", href: "/editarperfil", value: '5' },
+ ]
+
+ if (state.currentUser.roles) {
+ let canUserAdmin = false;
+ let index = 0;
+ const userRoles = [...state.currentUser.roles]
+
+ while (!canUserAdmin && index < userRoles.length) {
+ if (userRoles[index].id === 3 || userRoles[index].id === 7)
+ canUserAdmin = true
+ index++
+ }
+
+ if (canUserAdmin)
+ minhaArea.push({
+ name: "Administrador",
+ href: "/admin/home",
+ value: '6',
+ })
+
+ const canUserCurator = (elem) => elem.id === 4
+ if (userRoles.some(canUserCurator))
+ minhaArea.push({
+ name: "Curadoria",
+ href: "/perfil",
+ value: '5',
+ })
+ }
- if (state.currentUser.roles) {
- let canUserAdmin = false;
- let index = 0;
- const userRoles = [...state.currentUser.roles]
-
- while (!canUserAdmin && index < userRoles.length) {
- if (userRoles[index].id === 3 || userRoles[index].id === 7)
- canUserAdmin = true
- index++
- }
-
- if (canUserAdmin)
- minhaArea.push({
- name: "Administrador",
- href: "/admin/home",
- value: '6',
- })
-
- const canUserCurator = (elem) => elem.id === 4
- if (userRoles.some(canUserCurator))
- minhaArea.push({
- name: "Curadoria",
- href: "/perfil",
- value: '5',
- })
+ return minhaArea;
}
- return minhaArea;
- }
-
- const menuSobre = [
- { name: "Sobre a Plataforma", href: "/sobre" },
- { name: "Portais Parceiros", href: "/sobre#portaisparceiros" },
- { name: "Termos de Uso", href: "/termos" },
- { name: "Contato", href: "/contato" }
- ]
-
- const menuAjuda = [
- { name: "Central de Ajuda", href: "/ajuda" },
- { name: "Publicando Recursos", href: "/publicando-recurso" },
- { name: "Encontrando Recursos", href: "/encontrando-recurso" },
- { name: "Participando da Rede", href: "/participando-da-rede" },
- { name: "Gerenciando a Conta", href: "/gerenciando-conta" }
- ]
-
- const minhaArea = buildMyAreaTabs()
-
- return (
- <ContainerStyled fluid={true} className={`${state.contrast}BackColor`}>
- <Left>
- <Link to="/"> <ImageStyled src={logo} alt="Plataforma Integrada" /> </Link>
- <Dropdown name="Sobre" items={menuSobre} />
- <Dropdown name="Ajuda" items={menuAjuda} />
- <a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" >
- <ButtonStyled contrast={state.contrast} >Educação Conectada</ButtonStyled>
- </a>
- {/*<Link to="/loja">
- <ButtonStyled>Lojinha</ButtonStyled>
- </Link>*/}
- <ButtonStyled contrast={state.contrast} onClick={props.openSearchBar} ><IconSearchStyled contrast={state.contrast}/>Buscar</ButtonStyled>
-
- </Left>
- <Right>
- {
- state.userIsLoggedIn
- ? (
- <>
- <div style={{ boxSizing: "border-box" }}>
- <Link to="/termos-publicar-recurso">
- <ButtonPublicarRecurso contrast={state.contrast} className={`${state.contrast}LinkColor`}>
- <CloudUploadIcon className={`${state.contrast}IconColor`} style={{ marginLeft: "0" }} />
- <span style={{textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
- PUBLICAR RECURSO
- </span>
- </ButtonPublicarRecurso>
- </Link>
- </div>
-
- <div>
- <Notifications />
- </div>
-
- <MenuList items={minhaArea} />
-
- </>
- )
- : (
- <React.Fragment>
- <ButtonPubRecursoStyled contrast={state.contrast} className={`${state.contrast}LinkColor ${state.contrast}Border`} onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
- <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openLogin}><ExitToAppIcon className={`${state.contrast}IconColor`} style={{ color: "#00bcd4" }} />Entrar</ButtonStyled>
- <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openSignUp}>Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span></ButtonStyled>
- </React.Fragment>
- )
- }
+ const menuSobre = [
+ { name: "Sobre a Plataforma", href: "/sobre" },
+ { name: "Portais Parceiros", href: "/sobre#portaisparceiros" },
+ { name: "Termos de Uso", href: "/termos" },
+ { name: "Contato", href: "/contato" }
+ ]
+
+ const menuAjuda = [
+ { name: "Central de Ajuda", href: "/ajuda" },
+ { name: "Publicando Recursos", href: "/publicando-recurso" },
+ { name: "Encontrando Recursos", href: "/encontrando-recurso" },
+ { name: "Participando da Rede", href: "/participando-da-rede" },
+ { name: "Gerenciando a Conta", href: "/gerenciando-conta" }
+ ]
- </Right>
- </ContainerStyled>
- );
+ const minhaArea = buildMyAreaTabs()
+
+ return (
+ <ContainerStyled fluid={true} className={`${state.contrast}BackColor`}>
+ <Left>
+ <Link to="/"> <ImageStyled src={logo} alt="Plataforma Integrada" /> </Link>
+ <Dropdown name="Sobre" items={menuSobre} />
+ <Dropdown name="Ajuda" items={menuAjuda} />
+ <a href="http://educacaoconectada.mec.gov.br/" rel="noopener noreferrer" target="_blank" >
+ <ButtonStyled contrast={state.contrast} >Educação Conectada</ButtonStyled>
+ </a>
+ {/*<Link to="/loja">
+ <ButtonStyled>Lojinha</ButtonStyled>
+ </Link>*/}
+ <ButtonStyled contrast={state.contrast} onClick={props.openSearchBar} ><IconSearchStyled contrast={state.contrast}/>Buscar</ButtonStyled>
+
+ </Left>
+ <Right>
+ {
+ state.userIsLoggedIn
+ ? (
+ <>
+ <div style={{ boxSizing: "border-box" }}>
+ <Link to="/termos-publicar-recurso">
+ <ButtonPublicarRecurso contrast={state.contrast} className={`${state.contrast}LinkColor`}>
+ <CloudUploadIcon className={`${state.contrast}IconColor`} style={{ marginLeft: "0" }} />
+ <span className={`${state.contrast}LinkColor`} style={{textAlign: "center", alignSelf: "center", fontWeight: "500" }} >
+ PUBLICAR RECURSO
+ </span>
+ </ButtonPublicarRecurso>
+ </Link>
+ </div>
+ <div>
+ <Notifications />
+ </div>
+ <MenuList items={minhaArea} />
+ </>
+ )
+ : (
+ <React.Fragment>
+ <ButtonPubRecursoStyled contrast={state.contrast} className={`${state.contrast}LinkColor ${state.contrast}Border`} onClick={props.openLogin}>PUBLICAR RECURSO?</ButtonPubRecursoStyled>
+ <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openLogin}><ExitToAppIcon className={`${state.contrast}IconColor`} style={{ color: "#00bcd4" }} />Entrar</ButtonStyled>
+ <ButtonStyled contrast={state.contrast} className={`${state.contrast}LinkColor`} onClick={props.openSignUp}>Cadastre-<span style={{ textTransform: 'lowercase' }}>se</span></ButtonStyled>
+ </React.Fragment>
+ )
+ }
+ </Right>
+ </ContainerStyled>
+ );
}
diff --git a/src/Components/ReportButton.js b/src/Components/ReportButton.js
index 4d1bedaf1c80aa2d6822d5e6b4892ec8f6b1c63b..f7798433b337f0b4218ad1f1861b89dc1ec71f6e 100644
--- a/src/Components/ReportButton.js
+++ b/src/Components/ReportButton.js
@@ -69,7 +69,7 @@ export default function ReportButton(props) {
<LoginModal open={loginModal} handleClose={() => {toggleLoginModal(false)}}/>
*/}
<Button onClick={handleClick}>
- <MoreVertIcon style={state.contrast === "" ? { color: "#666" } : { color: "white" }} />
+ <MoreVertIcon style={state.contrast === "" ? { color: "#666" } : { color: "yellow" }} />
</Button>
<StyledMenu
id="simple-menu"
@@ -79,7 +79,7 @@ export default function ReportButton(props) {
onClose={handleClose}
style={{ borderRadius: "0" }}
>
- <MenuItem onClick={() => { handleModal() }} style={state.contrast === "" ? { color: "#666", backgroundColor: "black" } : { color: "white", backgroundColor: "black" }}>
+ <MenuItem onClick={() => { handleModal() }} style={state.contrast === "" ? { color: "#666", backgroundColor: "white" } : { color: "white", backgroundColor: "black" }}>
<ReportIcon />
<span style={state.contrast === "" ? { paddingLeft: "3px" } : { paddingLeft: "3px", color: "yellow", textDecoration: "underline" }}>Reportar</span>
</MenuItem>
diff --git a/src/Components/ResourcePageComponents/CommentForm.js b/src/Components/ResourcePageComponents/CommentForm.js
index d25d8d080113f93b188b9a63f24090aa9d0eb44d..7fe1093b5e82891a83c8f895011d6e2b992b2147 100644
--- a/src/Components/ResourcePageComponents/CommentForm.js
+++ b/src/Components/ResourcePageComponents/CommentForm.js
@@ -179,94 +179,94 @@ export default function CommentForm(props) {
}
const PurpleButton = styled(Button)`
- color: ${(props) =>
+ color: ${(props) =>
props.contrast === ""
? "rgba(255,255,255,0.87) !important"
: "yellow !important"};
- text-decoration: ${(props) =>
+ text-decoration: ${(props) =>
props.contrast === "" ? "none !important" : "underline !important"};
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
- font-weight: 600 !important;
- background-color: ${(props) =>
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
+ font-weight: 600 !important;
+ background-color: ${(props) =>
props.contrast === "" ? "#673ab7 !important" : "black !important"};
- border: ${(props) =>
+ border: ${(props) =>
props.contrast === "" ? "0 !important" : "1px solid white !important"};
- :hover {
- background-color: ${(props) =>
- props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
- .icon {
- vertical-align: middle !important;
- font-weight: normal !important;
- font-style: normal !important;
- font-size: 24px !important;
- line-height: 1 !important;
- letter-spacing: normal !important;
- text-transform: none !important;
- display: inline-block !important;
- white-space: nowrap !important;
- word-wrap: normal !important;
- direction: ltr !important;
- padding-right: 2px;
- }
+ :hover {
+ background-color: ${(props) =>
+ props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
+ .icon {
+ vertical-align: middle !important;
+ font-weight: normal !important;
+ font-style: normal !important;
+ font-size: 24px !important;
+ line-height: 1 !important;
+ letter-spacing: normal !important;
+ text-transform: none !important;
+ display: inline-block !important;
+ white-space: nowrap !important;
+ word-wrap: normal !important;
+ direction: ltr !important;
+ padding-right: 2px;
+ }
`;
const OrangeButton = styled(Button)`
- color: ${(props) =>
+ color: ${(props) =>
props.contrast === ""
? "rgba(255,255,255,0.87) !important"
: "yellow !important"};
- text-decoration: ${(props) =>
+ text-decoration: ${(props) =>
props.contrast === "" ? "none !important" : "underline !important"};
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
- font-weight: 600 !important;
- background-color: ${(props) =>
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26) !important;
+ font-weight: 600 !important;
+ background-color: ${(props) =>
props.contrast === "" ? "#ff7f00 !important" : "black !important"};
- border: ${(props) =>
+ border: ${(props) =>
props.contrast === "" ? "0 !important" : "1px solid white !important"};
- :hover {
- background-color: ${(props) =>
- props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
- }
+ :hover {
+ background-color: ${(props) =>
+ props.contrast === "" ? "" : "rgba(255,255,0,0.24) !important"};
+ }
`;
const StyledTextField = styled(TextField)`
- .MuiInputBase-root {
- margin-bottom: 5px;
- }
-
- .MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${(props) =>
- props.contrast === ""
- ? props.colecao
- ? "#673ab7"
- : "rgb(255,127,0)"
- : "yellow"};
+ .MuiInputBase-root {
+ margin-bottom: 5px;
}
- fieldset {
- border-color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+
+ .MuiOutlinedInput-root {
+ &.Mui-focused fieldset {
+ border-color: ${(props) =>
+ props.contrast === ""
+ ? props.colecao
+ ? "#673ab7"
+ : "rgb(255,127,0)"
+ : "yellow"};
+ }
+ fieldset {
+ border-color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+ }
}
- }
- label {
- color: ${(props) => (props.contrast === "" ? "#666" : "white")};
- }
+ label {
+ color: ${(props) => (props.contrast === "" ? "#666" : "white")};
+ }
- label.Mui-focused {
- color: ${(props) =>
- props.contrast === ""
- ? props.colecao
- ? "#673ab7"
- : "rgb(255,127,0)"
- : "yellow"};
- }
+ label.Mui-focused {
+ color: ${(props) =>
+ props.contrast === ""
+ ? props.colecao
+ ? "#673ab7"
+ : "rgb(255,127,0)"
+ : "yellow"};
+ }
- label.Mui-focused.Mui-error {
- color: red;
- }
+ label.Mui-focused.Mui-error {
+ color: red;
+ }
- width: 95%;
+ width: 95%;
`;
const StyledForm = styled.form`
diff --git a/src/Components/ResourcePageComponents/CommentsArea.js b/src/Components/ResourcePageComponents/CommentsArea.js
index 043e3ad0886aa8c402ba049cc07343c36e221513..990e60982fc38606d8a4461a773154a0b30749ce 100644
--- a/src/Components/ResourcePageComponents/CommentsArea.js
+++ b/src/Components/ResourcePageComponents/CommentsArea.js
@@ -96,6 +96,71 @@ export default function CommentsArea(props) {
handleSuccessfulLogin(false);
}
+ const NoCommentsMessage = (contrast) => {
+ const NoCommentsContainer = styled.div`
+ text-align: center;
+ margin-left: 9vw;
+ margin-right: 9vw;
+ `
+ const BlueTitle = styled.h2`
+ color: ${props => props.contrast === "" ? "#F07E05" : "white"};
+ `
+ const Secondary = styled.h3`
+ font-weight: 100;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ `
+ const Image = styled.img`
+ margin: auto;
+ object-fit : contain !important;
+ background-color : transparent !important;
+ `
+ return (
+ <>
+ <Image src={Comentarios} style={{ width: "100%", height: "45%", maxWidth: 234 }} />
+ <NoCommentsContainer>
+ <BlueTitle contrast={contrast}>Compartilhe sua opinião com a rede!</BlueTitle>
+ <Secondary contrast={contrast}>Gostou deste recurso? Comente e compartilhe com a rede sua opinião. Interagindo com a rede, você contribui para que mais recursos como este sejam criados.</Secondary>
+ </NoCommentsContainer>
+ </>
+ );
+ }
+
+ const ResourceComments = (contrast) => {
+ return (
+ <ComentariosBox contrast={contrast}>
+ {
+ comentarios.map(comentario =>
+ <div className="comentario-template" key={comentario.id}>
+ <Comment
+ contrast={contrast}
+ isCollection={false}
+ authorID={comentario.user ? comentario.user.id : null}
+ authorAvatar={comentario.user ? comentario.user.avatar : null}
+ authorName={comentario.user ? comentario.user.name : null}
+ name={comentario.name}
+ rating={comentario.rating_average}
+ reviewRatings={comentario.review_ratings}
+ description={comentario.description}
+ createdAt={comentario.created_at}
+ recurso={true}
+ reviewID={comentario.id}
+ objectID={props.recursoId}
+ handlePost={handlePost}
+ rerenderCallback={forceUpdate}
+ handleSnackbar={props.handleSnackbar}
+ />
+ </div>
+ )
+ }
+ <div className="load-more">
+ <IconButton className="button" onClick={handleLoadMoreReviews}>
+ <KeyboardArrowDownIcon className="icon" />
+ </IconButton>
+ </div>
+ </ComentariosBox>
+ );
+ }
+
function handleLoadMoreReviews() {
if (comentarios.length !== parseInt(totalReviews))
setCurrPageReviews((previous) => previous + 1)
@@ -190,53 +255,7 @@ export default function CommentsArea(props) {
<CircularProgress className="loading" />
</LoadingDiv>
:
- totalReviews !== 0 ?
- (
- <ComentariosBox contrast={state.contrast}>
- <h3>{totalReviews} {totalReviews !== 1 ? 'Relatos' : 'Relato'} sobre o uso do Recurso</h3>
- {
- comentarios.map(comentario =>
- <div className="comentario-template" key={comentario.id}>
- <Comment
- contrast={state.contrast}
- isCollection={false}
- authorID={comentario.user ? comentario.user.id : null}
- authorAvatar={comentario.user ? comentario.user.avatar : null}
- authorName={comentario.user ? comentario.user.name : null}
- name={comentario.name}
- rating={comentario.rating_average}
- reviewRatings={comentario.review_ratings}
- description={comentario.description}
- createdAt={comentario.created_at}
- recurso={true}
- reviewID={comentario.id}
- objectID={props.recursoId}
- handlePost={handlePost}
- rerenderCallback={forceUpdate}
- handleSnackbar={props.handleSnackbar}
- />
- </div>
- )
- }
- <div className="load-more">
- <IconButton className="button" onClick={handleLoadMoreReviews}>
- <KeyboardArrowDownIcon className="icon" />
- </IconButton>
- </div>
- </ComentariosBox>
- )
- :
- (
- <Grid item xs={12}>
- <LogInToComment contrast={state.contrast}>
- <img alt="" src={Comentarios} />
- <span className="span-laranja">Compartilhe sua experiência com a Rede!</span>
- <AoRelatar contrast={state.contrast}>
- Ao relatar sua experiência de uso do Recurso você estará auxiliando professores de todo paÃs.
- </AoRelatar>
- </LogInToComment>
- </Grid>
- )
+ totalReviews !== "0" ? ResourceComments(state.contrast) : NoCommentsMessage(state.contrast)
}
</Grid>
</React.Fragment>
@@ -299,14 +318,6 @@ const ComentariosBox = styled.div`
color: ${props => props.contrast === "" ? "#666" : "yellow"};
}
`
-const AoRelatar = styled.div`
- width : 70%;
- font-size : 20px;
- font-weight : 300;
- text-align : center;
- padding-bottom : 20px;
- color: ${props => props.contrast === "" ? "#666" : "white"};
-`
const LogInToComment = styled.div`
display : flex;
diff --git a/src/Components/ResourcePageComponents/Footer.js b/src/Components/ResourcePageComponents/Footer.js
index e47e07247b203858a62019fd0b3bd07d6a2b07a1..32b73303335a817ea711acbf53565dd74e87bdcf 100644
--- a/src/Components/ResourcePageComponents/Footer.js
+++ b/src/Components/ResourcePageComponents/Footer.js
@@ -69,23 +69,27 @@ function DownloadButton(props) {
props.downloadableLink ?
(
<ButtonOrange contrast={props.contrast} onClick={props.enableDownload}>
- <span className="text">
+ <span>
<GetAppIcon className="icon" />Baixar Recurso
- </span>
+ </span>
</ButtonOrange>
)
:
props.link ?
(
<ButtonOrange contrast={props.contrast} onClick={props.toggleRedirect}>
- <span className="text">
+ <span >
<CallMadeIcon className="icon" />Abrir Recurso
- </span>
+ </span>
</ButtonOrange>
)
:
(
- <React.Fragment />
+ <ButtonOrange contrast={props.contrast}>
+ <span>
+ Erro
+ </span>
+ </ButtonOrange>
)
)
}
@@ -358,7 +362,7 @@ const ButtonOrange = styled(Button)`
}
box-shadow : 0 2px 5px 0 rgba(0,0,0,.26) !important;
background-color: ${props => props.contrast === "" ? "#ff7f00" : "black"} !important;
- color: ${props => props.contrast === "" ? "#666" : "yellow"} !important;
+ color: ${props => props.contrast === "" ? "white" : "yellow"} !important;
text-decoration: ${props => props.contrast === "" ? "none" : "underline"} !important;
border: ${props => props.contrast === "" ? "0" : "1px solid white"} !important;
text-transform : uppercase !important;
diff --git a/src/Components/SearchBar.js b/src/Components/SearchBar.js
index be81cfa490acb38f26f6783ef394c0caad6b31c1..520babae961079f2d8c1c1e96555e53cf2648489 100644
--- a/src/Components/SearchBar.js
+++ b/src/Components/SearchBar.js
@@ -46,7 +46,7 @@ const ButtonStyled = styled(Button)`
text-transform: capitalize !important;
`
const IconSearchStyled = styled(IconSearch)`
- color: ${props => props.contrast === "" ? "#16b8dd" : "white"};
+ color: ${props => props.contrast === "" ? "#16b8dd" : "yellow"};
`
const TextFieldStyled = styled(TextField)`
diff --git a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
index e0d88b80d4ff247d1f3f16ec7b2ab26ddff64184..e36e564bd43489d2c1335edd315ba53b068b1b73 100644
--- a/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
+++ b/src/Components/SearchExpansionPanel/SearchExpansionPanel.js
@@ -9,246 +9,223 @@ import SearchEPCompCurriculum from "./SearchEPCompCurriculum";
import SearchEPTiposRec from "./SearchEPTiposRec";
import SearchEPEtapasEns from "./SesrchEPEtapasEns";
import SearchEPIdiomas from "./SearchEPIdiomas";
-import { TextField } from "@material-ui/core";
import Paper from '@material-ui/core/Paper';
import styled from 'styled-components';
import './ExpansionPanel.css'
+import FormInput from "../FormInput";
const ExpansionPanel = withStyles({
- root: {
- border: "1px solid rgba(0, 0, 0, .125)",
- boxShadow: "none",
- '.MuiButtonBase-root': {
- paddingInline: "0 !important"
+ root: {
+ border: "1px solid rgba(0, 0, 0, .125)",
+ boxShadow: "none",
+ '.MuiButtonBase-root': {
+ paddingInline: "0 !important"
+ },
+ "&:not(:last-child)": {
+ borderBottom: 0
+ },
+ "&:before": {
+ display: "none"
+ },
+ "&$expanded": {
+ margin: "auto"
+ }
},
- "&:not(:last-child)": {
- borderBottom: 0
- },
- "&:before": {
- display: "none"
- },
- "&$expanded": {
- margin: "auto"
- }
- },
- expanded: {}
+ expanded: {}
})(MuiExpansionPanel);
const ExpansionPanelSummary = withStyles({
- root: {
- color: "#666",
- marginBottom: -1,
- minHeight: 56,
- backgroundColor: "#fff",
+ root: {
+ color: "#666",
+ marginBottom: -1,
+ minHeight: 56,
+ backgroundColor: "#fff",
- "&$expanded": {
- minHeight: 56,
- backgroundColor: "#fff"
- }
- },
- content: {
- "&$expanded": {
- margin: "12px 0"
- }
- },
- expanded: {}
+ "&$expanded": {
+ minHeight: 56,
+ backgroundColor: "#fff"
+ }
+ },
+ content: {
+ "&$expanded": {
+ margin: "12px 0"
+ }
+ },
+ expanded: {}
})(MuiExpansionPanelSummary);
const ExpansionPanelDetails = withStyles(theme => ({
- root: {
- // padding: theme.spacing(2)
- }
+ root: {
+ // padding: theme.spacing(2)
+ }
}))(MuiExpansionPanelDetails);
export default function SearchExpansionPanel(props) {
- const [keyWords, setKeyWords] = useState("");
- const [errorInKeyWord, setErrorInKeyWord] = useState({
- message: "",
- state: false
- })
-
- const onKeyPressed = (e) => {
- if (e.key === "Enter") {
- if (keyWords.length === 0) {
- setErrorInKeyWord({
- state: true,
- message: "Preencha o campo"
- })
- }
- else
- props.setTag(keyWords)
+ const [keyWords, setKeyWords] = useState("");
+ const [errorInKeyWord, setErrorInKeyWord] = useState({
+ message: "",
+ state: false
+ })
+
+ const onKeyPressed = (e) => {
+ if (e.key === "Enter") {
+ if (keyWords.length === 0) {
+ setErrorInKeyWord({
+ state: true,
+ message: "Preencha o campo"
+ })
+ }
+ else
+ props.setTag(keyWords)
+ }
}
- }
-
- const HandleChangeText = (e) => {
- if (errorInKeyWord.state)
- setErrorInKeyWord({
- state: false,
- message: ""
- })
- setKeyWords(e.target.value);
- }
-
- return (
- <MainPaper square elevation={4} contrast={props.contrast}>
- <link
- href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"
- rel="stylesheet"
- />
- <ExpansionPanel square>
- <ExpansionPanelSummary
- aria-controls="panel1d-content"
- id="panel1d-header"
- style={props.contrast === "" ? {} : { backgroundColor: "black" }}
- >
- <Typography
- style={props.contrast === "" ? {
- fontSize: "18px",
- textTransform: "uppercase",
- fontWeight: "500",
- } : {
- fontSize: "18px",
- textTransform: "uppercase",
- fontWeight: "500",
- color: "white"
- }}
- >
- Filtros
- </Typography>
- </ExpansionPanelSummary>
- </ExpansionPanel>
-
- <ExpansionPanel square>
- <ExpansionPanelSummary
- expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
- style={props.contrast === "" ? {} : { backgroundColor: "black" }}
- aria-controls="panel2d-content"
- id="panel2d-header"
- >
- <Typography style={props.contrast === "" ? {} : { color: "white" }}>Componentes Curriculares</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
- <SearchEPCompCurriculum
- contrast={props.contrast}
- curriculumComponents={props.curriculumComponents}
- setCurriculum={props.setCurriculum}
- />
- </ExpansionPanelDetails>
- </ExpansionPanel>
-
- <ExpansionPanel square>
- <ExpansionPanelSummary
- style={props.contrast === "" ? {} : { backgroundColor: "black" }}
- expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
- aria-controls="panel3d-content"
- id="panel3d-header"
- >
- <Typography style={props.contrast === "" ? {} : { color: "white" }}>Tipos de Recurso</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
- <SearchEPTiposRec
- contrast={props.contrast}
- typeOfResources={props.typeOfResources}
- setTypeRes={props.setTypeRes}
- />
- </ExpansionPanelDetails>
- </ExpansionPanel>
-
- <ExpansionPanel square>
- <ExpansionPanelSummary
- style={props.contrast === "" ? {} : { backgroundColor: "black" }}
- aria-controls="panel4d-content"
- expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
- id="panel4d-header"
- >
- <Typography style={props.contrast === "" ? {} : { color: "white" }}>Etapas de Ensino</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
- <SearchEPEtapasEns
- contrast={props.contrast}
- teachingStage={props.teachingStage}
- setTeachingStage={props.setTeachingStage}
- />
- </ExpansionPanelDetails>
- </ExpansionPanel>
-
- <ExpansionPanel square>
- <ExpansionPanelSummary
- style={props.contrast === "" ? {} : { backgroundColor: "black" }}
- aria-controls="panel5d-content"
- expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
- id="panel5d-header"
- >
- <Typography style={props.contrast === "" ? {} : { color: "white" }}>Idiomas</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
- <SearchEPIdiomas
- contrast={props.contrast}
- languages={props.languages}
- setLanguages={props.setLanguages}
- />
- </ExpansionPanelDetails>
- </ExpansionPanel>
-
- <ExpansionPanel square>
- <ExpansionPanelSummary
- style={props.contrast === "" ? {} : { backgroundColor: "black", borderBottom: "1px solid white" }}
- aria-controls="panel6d-content"
- expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
- id="panel6d-header"
- >
- <Typography style={props.contrast === "" ? {} : { color: "white" }}>Palavra-Chave</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
- <StyledTextField
- contrast={props.contrast}
- label="Palavra chave + enter "
- id="outlined-margin-dense"
- variant="outlined"
- onChange={e => HandleChangeText(e)}
- onKeyDown={e => onKeyPressed(e)}
- error={errorInKeyWord.state}
- helperText={errorInKeyWord.state ? errorInKeyWord.message : ""}
- />
- </ExpansionPanelDetails>
- </ExpansionPanel>
- </MainPaper>
- );
-}
-const StyledTextField = styled(TextField)`
- .MuiOutlinedInput-root {
- &.Mui-focused fieldset {
- border-color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
- fieldset {
- border-color: ${props => props.contrast === "" ? "#666" : "white"};
- }
+ const HandleChangeText = (e) => {
+ if (errorInKeyWord.state)
+ setErrorInKeyWord({
+ state: false,
+ message: ""
+ })
+ setKeyWords(e.target.value);
}
- label{
- color: ${props => props.contrast === "" ? "#666" : "white"};
- }
+ return (
+ <MainPaper square elevation={4} contrast={props.contrast}>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"
+ rel="stylesheet"
+ />
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ aria-controls="panel1d-content"
+ id="panel1d-header"
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
+ >
+ <Typography
+ style={props.contrast === "" ? {
+ fontSize: "18px",
+ textTransform: "uppercase",
+ fontWeight: "500",
+ } : {
+ fontSize: "18px",
+ textTransform: "uppercase",
+ fontWeight: "500",
+ color: "white"
+ }}
+ >
+ Filtros
+ </Typography>
+ </ExpansionPanelSummary>
+ </ExpansionPanel>
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
+ aria-controls="panel2d-content"
+ id="panel2d-header"
+ >
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Componentes Curriculares</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <SearchEPCompCurriculum
+ contrast={props.contrast}
+ curriculumComponents={props.curriculumComponents}
+ setCurriculum={props.setCurriculum}
+ />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
+ aria-controls="panel3d-content"
+ id="panel3d-header"
+ >
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Tipos de Recurso</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <SearchEPTiposRec
+ contrast={props.contrast}
+ typeOfResources={props.typeOfResources}
+ setTypeRes={props.setTypeRes}
+ />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
+ aria-controls="panel4d-content"
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
+ id="panel4d-header"
+ >
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Etapas de Ensino</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <SearchEPEtapasEns
+ contrast={props.contrast}
+ teachingStage={props.teachingStage}
+ setTeachingStage={props.setTeachingStage}
+ />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ style={props.contrast === "" ? {} : { backgroundColor: "black" }}
+ aria-controls="panel5d-content"
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
+ id="panel5d-header"
+ >
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Idiomas</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <SearchEPIdiomas
+ contrast={props.contrast}
+ languages={props.languages}
+ setLanguages={props.setLanguages}
+ />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+
+ <ExpansionPanel square>
+ <ExpansionPanelSummary
+ style={props.contrast === "" ? {} : { backgroundColor: "black", borderBottom: "1px solid white" }}
+ aria-controls="panel6d-content"
+ expandIcon={<ExpandMoreIcon style={props.contrast === "" ? {} : { color: "white" }} />}
+ id="panel6d-header"
+ >
+ <Typography style={props.contrast === "" ? {} : { color: "white" }}>Palavra-Chave</Typography>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails style={props.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <FormInput
+ contrast={props.contrast}
+ placeholder="Palavra chave + enter "
+ id="outlined-margin-dense"
+ variant="outlined"
+ handleChange={e => HandleChangeText(e)}
+ onKeyDown={e => onKeyPressed(e)}
+ error={errorInKeyWord.state}
+ helperText={errorInKeyWord.state ? errorInKeyWord.message : ""}
+ />
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
+ </MainPaper>
+ );
+}
- label.Mui-focused {
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
- }
+const MainPaper = styled(Paper)`
+ text-align: center;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ color: #666;
- label.Mui-focused.Mui-error {
- color : red;
+ .textInfo{
+ text-align: start;
}
-`
-
-const MainPaper = styled(Paper)`
- text-align: center;
- margin-top: 5px;
- margin-bottom: 30px;
- color: #666;
-
- .textInfo{
- text-align: start;
- }
`;
diff --git a/src/Components/SearchPageComponents/CollectionTemplate.js b/src/Components/SearchPageComponents/CollectionTemplate.js
index f8bdf209e47b1faa9a6c64c661d4fe9fcdfc0da1..df3e526f1a127f4309dade2ab52b5df2bda59bdd 100644
--- a/src/Components/SearchPageComponents/CollectionTemplate.js
+++ b/src/Components/SearchPageComponents/CollectionTemplate.js
@@ -12,128 +12,131 @@ import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import { ColecaoVazia } from "ImportImages.js";
export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage, contrast }) {
- const topRef = React.useRef();
- const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
+ const topRef = React.useRef();
+ const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
- useEffect(() => {
- topRef.current.scrollIntoView()
- }, [isLoading])
+ useEffect(() => {
+ topRef.current.scrollIntoView()
+ }, [isLoading])
- return (
- <ResourcePaper elevation={4} square contrast={contrast}>
- <div ref={topRef} />
- <div className="main">
- <Title contrast={contrast}>
- Coleções encontradas ({totalResources})
- </Title>
- {
- isLoading ?
- <LoadingSpinner contrast={contrast} text='Carregando Coleções...' />
- :
- <Grid container justify='center' alignItems='center' spacing={3}>
- {
- resources.length >= 1 ?
- resources.map((card) => {
- return <Grid item key={new Date().toISOString() + card.id} >
- <CollectionCardFunction
- contrast={contrast}
- name={card.name}
- tags={card.tags}
- rating={card.review_average}
- id={card.id}
- author={card.owner ? card.owner.name : ""}
- description={card.description}
- thumbnails={card.items_thumbnails}
- avatar={card.owner ? card.owner.avatar : ""}
- likeCount={card.likes_count}
- followed={card.followed}
- liked={card.liked}
- collections={card.collection_items}
- authorID={card.owner.id}
- />
+ return (
+ <ResourcePaper elevation={4} square contrast={contrast}>
+ <div ref={topRef} />
+ <div className="main">
+ <Title contrast={contrast}>
+ Coleções encontradas ({totalResources})
+ </Title>
+ {
+ isLoading ?
+ <LoadingSpinner contrast={contrast} text='Carregando Coleções...' />
+ :
+ <Grid container justify='center' alignItems='center' spacing={3}>
+ {
+ resources.length >= 1 ?
+ resources.map((card) => {
+ return (
+ <Grid item key={new Date().toISOString() + card.id} >
+ <CollectionCardFunction
+ contrast={contrast}
+ name={card.name}
+ tags={card.tags}
+ rating={card.review_average}
+ id={card.id}
+ author={card.owner ? card.owner.name : ""}
+ description={card.description}
+ thumbnails={card.items_thumbnails}
+ avatar={card.owner ? card.owner.avatar : ""}
+ likeCount={card.likes_count}
+ followed={card.followed}
+ liked={card.liked}
+ collections={card.collection_items}
+ authorID={card.owner.id}
+ />
+ </Grid>
+ )
+ })
+ :
+ <NoContentDiv contrast={contrast}>
+ <h3>
+ Desculpe, não há dados nessa página.
+ </h3>
+ <img src={ColecaoVazia} alt='No cards' />
+ </NoContentDiv>
+ }
</Grid>
- })
- :
- <NoContentDiv contrast={contrast}>
- <h3>
- Desculpe, não há dados nessa página.
- </h3>
- <img src={ColecaoVazia} alt='No cards' />
- </NoContentDiv>
- }
- </Grid >
- }
- {
- !isLoading &&
- <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
- <Grid item>
- <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === 0}>
- <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
- <ArrowBackIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- <Grid item>
- <ActualPage contrast={contrast}>
- {currPage}
- </ActualPage>
- <TotalPages contrast={contrast}>
- ...{totalPages}
- </TotalPages>
- </Grid>
- <Grid item>
- <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === totalPages}>
- <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
- <ArrowForwardIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- </Grid>
- }
- </div >
- </ResourcePaper >
- )
+ }
+ {
+ !isLoading &&
+ <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === 0}>
+ <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
+ <ArrowBackIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ <Grid item>
+ <ActualPage contrast={contrast}>
+ {currPage + 1}
+ </ActualPage>
+ <TotalPages contrast={contrast}>
+ ...{totalPages + 1}
+ </TotalPages>
+ </Grid>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === totalPages}>
+ <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
+ <ArrowForwardIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ </Grid>
+ }
+ </div >
+ </ResourcePaper >
+ )
};
const Title = styled.h4`
- text-transform: uppercase;
- font-weight: 500;
- text-align: left;
- color: ${props => props.contrast === "" ? "#673ab7" : "white"};
+ text-transform: uppercase;
+ font-weight: 500;
+ text-align: left;
+ color: ${props => props.contrast === "" ? "#673ab7" : "white"};
`
const NoContentDiv = styled.div`
- >h3{
- color: ${props => props.contrast === "" ? "#673ab7" : "white"};
- text-align: center;
- }
+ h3{
+ color: ${props => props.contrast === "" ? "#673ab7" : "white"};
+ text-align: center;
+ }
`
const ActualPage = styled.span`
- color: ${props => props.contrast === "" ? "#673ab7" : "yellow"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const TotalPages = styled.span`
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const StyledIconButton = styled(Paper)`
- border-radius: 50% !important;
- background-color: ${props => props.disabled ? "#666" : props.contrast === "" ? "#673ab7" : "yellow"} !important;
- .icon{
- color: ${props => props.disabled ? "#d4d4d4" : "white"};
- }
+ border-radius: 50% !important;
+ background-color: ${props => props.contrast === "" ? props.disabled ? "#666" : "673ab7" : "black"} !important;
+ .icon{
+ color: ${props => props.contrast === "" ? "white": props.disabled ? "white" : "yellow"} !important;
+ }
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
`
const ResourcePaper = styled(Paper)`
- /* height: 150px; */
- text-align: center;
- margin-top: 5px;
- margin-bottom: 30px;
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ /* height: 150px; */
+ text-align: center;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
- .main{
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- padding: 0.5em 1em;
- }
+ .main{
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ padding: 0.5em 1em;
+ }
- .textInfo{
- text-align: start;
- }
+ .textInfo{
+ text-align: start;
+ }
`;
\ No newline at end of file
diff --git a/src/Components/SearchPageComponents/FilterSummary.js b/src/Components/SearchPageComponents/FilterSummary.js
index 0feec4928f567aebbef2a48437df6ab1543cbe2e..3c0790bf8d80c88c6015eb2b5a8cae6df1d6c54a 100644
--- a/src/Components/SearchPageComponents/FilterSummary.js
+++ b/src/Components/SearchPageComponents/FilterSummary.js
@@ -4,163 +4,159 @@ import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Chip from '@material-ui/core/Chip';
-export default function FilterSummary
- ({ curriculumComponents, typeOfResources, languages, teachingStage, tag, onButtonClicked, contrast }) {
- return (
- <FilterSummaryPaper square elevation={4} contrast={contrast}>
- <div className="main">
- <h3 className="title">
- Resumo dos filtros selecionados
- </h3>
- <Grid container direction='column' spacing={2}>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item className="subtitle">
- Componentes curriculares:
- </Grid>
- <Grid item>
- {
- curriculumComponents.map((item) => {
- return (
- item.isChecked &&
- <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
+export default function FilterSummary({ curriculumComponents, typeOfResources, languages, teachingStage, tag, onButtonClicked, contrast }) {
+ return (
+ <FilterSummaryPaper square elevation={4} contrast={contrast}>
+ <div className="main">
+ <h3 className="title">
+ Resumo dos filtros selecionados
+ </h3>
+ <Grid container direction='column' spacing={2}>
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Componentes curriculares:
+ </Grid>
+ <Grid item>
+ {
+ curriculumComponents.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
- })
- }
- </Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item className="subtitle">
- Tipos de recursos:
- </Grid>
- <Grid item>
- {
- typeOfResources.map((item) => {
- return (
- item.isChecked &&
- <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
- })
- }
- </Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item className="subtitle">
- Etapas de ensino:
- </Grid>
- <Grid item>
- {
- teachingStage.map((item) => {
- return (
- item.isChecked &&
- <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
- })
- }
- </Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item className="subtitle">
- Idiomas:
- </Grid>
- <Grid item>
- {
- languages.map((item) => {
- return (
- item.isChecked &&
- <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
- );
- })
- }
- </Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Grid container direction='row' spacing={1} alignItems='center'>
- <Grid item className="subtitle">
- Palavra chave:
- </Grid>
- <Grid item>
- {
- tag &&
- <StyledChip contrast={contrast} size="small" label={tag} />
- }
- </Grid>
- </Grid>
- </Grid>
- <Grid item>
- <Button contrast={contrast} variant="contained" onClick={onButtonClicked}>
- Aplicar filtro
- </Button>
- </Grid>
- </Grid>
- </div>
- </FilterSummaryPaper>
- )
+ })
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Tipos de recursos:
+ </Grid>
+ <Grid item>
+ {
+ typeOfResources.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
+ })
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Etapas de ensino:
+ </Grid>
+ <Grid item>
+ {
+ teachingStage.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
+ })
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Idiomas:
+ </Grid>
+ <Grid item>
+ {
+ languages.map((item) => {
+ return (
+ item.isChecked &&
+ <StyledChip contrast={contrast} key={new Date().toISOString() + item.value} size="small" label={item.exemplo} />
+ );
+ })
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item>
+ <Grid container direction='row' spacing={1} alignItems='center'>
+ <Grid item className="subtitle">
+ Palavra chave:
+ </Grid>
+ <Grid item>
+ {
+ tag &&
+ <StyledChip contrast={contrast} size="small" label={tag} />
+ }
+ </Grid>
+ </Grid>
+ </Grid>
+ <Grid item>
+ <Button contrast={contrast} variant="contained" onClick={onButtonClicked}>
+ Aplicar filtro
+ </Button>
+ </Grid>
+ </Grid>
+ </div>
+ </FilterSummaryPaper>
+ )
}
const FilterSummaryPaper = styled(Paper)`
- margin-top: 5px;
- margin-bottom: 30px;
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
-
- .title{
- text-transform: uppercase;
- color: ${props => props.contrast === "" ? "#666" : "white"};
- font-weight: 500;
- }
+ margin-top: 5px;
+ margin-bottom: 30px;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+
+ .title{
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ font-weight: 500;
+ }
- .main{
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- padding: 0.5em 1em;
- }
+ .main{
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ padding: 0.5em 1em;
+ }
- .subtitle{
- color: ${props => props.contrast === "" ? "#666" : "white"};
- }
+ .subtitle{
+ color: ${props => props.contrast === "" ? "#666" : "white"};
+ }
`
const Button = styled.button`
- background: ${props => props.contrast === "" ? "#ff7f00" : "black"};
- text-transform: uppercase;
- color: ${props => props.contrast === "" ? "white" : "yellow"};
- font-family: Roboto,sans-serif;
- font-size: 14px;
- font-weight: 500;
- height: 36px;
- border-radius: 3px;
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
- box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
- display: inline-block;
- position: relative;
- cursor: pointer;
- min-height: 36px;
- min-width: 88px;
- line-height: 36px;
- vertical-align: middle;
- -webkit-box-align: center;
- outline: none;
- text-align: center;
- padding: 0em 1em;
- white-space: nowrap;
- text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
- :hover {
- background: ${props => props.contrast === "" ? "rgba(255, 127, 0,0.75)" : "rgba(255,255,0,0.24)"};
- }
- :active{
- transform: translateY(2px);
- }
+ background: ${props => props.contrast === "" ? "#ff7f00" : "black"};
+ text-transform: uppercase;
+ color: ${props => props.contrast === "" ? "white" : "yellow"};
+ font-family: Roboto,sans-serif;
+ font-size: 14px;
+ font-weight: 500;
+ height: 36px;
+ border-radius: 3px;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ min-height: 36px;
+ min-width: 88px;
+ line-height: 36px;
+ vertical-align: middle;
+ -webkit-box-align: center;
+ outline: none;
+ text-align: center;
+ padding: 0em 1em;
+ white-space: nowrap;
+ text-decoration: ${props => props.contrast === "" ? "none" : "underline"};
+ :active{
+ transform: translateY(2px);
+ }
`
const StyledChip = styled(Chip)`
- margin: 0.2em;
- background-color: ${props => props.contrast === "" ? 0 : "black !important"};
- border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
- color: ${props => props.contrast === "" ? 0 : "white !important"};
+ margin: 0.2em;
+ background-color: ${props => props.contrast === "" ? 0 : "black !important"};
+ border: ${props => props.contrast === "" ? 0 : "1px solid white !important"};
+ color: ${props => props.contrast === "" ? 0 : "white !important"};
`
diff --git a/src/Components/SearchPageComponents/ResourceTemplate.js b/src/Components/SearchPageComponents/ResourceTemplate.js
index 6c6a5d654ae8704a72e16022a5780661eb46fd75..bb618c29b48038b539d104220485ecc0a716a60b 100644
--- a/src/Components/SearchPageComponents/ResourceTemplate.js
+++ b/src/Components/SearchPageComponents/ResourceTemplate.js
@@ -12,128 +12,131 @@ import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import { RecursoVazio } from "ImportImages.js";
export default function ResourceTemplate({ isLoading, resources, totalResources, currPage, handlePreviousPage, handleNextPage, contrast }) {
- const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
- const topRef = React.useRef();
+ const totalPages = parseInt(totalResources) === 0 ? 0 : Math.ceil(totalResources / 12) - 1; //Dividing by 12 because i want to cath total pages, and results per page is 12
+ const topRef = React.useRef();
- useEffect(() => {
- topRef.current.scrollIntoView();
- }, [isLoading])
+ useEffect(() => {
+ topRef.current.scrollIntoView();
+ }, [isLoading])
- return (
- <ResourcePaper elevation={4} square contrast={contrast}>
- <div ref={topRef} />
- <div className="main">
- <Title contrast={contrast}>
- Recursos encontrados ({totalResources})
- </Title>
- {
- isLoading ?
- <LoadingSpinner text='Carregando recursos...' contrast={contrast} />
- :
- <Grid container justify='center' alignItems='center' spacing={3}>
- {
- resources.length >= 1 ?
- resources.map((card) => {
- return <Grid item key={new Date().toISOString() + card.id} >
- <ResourceCardFunction
- contrast={contrast}
- avatar={card.publisher ? card.publisher.avatar : ""}
- id={card.id}
- thumbnail={card.thumbnail}
- type={card.object_type ? card.object_type : "Outros"}
- title={card.name}
- published={card.state === "published" ? true : false}
- likeCount={card.likes_count}
- liked={card.liked}
- rating={card.review_average}
- author={card.author}
- tags={card.educational_stages}
- href={"/recurso/" + card.id}
- downloadableLink={card.default_attachment_location}
- />
+ return (
+ <ResourcePaper elevation={4} square contrast={contrast}>
+ <div ref={topRef} />
+ <div className="main">
+ <Title contrast={contrast}>
+ Recursos encontrados ({totalResources})
+ </Title>
+ {
+ isLoading ?
+ <LoadingSpinner text='Carregando recursos...' contrast={contrast} />
+ :
+ <Grid container justify='center' alignItems='center' spacing={3}>
+ {
+ resources.length >= 1 ?
+ resources.map((card) => {
+ return (
+ <Grid item key={new Date().toISOString() + card.id} >
+ <ResourceCardFunction
+ contrast={contrast}
+ avatar={card.publisher ? card.publisher.avatar : ""}
+ id={card.id}
+ thumbnail={card.thumbnail}
+ type={card.object_type ? card.object_type : "Outros"}
+ title={card.name}
+ published={card.state === "published" ? true : false}
+ likeCount={card.likes_count}
+ liked={card.liked}
+ rating={card.review_average}
+ author={card.author}
+ tags={card.educational_stages}
+ href={"/recurso/" + card.id}
+ downloadableLink={card.default_attachment_location}
+ />
+ </Grid>
+ )
+ })
+ :
+ <NoContentDiv contrast={contrast}>
+ <h3>
+ Desculpe, não há dados nessa página.
+ </h3>
+ <img src={RecursoVazio} alt='No cards' />
+ </NoContentDiv>
+ }
</Grid>
- })
- :
- <NoContentDiv contrast={contrast}>
- <h3>
- Desculpe, não há dados nessa página.
- </h3>
- <img src={RecursoVazio} alt='No cards' />
- </NoContentDiv>
- }
- </Grid>
- }
- {
- !isLoading &&
- <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
- <Grid item>
- <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === 0}>
- <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
- <ArrowBackIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- <Grid item>
- <ActualPage contrast={contrast}>
- {currPage}
- </ActualPage>
- <TotalPages contrast={contrast}>
- ...{totalPages}
- </TotalPages>
- </Grid>
- <Grid item>
- <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === totalPages}>
- <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
- <ArrowForwardIcon className='icon' />
- </IconButton>
- </StyledIconButton>
- </Grid>
- </Grid>
- }
- </div>
- </ResourcePaper>
- )
+ }
+ {
+ !isLoading &&
+ <Grid container direction='row' alignItems='center' justify='center' spacing={3}>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === 0}>
+ <IconButton onClick={handlePreviousPage} disabled={currPage === 0}>
+ <ArrowBackIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ <Grid item>
+ <ActualPage contrast={contrast}>
+ {currPage + 1}
+ </ActualPage>
+ <TotalPages contrast={contrast}>
+ ...{totalPages + 1}
+ </TotalPages>
+ </Grid>
+ <Grid item>
+ <StyledIconButton contrast={contrast} elevation={4} disabled={currPage === totalPages}>
+ <IconButton onClick={handleNextPage} disabled={currPage === totalPages}>
+ <ArrowForwardIcon className='icon' />
+ </IconButton>
+ </StyledIconButton>
+ </Grid>
+ </Grid>
+ }
+ </div>
+ </ResourcePaper>
+ )
};
const Title = styled.h4`
- text-transform: uppercase;
- font-weight: 500;
- text-align: left;
- color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
+ text-transform: uppercase;
+ font-weight: 500;
+ text-align: left;
+ color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
`
const NoContentDiv = styled.div`
- >h3{
- color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
- text-align: center;
- }
+ h3{
+ color: ${props => props.contrast === "" ? "#ff7f00" : "white"};
+ text-align: center;
+ }
`
const ActualPage = styled.span`
- color: ${props => props.contrast === "" ? "#ff7f00" : "yellow"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const TotalPages = styled.span`
- color: ${props => props.contrast === "" ? "#666" : "white"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const StyledIconButton = styled(Paper)`
- border-radius: 50% !important;
- background-color: ${props => props.disabled ? "#666" : props.contrast === "" ? "#ff7f00" : "yellow"} !important;
- .icon{
- color: ${props => props.disabled ? "#d4d4d4" : "white"};
- }
+ border-radius: 50% !important;
+ background-color: ${props => props.contrast === "" ? props.disabled ? "#666" : "orange" : "black"} !important;
+ .icon{
+ color: ${props => props.contrast === "" ? "white": props.disabled ? "white" : "yellow"} !important;
+ }
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
`
const ResourcePaper = styled(Paper)`
- /* height: 150px; */
- text-align: center;
- margin-top: 5px;
- margin-bottom: 30px;
- border: ${props => props.contrast === "" ? 0 : "1px solid white"};
+ /* height: 150px; */
+ text-align: center;
+ margin-top: 5px;
+ margin-bottom: 30px;
+ border: ${props => props.contrast === "" ? 0 : "1px solid white"};
- .main{
- background-color: ${props => props.contrast === "" ? "#fff" : "black"};
- padding: 0.5em 1em;
- }
+ .main{
+ background-color: ${props => props.contrast === "" ? "#fff" : "black"};
+ padding: 0.5em 1em;
+ }
- .textInfo{
- text-align: start;
- }
+ .textInfo{
+ text-align: start;
+ }
`;
\ No newline at end of file
diff --git a/src/Components/SearchPageComponents/UserTemplate.js b/src/Components/SearchPageComponents/UserTemplate.js
index 66720a688828126c16c01ec43f04c4d6096a9b96..cd61d982ab1bc9a922100a62065c4b88e3b9d37b 100644
--- a/src/Components/SearchPageComponents/UserTemplate.js
+++ b/src/Components/SearchPageComponents/UserTemplate.js
@@ -68,10 +68,10 @@ export default function ResourceTemplate({ isLoading, resources, totalResources,
</Grid>
<Grid item>
<ActualPage contrast={contrast}>
- {currPage}
+ {currPage + 1}
</ActualPage>
<TotalPages contrast={contrast}>
- ...{totalPages}
+ ...{totalPages + 1}
</TotalPages>
</Grid>
<Grid item>
@@ -101,17 +101,18 @@ const NoContentDiv = styled.div`
}
`
const ActualPage = styled.span`
- color: ${props => props.contrast === "" ? "#00bcd4" : "yellow"};
+ color: ${props => props.contrast === "" ? "#666" : "white"};
`
const TotalPages = styled.span`
color: ${props => props.contrast === "" ? "#666" : "white"};
`
const StyledIconButton = styled(Paper)`
- border-radius: 50% !important;
- background-color: ${props => props.disabled ? "#666" : props.contrast === "" ? "#00bcd4" : "yellow"} !important;
- .icon{
- color: ${props => props.disabled ? "#d4d4d4" : "white"};
- }
+ border-radius: 50% !important;
+ background-color: ${props => props.contrast === "" ? props.disabled ? "#666" : "#00bcd4" : "black"} !important;
+ .icon{
+ color: ${props => props.contrast === "" ? "white": props.disabled ? "white" : "yellow"} !important;
+ }
+ border: ${props => props.contrast === "" ? "" : "1px solid white"} !important;
`
const ResourcePaper = styled(Paper)`
diff --git a/src/Components/TabPanels/StyledComponents.js b/src/Components/TabPanels/StyledComponents.js
index 1ac86f9d3c002508daad5ae9f9b152bffc996cd3..b0e0f4b5688d77447e7feb1dcc6a309977c66561 100644
--- a/src/Components/TabPanels/StyledComponents.js
+++ b/src/Components/TabPanels/StyledComponents.js
@@ -251,6 +251,11 @@ export const StyledTabs = styled(Tabs)`
text-decoration: none;
font-weight: 500;
}
+ .MuiTab-textColorPrimary.Mui-disabled {
+ color: ${props => props.contrast === "" ? "#bdbdbd" : "white"};
+ text-decoration: none;
+ font-weight: 400;
+ }
`
export const RodapeDiv = styled.div`
diff --git a/src/Components/TopicCard.js b/src/Components/TopicCard.js
index 530b5bcc3cf7565b68690a556f8f9124ae34bdd1..e19c4c27c5d66c0acc28e4ff00ba83a4ce986876 100644
--- a/src/Components/TopicCard.js
+++ b/src/Components/TopicCard.js
@@ -41,7 +41,8 @@ export default function MaterialCard(props) {
<CardActions style={{ justifyContent: "center" }}>
<StyledLink className={`${props.contrast}LinkColor`} to={"topico?colecao=" + props.colecao_id + "&topico=" + props.topic.id}>
<Button
- style={props.contrast === "" ? {color: "#e8224f"} : {color: "inherit"}}
+ className={`${props.contrast}LinkColor`}
+ style={props.contrast === "" ? {color: "#e8224f"} : {color: "white"}}
>
Ver módulo
</Button>
diff --git a/src/Components/TopicList.js b/src/Components/TopicList.js
index f9980c22ea78873912090381275664dc95d8c366..ba5d8eedb56627943633e6bef5076c7b3a747976 100644
--- a/src/Components/TopicList.js
+++ b/src/Components/TopicList.js
@@ -38,8 +38,8 @@ export default function TopicList(props) {
alignItems="center"
>
<Grid item>
- <Fab size="medium" color="secondary" aria-label="edit" onClick={handleFabClick} style={props.contrast === "" ? { marginTop: "1em" } : { backgroundColor: "black", border: "1px solid white", marginTop: "1em" }}>
- {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+ <Fab size="medium" color="secondary" aria-label="edit" onClick={handleFabClick} style={props.contrast === "" ? { marginTop: "1em" } : { backgroundColor: "black", border: "1px solid yellow", marginTop: "1em" }}>
+ {expanded ? <ExpandLessIcon style={props.contrast === "" ? {color: "white"} : {color: "yellow"}} /> : <ExpandMoreIcon style={props.contrast === "" ? {color: "white"} : {color: "yellow"}}/>}
</Fab>
</Grid>
<Grid item>
diff --git a/src/Components/UploadPageComponents/Forms/Keywords.js b/src/Components/UploadPageComponents/Forms/Keywords.js
index 7b1c65cac3bc4c6750ce43f4536c0e24fde71751..428047106c25ecbb2685973d3369ddfe7de01e2d 100644
--- a/src/Components/UploadPageComponents/Forms/Keywords.js
+++ b/src/Components/UploadPageComponents/Forms/Keywords.js
@@ -19,7 +19,6 @@ along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>
import React, { useState, memo, useEffect, useRef } from 'react'
import FormControl from '@material-ui/core/FormControl';
import { StyledTextField, StyledFormLabel } from '../StyledComponents.js'
-import Grid from '@material-ui/core/Grid';
import styled from 'styled-components';
import DeleteIcon from '@material-ui/icons/Delete';
diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js
index 9057088f6ea69fcc94862841b6aed8a1700d5e3b..b622b7934b583c54cc7b5a8e2766f58d49c3c35f 100644
--- a/src/Pages/CollectionPage.js
+++ b/src/Pages/CollectionPage.js
@@ -71,7 +71,7 @@ export default function CollectionPage(props) {
variant='contained'
className="back-button"
>
- Voltar para a busca de coleções.
+ Voltar para a busca de coleções
</Button>
</Link>
</Grid>
@@ -186,7 +186,7 @@ const LoadingDiv = styled.div`
const CollectionNotFound = styled.div`
background-color: ${props => props.contrast === "" ? "" : "black !important"};
color: ${props => props.contrast === "" ? "#666 !important" : "white !important"};
- margin: 1em;
+ padding: 2em;
.not-found{
font-family: 'Roboto', sans-serif;
diff --git a/src/Pages/FormationMaterialPage.js b/src/Pages/FormationMaterialPage.js
index 8b03623f0a3c2852a51e294af03e8bd9a75fdf64..64d232919b481a4342a0d261c1354377c0bc9679 100644
--- a/src/Pages/FormationMaterialPage.js
+++ b/src/Pages/FormationMaterialPage.js
@@ -28,16 +28,16 @@ import { Link } from "react-router-dom";
import { Store } from '../Store';
export default function FormationMaterialPage(props) {
- const colecao = props.location.pathname === "/colecao";
+ const colecao = window.location.pathname.split('?')[0] === "/colecao";
const colecoes = colecoes_obj();
const { state } = useContext(Store);
const colecao_id = Number(
colecao ?
- props.location.search.split('=')[1]
- : props.location.search.split('&')[0].split('=')[1]
+ window.location.search.split('=')[1]
+ : window.location.search.split('&')[0].split('=')[1]
);
- const topico_id = Number(colecao ? 0 : props.location.search.split('&')[1].split('=')[1]);
+ const topico_id = Number(colecao ? 0 : window.location.search.split('&')[1].split('=')[1]);
const colecao_obj = ((id) => {
for (const c in colecoes) {
diff --git a/src/Pages/PublicUserPage.js b/src/Pages/PublicUserPage.js
index aea500f14f563737fdffcef4630bf145d1b34882..8a314c145d9fe2a033ddbdaf26941ab9aae24a5b 100644
--- a/src/Pages/PublicUserPage.js
+++ b/src/Pages/PublicUserPage.js
@@ -33,15 +33,15 @@ import TabRede from "../Components/TabPanels/PublicUserPageTabs/TabRede.js";
import CheckDecagram from "../img/check-decagram-blue.svg";
import ReportButton from "../Components/ReportButton.js";
import {
- HeaderContainer,
- UserProfileContainer,
- CoverContainer,
- UserProfileInfoDiv,
- StyledTabs,
- CheckTeacherDiv,
- RodapeDiv,
- NavBarContentContainer,
- BackgroundDiv,
+ HeaderContainer,
+ UserProfileContainer,
+ CoverContainer,
+ UserProfileInfoDiv,
+ StyledTabs,
+ CheckTeacherDiv,
+ RodapeDiv,
+ NavBarContentContainer,
+ BackgroundDiv,
} from "../Components/TabPanels/StyledComponents.js";
import { fetchAllRequest } from "../Components/HelperFunctions/getAxiosConfig";
import Typography from "@material-ui/core/Typography";
@@ -54,404 +54,401 @@ import { Link } from "react-router-dom";
import { noAvatar } from "ImportImages.js";
function RenderFollowContainer(props) {
- const { state } = useContext(Store);
- const [followed, setFollowed] = useState(props.followed);
- const toggleFollowed = () => {
- setFollowed(!followed);
- };
+ const { state } = useContext(Store);
+ const [followed, setFollowed] = useState(props.followed);
+ const toggleFollowed = () => {
+ setFollowed(!followed);
+ };
- return (
- <FollowContainer>
- <>
- {props.id !== state.currentUser.id && followed ? (
- <FollowingButton
- contrast={state.contrast}
- followedID={props.id}
- toggleFollowed={toggleFollowed}
- />
- ) : (
- <FollowButton contrast={state.contrast} followerID={props.id} toggleFollowed={toggleFollowed} />
- )}
- <FollowersCountButton contrast={state.contrast} followCount={props.followCount} />
- </>
- </FollowContainer>
- );
+ return (
+ <FollowContainer>
+ <>
+ {props.id !== state.currentUser.id && followed ? (
+ <FollowingButton
+ contrast={state.contrast}
+ followedID={props.id}
+ toggleFollowed={toggleFollowed}
+ />
+ ) : (
+ <FollowButton contrast={state.contrast} followerID={props.id} toggleFollowed={toggleFollowed} />
+ )}
+ <FollowersCountButton contrast={state.contrast} followCount={props.followCount} />
+ </>
+ </FollowContainer>
+ );
}
const RenderProfileAvatar = (userAvatar) => {
- return (
- <ProfileAvatarDiv>
- <img
- src={userAvatar ? apiDomain + userAvatar : noAvatar}
- alt="user avatar"
- style={{
- height: "inherit",
- width: "inherit",
- border: "0",
- verticalAlign: "middle",
- }}
- />
- </ProfileAvatarDiv>
- );
+ return (
+ <ProfileAvatarDiv>
+ <img
+ src={userAvatar ? apiDomain + userAvatar : noAvatar}
+ alt="user avatar"
+ style={{
+ height: "inherit",
+ width: "inherit",
+ border: "0",
+ verticalAlign: "middle",
+ }}
+ />
+ </ProfileAvatarDiv>
+ );
};
const RenderUserProfileInfo = (userName, contrast) => {
- return (
- <UserProfileInfoDiv contrast={contrast}>
- <p
- style={{
- fontSize: "28px",
- color: "#fff",
- marginBottom: "2px",
- fontWeight: "500",
- borderRadius: "5px",
- textShadow: "0 1px 2px rgba(0,0,0,.45)",
- }}
- >
- {userName}
- </p>
- </UserProfileInfoDiv>
- );
+ return (
+ <UserProfileInfoDiv contrast={contrast}>
+ <p
+ style={{
+ fontSize: "28px",
+ color: "#fff",
+ marginBottom: "2px",
+ fontWeight: "500",
+ borderRadius: "5px",
+ textShadow: "0 1px 2px rgba(0,0,0,.45)",
+ }}
+ >
+ {userName}
+ </p>
+ </UserProfileInfoDiv>
+ );
};
const RenderCheckTeacher = (submitter_request) => {
- if (submitter_request === "accepted") {
- return (
- <CheckTeacherDiv>
- <p>
- <span>
- <img alt="" src={CheckDecagram} />
- </span>
- Professor(a)
- </p>
- </CheckTeacherDiv>
- );
- }
+ if (submitter_request === "accepted") {
+ return (
+ <CheckTeacherDiv>
+ <p>
+ <span>
+ <img alt="" src={CheckDecagram} />
+ </span>
+ Professor(a)
+ </p>
+ </CheckTeacherDiv>
+ );
+ }
};
export default function PublicUserPage(props) {
- /*currentUser info variables--------------------------------------*/
- const { state } = useContext(Store);
- /*user info variables--------------------------------------*/
- const WIDTH = window.innerWidth;
- const [id, setId] = useState(props.match.params.userId);
-
- const [loading, setLoading] = useState(false);
+ /*currentUser info variables--------------------------------------*/
+ const { state } = useContext(Store);
+ /*user info variables--------------------------------------*/
+ const WIDTH = window.innerWidth;
+ const [id, setId] = useState(props.match.params.userId);
- const [userData, setUserData] = useState({});
- const fillUserInfo = (data) => {
- setUserData(data);
- };
- /*---------------------------------------------------------*/
- const [following, setFollowing] = useState(0);
- const fillFollowing = (data) => {
- if (data)
- if (data.errors)
- setFollowing("Você precisa logar para ver o que usuário está ");
- else setFollowing(data.length);
- };
+ const [loading, setLoading] = useState(false);
+ const [erro, setErro] = useState(false);
- /*content control variables--------------------------------*/
- // eslint-disable-next-line
- const [tabs, setTabs] = useState(["InÃcio", "Recursos", "Coleções", "Rede"]);
- const [tabValue, setTabValue] = useState(0);
- const handleChangeTab = (event, newValue) => {
- setTabValue(newValue);
- };
- /*---------------------------------------------------------*/
+ const [userData, setUserData] = useState({});
+ const fillUserInfo = (data) => {
+ setUserData(data);
+ };
+ /*---------------------------------------------------------*/
+ const [following, setFollowing] = useState(0);
+ const fillFollowing = (data) => {
+ if (data)
+ if (data.errors)
+ setFollowing("Você precisa logar para ver o que usuário está ");
+ else setFollowing(data.length);
+ };
- /*content variables--------------------------------*/
- const [learningObjArr, setLearningObjects] = useState([]);
- const handleLearningObjects = (data) => {
- setLearningObjects(data);
- };
- const [collectionsArr, setCollections] = useState([]);
- const handleCollections = (data) => {
- setCollections(data);
- };
- /*---------------------------------------------------------*/
+ /*content control variables--------------------------------*/
+ // eslint-disable-next-line
+ const [tabs, setTabs] = useState(["InÃcio", "Recursos", "Coleções", "Rede"]);
+ const [tabValue, setTabValue] = useState(0);
+ const handleChangeTab = (event, newValue) => {
+ setTabValue(newValue);
+ };
+ /*---------------------------------------------------------*/
- function handleSuccess(responseArr) {
- fillUserInfo(responseArr[0]);
+ /*content variables--------------------------------*/
+ const [learningObjArr, setLearningObjects] = useState([]);
+ const handleLearningObjects = (data) => {
+ setLearningObjects(data);
+ };
+ const [collectionsArr, setCollections] = useState([]);
+ const handleCollections = (data) => {
+ setCollections(data);
+ };
+ /*---------------------------------------------------------*/
- handleLearningObjects(responseArr[1]);
+ function handleSuccess(responseArr) {
+ if (Object.keys(responseArr[0]).length === 0) setErro(true);
+ else {
+ fillUserInfo(responseArr[0]);
- handleCollections(responseArr[2]);
-
- fillFollowing(responseArr[3]);
- setLoading(false);
- }
+ handleLearningObjects(responseArr[1]);
+
+ handleCollections(responseArr[2]);
+
+ fillFollowing(responseArr[3]);
+ setLoading(false);
+ }
+ }
- /*Component Will Mount*/
- useEffect(() => {
- const id = props.match.params.userId;
- setId(id);
- const urls = [
- `/users/${id}`,
- `/users/${id}/learning_objects`,
- `/users/${id}/collections`,
- `/users/${id}/following/User`,
- ];
- setLoading(true);
- fetchAllRequest(urls, handleSuccess, (error) => {
- console.log(error);
- });
- }, [state.currentUser.id, props.match.params.userId]);
- /*---------------------------------------------------------*/
+ /*Component Will Mount*/
+ useEffect(() => {
+ const id = props.match.params.userId;
+ setId(id);
+ const urls = [
+ `/users/${id}`,
+ `/users/${id}/learning_objects`,
+ `/users/${id}/collections`,
+ `/users/${id}/following/User`,
+ ];
+ setLoading(true);
+ fetchAllRequest(urls, handleSuccess, () => {
+ setErro(true)
+ });
+ }, [state.currentUser.id, props.match.params.userId]);
+ /*---------------------------------------------------------*/
- if (loading)
- return (
- <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
- <LoadingSpinner
- contrast={state.contrast}
- text="Carregando dados do usuário..."
- />
- </div>
- );
- else if (!userData && !following && !learningObjArr && !collectionsArr)
- return (
- <UserNotFoundDiv contrast={state.contrast}>
- <Grid
- container
- direction="column"
- justify="center"
- alignItems="center"
- spacing={1}
- >
- <Grid item>
- <p className="not-found">
- O usuário não foi encontrado em nossa base de dados.
- </p>
- </Grid>
- <Grid item>
- <Link
- className="link"
- to={`/busca?page=0&results_per_page=12&query=*&search_class=User`}
- >
- <Button variant="contained" className="back-button">
- Voltar para a busca de usuários.
- </Button>
- </Link>
- </Grid>
- </Grid>
- </UserNotFoundDiv>
- );
- else
- return (
- <React.Fragment>
- <link
- href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
- rel="stylesheet"
- />
- <BackgroundDiv contrast={state.contrast}>
- <CustomizedBreadcrumbs contrast={state.contrast} values={["Usuário Público", tabs[tabValue]]} />
- <Grid container spacing={2}>
- <Grid item xs={12}>
- <div style={{ padding: "10px 0 8px 0" }}>
- <UserProfileContainer>
- <HeaderContainer contrast={state.contrast}>
- <>
- {!loading && (
- <RenderFollowContainer
- followed={userData.followed}
- id={id}
- followCount={userData.follows_count}
- />
- )}
- {RenderProfileAvatar(
- userData.avatar ? userData.avatar : undefined
- )}
- <CoverContainer contrast={state.contrast}>
- {userData.cover && (
- <img
- src={apiDomain + userData.cover}
- alt=""
- style={{
- width: "100%",
- height: "100%",
- objectFit: "cover",
- }}
- />
- )}
- </CoverContainer>
- {WIDTH <= 501
- ? null
- : RenderUserProfileInfo(userData.name, state.contrast)}
- </>
- </HeaderContainer>
- {WIDTH <= 501 ? (
- <Grid
- style={state.contrast === "" ? { marginTop: "4em" } : { paddingTop: "4em", backgroundColor: "black", borderLeft: "1px solid white", borderRight: "1px solid white", }}
- container
- justify="center"
- alignItems="center"
- direction="column"
- >
- <Grid item>
- <Typography
- variant="h4"
- gutterBottom
- style={state.contrast === "" ? { textAlign: "center" } : { color: "white", textAlign: "center" }}
+ if (erro)
+ return (
+ <UserNotFoundDiv contrast={state.contrast}>
+ <Grid
+ container
+ direction="column"
+ justify="center"
+ alignItems="center"
+ spacing={1}
+ >
+ <Grid item>
+ <p className="not-found">
+ O usuário não foi encontrado em nossa base de dados.
+ </p>
+ </Grid>
+ <Grid item>
+ <Link
+ className="link"
+ to={`/busca?page=0&results_per_page=12&query=*&search_class=User`}
>
- {userData.name}
- </Typography>
- </Grid>
- <Grid
- style={{
- marginTop: "0.5em",
- marginBottom: "0.5em",
- borderTop: "1px solid white",
- borderBottom: "1px solid white",
- }}
- container
- spacing={4}
- justify="center"
- alignItems="center"
- direction="row"
- >
- <Grid item>
- <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
- {loading ? (
- <CircularProgress size={20} />
- ) : (
- `${userData.follows_count} seguidores`
- )}
- </Typography>
- </Grid>
- <Grid item>
- <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
- {loading ? (
- <CircularProgress size={20} />
- ) : (
- `${following} seguindo`
- )}
- </Typography>
- </Grid>
- </Grid>
+ <Button variant="contained" className="back-button">
+ Voltar para a busca de usuários
+ </Button>
+ </Link>
</Grid>
- ) : (
- RenderCheckTeacher(userData.submitter_request)
- )}
- <RodapeDiv contrast={state.contrast}>
- <NavBarContentContainer contrast={state.contrast}>
- <StyledTabs
+ </Grid>
+ </UserNotFoundDiv>
+ );
+ else
+ if (loading)
+ return (
+ <div style={state.contrast === "" ? {} : { backgroundColor: "black" }}>
+ <LoadingSpinner
contrast={state.contrast}
- value={tabValue}
- onChange={handleChangeTab}
- indicatorColor="primary"
- textColor="primary"
- variant="scrollable"
- scrollButtons="on"
- TabIndicatorProps={{ style: state.contrast === "" ? { background: "#00bcd4" } : { background: "yellow" } }}
- >
- {tabs.map((tab) => (
- <Tab
- label={tab}
- key={tab}
- disabled={
- (tab === "Recursos" &&
- learningObjArr.length === 0) ||
- (tab === "Coleções" &&
- collectionsArr.length === 0) ||
- (tab === "Rede" && state.currentUser.id === "")
- }
- />
- ))}
- </StyledTabs>
- </NavBarContentContainer>
- <ReportButton
- className="report-button"
- complainableId={userData.id}
- complainableType={"User"}
+ text="Carregando dados do usuário..."
/>
- </RodapeDiv>
- </UserProfileContainer>
- </div>
- </Grid>
+ </div>
+ );
+ else
+ return (
+ <React.Fragment>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
+ rel="stylesheet"
+ />
+ <BackgroundDiv contrast={state.contrast}>
+ <CustomizedBreadcrumbs contrast={state.contrast} values={["Usuário Público", tabs[tabValue]]} />
+ <Grid container spacing={2}>
+ <Grid item xs={12}>
+ <div style={{ padding: "10px 0 8px 0" }}>
+ <UserProfileContainer>
+ <HeaderContainer contrast={state.contrast}>
+ <>
+ {!loading && (
+ <RenderFollowContainer
+ followed={userData.followed}
+ id={id}
+ followCount={userData.follows_count}
+ />
+ )}
+ {RenderProfileAvatar(
+ userData.avatar ? userData.avatar : undefined
+ )}
+ <CoverContainer contrast={state.contrast}>
+ {userData.cover && (
+ <img
+ src={apiDomain + userData.cover}
+ alt=""
+ style={{
+ width: "100%",
+ height: "100%",
+ objectFit: "cover",
+ }}
+ />
+ )}
+ </CoverContainer>
+ {WIDTH <= 501
+ ? null
+ : RenderUserProfileInfo(userData.name, state.contrast)}
+ </>
+ </HeaderContainer>
+ {WIDTH <= 501 ? (
+ <Grid
+ style={state.contrast === "" ? { marginTop: "4em" } : { paddingTop: "4em", backgroundColor: "black", borderLeft: "1px solid white", borderRight: "1px solid white", }}
+ container
+ justify="center"
+ alignItems="center"
+ direction="column"
+ >
+ <Grid item>
+ <Typography
+ variant="h4"
+ gutterBottom
+ style={state.contrast === "" ? { textAlign: "center" } : { color: "white", textAlign: "center" }}
+ >
+ {userData.name}
+ </Typography>
+ </Grid>
+ <Grid
+ style={{
+ marginTop: "0.5em",
+ marginBottom: "0.5em",
+ borderTop: "1px solid white",
+ borderBottom: "1px solid white",
+ }}
+ container
+ spacing={4}
+ justify="center"
+ alignItems="center"
+ direction="row"
+ >
+ <Grid item>
+ <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
+ {loading ? (
+ <CircularProgress size={20} />
+ ) : (
+ `${userData.follows_count} seguidores`
+ )}
+ </Typography>
+ </Grid>
+ <Grid item>
+ <Typography style={state.contrast === "" ? {} : { color: "white" }} variant="h6" onClick={(e) => { handleChangeTab(e, 4) }}>
+ {loading ? (
+ <CircularProgress size={20} />
+ ) : (
+ `${following} seguindo`
+ )}
+ </Typography>
+ </Grid>
+ </Grid>
+ </Grid>
+ ) : (
+ RenderCheckTeacher(userData.submitter_request)
+ )}
+ <RodapeDiv contrast={state.contrast}>
+ <NavBarContentContainer contrast={state.contrast}>
+ <StyledTabs
+ contrast={state.contrast}
+ value={tabValue}
+ onChange={handleChangeTab}
+ indicatorColor="primary"
+ textColor="primary"
+ variant="scrollable"
+ scrollButtons="on"
+ TabIndicatorProps={{ style: state.contrast === "" ? { background: "#00bcd4" } : { background: "yellow" } }}
+ >
+ {tabs.map((tab) => (
+ <Tab
+ label={tab}
+ key={tab}
+ disabled={
+ (tab === "Recursos" &&
+ learningObjArr.length === 0) ||
+ (tab === "Coleções" &&
+ collectionsArr.length === 0) ||
+ (tab === "Rede" && state.currentUser.id === "")
+ }
+ />
+ ))}
+ </StyledTabs>
+ </NavBarContentContainer>
+ <ReportButton
+ className="report-button"
+ complainableId={userData.id}
+ complainableType={"User"}
+ />
+ </RodapeDiv>
+ </UserProfileContainer>
+ </div>
+ </Grid>
- {!loading && (
- <Grid item xs={12}>
- {tabValue === 0 && (
- <TabInicio
- contrast={state.contrast}
- id={id}
- user={userData}
- learningObjs={learningObjArr}
- collections={collectionsArr}
- />
- )}
- {tabValue === 1 && (
- <TabRecursos contrast={state.contrast} id={id} username={userData.name} />
- )}
- {tabValue === 2 && (
- <TabColecoes contrast={state.contrast} id={id} username={userData.name} />
- )}
- {tabValue === 3 && <TabRede contrast={state.contrast} id={id} username={userData.name} />}
- </Grid>
- )}
- </Grid>
- </BackgroundDiv>
- </React.Fragment>
- );
+ {!loading && (
+ <Grid item xs={12}>
+ {tabValue === 0 && (
+ <TabInicio
+ contrast={state.contrast}
+ id={id}
+ user={userData}
+ learningObjs={learningObjArr}
+ collections={collectionsArr}
+ />
+ )}
+ {tabValue === 1 && <TabRecursos contrast={state.contrast} id={id} username={userData.name} />}
+ {tabValue === 2 && <TabColecoes contrast={state.contrast} id={id} username={userData.name} />}
+ {tabValue === 3 && <TabRede contrast={state.contrast} id={id} username={userData.name} />}
+ </Grid>
+ )}
+ </Grid>
+ </BackgroundDiv>
+ </React.Fragment>
+ );
}
const ProfileAvatarDiv = styled.div`
- overflow: hidden;
- border-radius: 100%;
- bottom: -10px;
- left: 20px;
- z-index: 10;
- box-sizing: content-box;
- position: absolute;
- width: 150px;
- height: 150px;
- border: 4px solid #fff;
- outline: 0;
- background-color: #fff;
- @media screen and (max-width: 501px) {
- height: 73px;
- width: 73px;
+ overflow: hidden;
+ border-radius: 100%;
+ bottom: -10px;
+ left: 20px;
+ z-index: 10;
+ box-sizing: content-box;
position: absolute;
- left: 0;
- right: 0;
- bottom: -40px;
- margin-left: auto;
- margin-right: auto;
- }
+ width: 150px;
+ height: 150px;
+ border: 4px solid #fff;
+ outline: 0;
+ background-color: #fff;
+ @media screen and (max-width: 501px) {
+ height: 73px;
+ width: 73px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: -40px;
+ margin-left: auto;
+ margin-right: auto;
+ }
`;
const UserNotFoundDiv = styled.div`
- padding: 1em;
- background-color: ${(props) => (props.contrast === "" ? "#f4f4f4" : "black")};
+ padding: 1em;
+ background-color: ${(props) => (props.contrast === "" ? "#f4f4f4" : "black")};
- .not-found {
- font-family: "Roboto", sans-serif;
- color: ${(props) => (props.contrast === "" ? "#666" : "white")};
- font-weight: 500;
- text-align: left;
- padding: 0;
- margin: 0;
- }
+ .not-found {
+ font-family: "Roboto", sans-serif;
+ color: ${(props) => props.contrast === "" ? "#666" : "white"};
+ font-weight: 500;
+ text-align: left;
+ padding: 0;
+ margin: 0;
+ }
- .back-button {
- background-color: ${(props) =>
- props.contrast === "" ? "#00bcd4" : "black"};
- color: ${(props) => (props.contrast === "" ? "whitesmoke" : "yellow")};
- border: ${(props) => (props.contrast === "" ? "none" : "1px solid white")};
- text-decoration: ${(props) =>
- props.contrast === "" ? "none" : "underline"};
- :hover {
- background-color: ${(props) =>
- props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
- text-decoration: ${(props) =>
- props.contrast === "" ? "none" : "underline"};
+ .back-button {
+ background-color: ${(props) => props.contrast === "" ? "#00bcd4" : "black"};
+ color: ${(props) => props.contrast === "" ? "whitesmoke" : "yellow"};
+ border: ${(props) => props.contrast === "" ? "none" : "1px solid white"};
+ text-decoration: ${(props) => props.contrast === "" ? "none" : "underline"};
+ :hover {
+ background-color: ${(props) => props.contrast === "" ? "" : "rgba(255,255,0,0.24)"};
+ text-decoration: ${(props) => props.contrast === "" ? "none" : "underline"};
+ }
}
- }
`;
const FollowContainer = styled.div`
- padding: 4px 10px;
- right: 0;
- position: absolute;
- z-index: 1;
+ padding: 4px 10px;
+ right: 0;
+ position: absolute;
+ z-index: 1;
`;
diff --git a/src/Pages/ResourcePage.js b/src/Pages/ResourcePage.js
index e25c046f8f0a6e47f95fdebf277dd793b78fca01..17cc07adf2121aface9b8140785ce21098d1da89 100644
--- a/src/Pages/ResourcePage.js
+++ b/src/Pages/ResourcePage.js
@@ -157,7 +157,7 @@ export default function LearningObjectPage(props) {
variant='contained'
className="back-button"
>
- Voltar para a busca de recursos.
+ Voltar para a busca de recursos
</Button>
</Link>
</Grid>
diff --git a/src/env.js b/src/env.js
index 95815e96e0a4b6d934c32704a85f04284e77d16e..7284c42754e5c679138196c2bae2a2f128779c2b 100644
--- a/src/env.js
+++ b/src/env.js
@@ -17,7 +17,7 @@ You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/
-var apiDomain = 'https://api.portalmec.c3sl.ufpr.br',
+var apiDomain = 'https://api.portalmectest.c3sl.ufpr.br',
apiVersion = 'v1',
apiUrl = apiDomain + '/' + apiVersion;