Improve Card Animation

Signed-off-by: Henrique V. Ehrenfried <hvehrenfried@inf.ufpr.br>

src/Components/AreasSubPages.js

@@ -78,7 +78,8 @@ class ReqResources extends Component {
                 likeCount={card.likes_count}
                 liked={card.liked}
                 rating={card.review_average}
-                author={card.author}
+                // author={card.author}
+                author={card.publisher.name}
                 tags={card.educational_stages}
                 href={"/recurso/" + card.id}
                 downloadableLink={card.default_attachment_location}
@@ -99,7 +100,7 @@ class ReqResources extends Component {
                 likeCount={card.likes_count}
                 liked={card.liked}
                 rating={card.review_average}
-                author={card.author}
+                author={card.publisher.name}
                 tags={card.educational_stages}
                 href={"/recurso/" + card.id}
                 downloadableLink={card.default_attachment_location}
@@ -120,7 +121,7 @@ class ReqResources extends Component {
                 likeCount={card.likes_count}
                 liked={card.liked}
                 rating={card.review_average}
-                author={card.author}
+                author={card.publisher.name}
                 tags={card.educational_stages}
                 href={"/recurso/" + card.id}
                 downloadableLink={card.default_attachment_location}

src/Components/ResourceCard.css

+/* transform: translateX(-1284.61px); visibility: hidden; */
+/* .slideContentLinkAfterActivefalse{
+    transform: translateX(-1285.55px);
+    position: relative;
+}*/
+.slideContentLinkAfterActivetrue{
+    position: absolute;
+    transform: none;
+    /* transition: transform 1000ms cubic-bezier(0,0,0.2,1) 0ms; */
+
+} 
+
+.slideContentLinkBeforeActivefalse{
+    position: absolute;
+    transform: none;
+    transition: transform 500ms cubic-bezier(0,0,0.2,1) 0ms;
+   
+}
+.slideContentLinkBeforeActivetrue{
+    transform: translateX(-1285.55px);
+    position: relative;
+}
\ No newline at end of file

src/Components/ResourceCardFunction.js

@@ -53,6 +53,8 @@ import {getDefaultThumbnail} from './HelperFunctions/getDefaultThumbnail'
 import GetIconByName from './UploadPageComponents/GetIconByName'
 import {getAxiosConfig} from './HelperFunctions/getAxiosConfig'
 
+import "./ResourceCard.css";
+
 const types = [{label: "Animação", thumb: animacao}, {label: "Apresentação", thumb: apresentacao},
 {label: "Aplicativo" , thumb: aplicativo}, {label: "Áudio", thumb: audio}, {label: "Vazio", thumb: vazio}, {label: "Imagem", thumb: imagem}, {label: "Gráfico", thumb: grafico}, {label: "Jogo", thumb: jogo}, {label: "Livro", thumb: livro}, {label:"Livro digital", thumb: livro}, {label: "Mapa", thumb: mapa}, {label: "Outros", thumb: outros}, {label: "Software Educacional", thumb:software}, {label: "Software", thumb:software}, {label: "Texto", thumb:texto}, {label: "Vídeo", thumb:video}]
 
@@ -63,6 +65,7 @@ export default function ResourceCardFunction (props) {
     const [slideIn, setSlide] = useState(false)
     const controlSlide = () => {setSlide(!slideIn)}
     const [liked, toggleLiked] = useState(props.liked)
+    const [publisher, setPublisher] = useState(undefined)
 
     useEffect( () => {
         //decide which thumbnail to use
@@ -121,16 +124,22 @@ export default function ResourceCardFunction (props) {
                 <CardReaDiv>
                     <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
                         {
-                            props.published &&
-                            <Slide direction="right" in={slideIn}>
-                                <Link to={props.href} className="text">
-                                    {SlideAnimationContent()}
-                                </Link>
-                            </Slide>
+                            // props.published &&
+                            <Slide  direction="left" in={slideIn} timeout={500}>
+                                <div className={`slideContentLinkAfterActive${slideIn}`} style={{}}>
+                                    <Link to={props.href} className="text" >
+                                        {SlideAnimationContent()}
+                                    </Link>
+
+                                </div>
+                            </Slide > 
                         }
-                        <Link to={props.href}> {/*add link to learningObject*/}
-                            <img className="img-cover" src={thumbnail} alt="learning object thumbnail"/>
-                        </Link>
+                        <div className={`slideContentLinkBeforeActive${slideIn}`} style={{}}>
+
+                            <Link to={props.href}> 
+                                <img className="img-cover" src={thumbnail} alt="learning object thumbnail"/>
+                            </Link>
+                        </div>
                     </Header>
 
                     <Description>
@@ -227,10 +236,9 @@ export const EnviadoPor = styled.div`
 const AvatarDiv = styled.div`
     vertical-align : middle;
     border : 0;
-
+    width : 45px;
     img {
-        height : 40px;
-        width : 40px;
+        width : 45px;
         border : 0;
         vertical-align : middle;
         border-radius : 50%;
@@ -242,9 +250,9 @@ const SlideContentDiv = styled.div`
     padding : 10px;
     width : 100%;
     height : 100%;
-    position : absolute;
-    display : flex;
-    flex-direction : column;
+    // position : absolute;
+    // display : flex;
+    // flex-direction : column;
 `
 /*--------------------------------------------*/