diff --git a/src/App.js b/src/App.js
index 512689822628f55d908b129d3fcd267f81f3f22e..18a518916255cebc55e9e55eaaac7c609b909fba 100644
--- a/src/App.js
+++ b/src/App.js
@@ -52,6 +52,7 @@ import CollectionPage from "./Pages/CollectionPage.js";
import FormationMaterialPage from "./Pages/FormationMaterialPage.js";
import FormationMaterialIframe from "./Pages/FormationMaterialIframe.js";
import MaterialPage from "./Pages/MaterialPage";
+import PageNotFound from "./Pages/PageNotFound.js";
import NoteVariables from "./Admin/Pages/Pages/SubPages/NoteVariables";
import Institution from "./Admin/Pages/Pages/SubPages/Institutions";
@@ -203,6 +204,7 @@ export default function App() {
<Route path="/topico" component={FormationMaterialPage} />
<Route path="/iframe-colecao" component={FormationMaterialIframe} />
<Route path="/material-formacao" component={MaterialPage} />
+ <Route path='*' component={PageNotFound} />
<div style={{ backgroundColor: " #D3D3D3" }}>
<AppBarAdmin />
<div style={{ padding: "2em" }}>
diff --git a/src/Components/CollectionCardFunction.js b/src/Components/CollectionCardFunction.js
index 6f7322e7261536655d78098ad28b3639e87af2a5..e0c4a517972fe4cfb0fe8de5d2f97a6cd33f20e1 100644
--- a/src/Components/CollectionCardFunction.js
+++ b/src/Components/CollectionCardFunction.js
@@ -193,39 +193,40 @@ export default function CollectionCardFunction(props) {
<StyledCard>
<CardDiv>
<CardReaDiv>
- <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
- <Slide direction="left" in={slideIn} timeout={1000}>
- <div className={`slideContentLinkAfterActive${slideIn}`} style={{ width: '100%', height: "100%" }}>
- <Link to={"/colecao-do-usuario/" + props.id} className="text" style={{ textDecoration: "none" }} >
- {SlideAnimationContent()}
- </Link>
+ <Link to={"/colecao-do-usuario/" + props.id}>
+ <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
+ <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
+ <UserInfo style={{ width: '272.5px'}}>
+ {/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */}
+ <img src={userAvatar} alt="user avatar" style={{
+ height: "70px", width: "70px", borderRadius: "50%",
+ zIndex: 1, border: "2px solid white",
+ boxShadow: "0 1px 3px rgba(0,0,0,.45)"
+ }} />
+ <UserAndTitle>
+ <span>{props.author}</span>
+ <span className={"col-name"}>{name}</span>
+ </UserAndTitle>
+ </UserInfo>
+ <StyledGrid container direction="row" style={{ width: '272.5px'}}>
+ {
+ props.thumbnails.map((thumb) =>
+ <Grid item xs={props.thumbnails <= 4 && props.thumbnails > 0 ? 12 / props.thumbnails.length : 6}>
+ <div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: "100%", width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} />
+ </Grid>
+ )
+ }
+ </StyledGrid>
</div>
- </Slide>
- <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '100%', height: '100%' }}>
- <UserInfo>
- {/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */}
- <img src={userAvatar} alt="user avatar" style={{
- height: "70px", width: "70px", borderRadius: "50%",
- zIndex: 1, border: "2px solid white",
- boxShadow: "0 1px 3px rgba(0,0,0,.45)"
-
- }} />
- <UserAndTitle>
- <span>{props.author}</span>
- <span className={"col-name"}>{name}</span>
- </UserAndTitle>
- </UserInfo>
- <StyledGrid container direction="row">
- {
- props.thumbnails.map((thumb) =>
- <Grid item xs={props.thumbnails <= 4 && props.thumbnails > 0 ? 12 / props.thumbnails.length : 6}>
- <div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: "100%", width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} />
- </Grid>
- )
- }
- </StyledGrid>
- </div>
- </Header>
+ {
+ <div className={`slideContentLinkAfterActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
+ <div className="text" >
+ {SlideAnimationContent()}
+ </div>
+ </div>
+ }
+ </Header>
+ </Link>
<Description> {/*renders rating, number of learning objects and likes count*/}
{
@@ -315,8 +316,8 @@ export default function CollectionCardFunction(props) {
const SlideContentDiv = styled.div`
background-color : #7e57c2;
padding : 10px;
- width : 100%;
- height : 100%;
+ width : 272.5px;
+ height : 230px;
`
const UserAndTitle = styled.div`
diff --git a/src/Components/ResourceCard.css b/src/Components/ResourceCard.css
index c7b97b5cb76d3373765410177a1cfd4749a31fef..345a97b61a931e5b09c711afb69a4c192cb4b7d6 100644
--- a/src/Components/ResourceCard.css
+++ b/src/Components/ResourceCard.css
@@ -1,22 +1,26 @@
/* transform: translateX(-1284.61px); visibility: hidden; */
-/* .slideContentLinkAfterActivefalse{
- transform: translateX(-1285.55px);
+.slideContentLinkAfterActivefalse{
position: relative;
-}*/
-.slideContentLinkAfterActivetrue{
- position: absolute;
transform: none;
+ transition: cubic-bezier(1, 1, 0, 0) 750ms;
+}
+
+.slideContentLinkAfterActivetrue{
+ transform: translateX(-272.5px);
+ transition: transform 750ms;
+ position: relative;
/* transition: transform 1000ms cubic-bezier(0,0,0.2,1) 0ms; */
}
.slideContentLinkBeforeActivefalse{
- position: absolute;
+ position: relative;
transform: none;
- transition: transform 500ms cubic-bezier(0,0,0.2,1) 0ms;
+ transition: cubic-bezier(0, 0, 1, 1) 750ms;
}
.slideContentLinkBeforeActivetrue{
- transform: translateX(-1285.55px);
+ transform: translateX(-272.5px);
+ transition: transform 750ms;
position: relative;
}
\ No newline at end of file
diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index d688ca3e6e154871fc8633416529f651e531e530..6648dbbd2a790f5e9b15c259268ae80c0801c21e 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -34,6 +34,10 @@ import { getDefaultThumbnail } from './HelperFunctions/getDefaultThumbnail'
import GetIconByName from './UploadPageComponents/GetIconByName'
import "./ResourceCard.css";
import { putRequest } from './HelperFunctions/getAxiosConfig'
+import SignUpModal from './SignUpModal'
+import LoginModal from './LoginModal.js'
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
export default function ResourceCardFunction(props) {
const [thumbnail, setThumbnail] = useState(null)
@@ -45,6 +49,14 @@ export default function ResourceCardFunction(props) {
const [liked, toggleLiked] = useState(props.liked)
const [likesCount, setLikesCount] = useState(props.likeCount)
+ const [signUpOpen, setSignUp] = useState(false)
+ const [loginOpen, setLogin] = useState(false)
+ const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
+
+ function Alert(props) {
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
+ }
+
useEffect(() => {
//decide which thumbnail to use
if (props.thumbnail) {
@@ -74,6 +86,21 @@ export default function ResourceCardFunction(props) {
putRequest(url, {}, handleSuccessLike, (error) => { console.log(error) })
}
+ const handleLogin = () => {
+ setLogin(!loginOpen)
+ }
+
+ const handleSignUp = () => {
+ setSignUp(!signUpOpen)
+ }
+
+ function toggleLoginSnackbar(reason) {
+ if (reason === 'clickaway') {
+ return;
+ }
+ handleSuccessfulLogin(false);
+ }
+
const SlideAnimationContent = () => {
return (
<SlideContentDiv>
@@ -106,64 +133,77 @@ export default function ResourceCardFunction(props) {
}
return (
- <StyledCard>
- <CardDiv>
- <CardReaDiv>
- <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
- {
- <Slide direction="left" in={slideIn} timeout={1000}>
- <div className={`slideContentLinkAfterActive${slideIn}`}>
- <Link to={props.href} className="text" >
- {SlideAnimationContent()}
- </Link>
+ <React.Fragment>
+ <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
+ />
+ <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
+ openSnackbar={() => { handleSuccessfulLogin(true) }}
+ />
+ <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
+ anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+ >
+ <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
+ </Snackbar>
+ <StyledCard>
+ <CardDiv>
+ <CardReaDiv>
+ <Link to={props.href}>
+ <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
+ <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ height: '189px' }}>
+ <img className="img-cover" src={thumbnail} alt="learning object thumbnail" style={{ width: "272.5px" }} />
</div>
- </Slide >
- }
- <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ height: '100%' }}>
- <img className="img-cover" src={thumbnail} alt="learning object thumbnail" style={{ width: "272.5px" }} />
- </div>
- </Header>
- <Description>
- <Link to={props.href} className="text" style={{ height: '45px' }}> {/*add link to learningObject*/}
- <Title>
- {props.title}
- </Title>
+ {
+ <div className={`slideContentLinkAfterActive${slideIn}`}>
+ <div className="text" >
+ {SlideAnimationContent()}
+ </div>
+ </div>
+ }
+ </Header>
</Link>
- <Rating
- name="customized-empty"
- value={props.rating}
- readOnly
- style={{ color: "#666" }}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
- />
- <Footer>
- <Type>
- {GetIconByName(label)}
- <span>{label}</span>
- </Type>
- <LikeCounter>
- <span>{likesCount}</span>
- <ButtonNoWidth onClick={handleLike}>
- <FavoriteIcon style={{ color: liked ? "red" : "#666" }} />
- </ButtonNoWidth>
- </LikeCounter>
- </Footer>
- </Description>
- </CardReaDiv>
- <CardReaFooter>
- <div style={{ display: "flex", height: "100%" }}>
- <ButtonGuardarColecao thumb={props.thumbnail} title={props.title} learningObjectId={props.id}
+ <Description>
+ <Link to={props.href} className="text" style={{ height: '45px' }}> {/*add link to learningObject*/}
+ <Title>
+ {props.title}
+ </Title>
+ </Link>
+ <Rating
+ name="customized-empty"
+ value={props.rating}
+ readOnly
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ />
+ <Footer>
+ <Type>
+ {GetIconByName(label)}
+ <span>{label}</span>
+ </Type>
+ <LikeCounter>
+ <span>{likesCount}</span>
+ <ButtonNoWidth onClick={handleLike}>
+ <FavoriteIcon style={{ color: liked ? "red" : "#666" }} />
+ </ButtonNoWidth>
+ </LikeCounter>
+ </Footer>
+ </Description>
+ </CardReaDiv>
+ <CardReaFooter>
+ <div style={{ display: "flex", height: "100%" }}>
+ <ButtonGuardarColecao thumb={props.thumbnail} title={props.title} learningObjectId={props.id}
+ />
+ </div>
+ <ResourceCardOptions
+ learningObjectId={props.id}
+ downloadableLink={props.downloadableLink}
+ thumb={props.thumbnail}
+ title={props.title}
+ handleLogin={handleLogin}
/>
- </div>
- <ResourceCardOptions
- learningObjectId={props.id}
- downloadableLink={props.downloadableLink}
- thumb={props.thumbnail}
- title={props.title}
- />
- </CardReaFooter>
- </CardDiv>
- </StyledCard>
+ </CardReaFooter>
+ </CardDiv>
+ </StyledCard>
+ </React.Fragment>
)
}
/*---------- USED IN SLIDE DIV ONLY -----------*/
diff --git a/src/Components/ResourceCardOptions.js b/src/Components/ResourceCardOptions.js
index 5d2821f3d9a39cc92af23d5ff1fa7c71de868777..2e89a35a708663188a9e843c3fbb08c8de6deaff 100644
--- a/src/Components/ResourceCardOptions.js
+++ b/src/Components/ResourceCardOptions.js
@@ -36,10 +36,6 @@ import ShareModal from './ShareModal'
import SnackbarComponent from './SnackbarComponent'
import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
import Tooltip from '@material-ui/core/Tooltip';
-import SignUpModal from './SignUpModal'
-import LoginModal from './LoginModal.js'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
import { getRequest } from './HelperFunctions/getAxiosConfig'
export default function ResourceCardOptions(props) {
@@ -68,7 +64,7 @@ export default function ResourceCardOptions(props) {
const [saveToCol, toggleSave] = useState(false)
const handleGuardar = () => {
if (!state.currentUser.id) {
- handleLogin();
+ props.handleLogin();
}
else {
toggleSave(true);
@@ -93,7 +89,7 @@ export default function ResourceCardOptions(props) {
const handleShare = () => {
if (!state.currentUser.id) {
- handleLogin()
+ props.handleLogin()
}
else {
toggleShare(true);
@@ -104,17 +100,9 @@ export default function ResourceCardOptions(props) {
return (window.origin + "/recurso/" + props.learningObjectId)
}
- const handleSignUp = () => {
- setSignUp(!signUpOpen)
- }
-
- const handleLogin = () => {
- setLogin(!loginOpen)
- }
-
const handleReport = () => {
if (!state.currentUser.id) {
- handleLogin()
+ props.handleLogin()
}
else {
handleModalReportar(true);
@@ -122,21 +110,7 @@ export default function ResourceCardOptions(props) {
handleClose();
}
- function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
- }
-
- function toggleLoginSnackbar(reason) {
- if (reason === 'clickaway') {
- return;
- }
- handleSuccessfulLogin(false);
- }
-
const [snackbarOpen, toggleSnackbar] = useState(false)
- const [signUpOpen, setSignUp] = useState(false)
- const [loginOpen, setLogin] = useState(false)
- const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
return (
<>
@@ -155,16 +129,6 @@ export default function ResourceCardOptions(props) {
/>
<SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => { toggleSnackbar(false) }} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"}
/>
- <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
- />
- <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
- openSnackbar={() => { handleSuccessfulLogin(true) }}
- />
- <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
- anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
- >
- <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
- </Snackbar>
<div style={{ fontSize: "12px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
<ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{ color: "#666" }}>
<MoreVertIcon style={{ color: "#666" }} />
diff --git a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
index ce5a319efaacbf631c7a3871c0ee8672a8f68db1..f65e6417a460b08bf87221fb28aa8cec321a2c97 100644
--- a/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
+++ b/src/Components/TabPanels/UserPageTabs/PanelEditarPerfil.js
@@ -42,7 +42,7 @@ export default function TabPanelEditarPerfil(props) {
})
const [formAboutMe, setAboutMe] = useState({
- key: state.currentUser.description ? false : true,
+ key: false,
value: state.currentUser.description ? state.currentUser.description : ""
})
diff --git a/src/Pages/PageNotFound.js b/src/Pages/PageNotFound.js
new file mode 100644
index 0000000000000000000000000000000000000000..7e9a5b0ca55aa05bc584bad105e8ebe0f3f306e5
--- /dev/null
+++ b/src/Pages/PageNotFound.js
@@ -0,0 +1,44 @@
+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+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/>.*/
+
+import React from 'react';
+import styled from "styled-components";
+
+export default function PageNotFound (props) {
+ return (
+ <div>
+ <link
+ href="https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap"
+ rel="stylesheet"
+ />
+ <StyledDiv><span style={{ fontSize: '50px' }}>Desculpe</span></StyledDiv>
+ <StyledDiv><span style={{ fontSize: '30px' }}>Não foi possível encontrar a página que você está procurando.</span></StyledDiv>
+ <StyledDiv><a href='/'><span style={{ fontSize: '20px' }}>Voltar para a página inicial</span></a></StyledDiv>
+ </div>
+ )
+}
+
+const StyledDiv = styled('div')`
+ width: 100%;
+ margin-top: 70px;
+ margin-bottom: 70px;
+ justify-content : space-evenly;
+ display: flex;
+ color: #757575;
+ text-align:center;
+`
\ No newline at end of file
diff --git a/src/Pages/Search.js b/src/Pages/Search.js
index db1c0201834e8a4b54f7ac4f3313425255cf436e..9b6689c2f054f3f37a010e9f8f9d1f3e35a76870 100644
--- a/src/Pages/Search.js
+++ b/src/Pages/Search.js
@@ -142,7 +142,7 @@ export default function Search(props) {
}, [window.history.state === null ? true : window.history.state.key, state.currentUser.id])
useEffect(() => {
- setIsLoading(true);
+ //setIsLoading(true);
collectStuff(option);
}, [resultsPerPage]);
diff --git a/src/index.css b/src/index.css
index 954a9e8f75d3224cd71757bc80193fdaad5ac914..c58acf407174355d6850f9fb9dc97e2d466826c5 100755
--- a/src/index.css
+++ b/src/index.css
@@ -17,6 +17,9 @@ 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/>.*/
body {
+ width: 100%;
+ height: 100%;
+ overflow-x: hidden;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",