From 58c1825372e265ccbffaaeb154882e444e271421 Mon Sep 17 00:00:00 2001
From: sayuri <smr17@inf.ufpr.br>
Date: Thu, 11 Jul 2019 12:03:53 -0300
Subject: [PATCH] =?UTF-8?q?anima=C3=A7=C3=A3o=20card=20Recursos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Components/CollectionCard.css | 23 +++++++++++++++++++----
 src/Components/ResourceCard.js    | 20 ++++++++++++++++----
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/src/Components/CollectionCard.css b/src/Components/CollectionCard.css
index 1ef143cf..c3f03c93 100644
--- a/src/Components/CollectionCard.css
+++ b/src/Components/CollectionCard.css
@@ -1,7 +1,22 @@
-.thumbnail{
-
+.animation{
+  position: absolute;
+  display: flex;
+  background-color: gray;
+  opacity: 0.6;
+  width: 0%;
+  height: 100%;
+  padding-top: 20px;
+  transition: width 2s;
+  visibility: hidden;
 }
 
-.thumbnail:hover{
-
+.animationOn{
+  position: absolute;
+  display: flex;
+  background-color: gray;
+  opacity: 0.6;
+  width: 100%;
+  height: 100%;
+  padding-top: 20px;
+  transition: width 2s;
 }
diff --git a/src/Components/ResourceCard.js b/src/Components/ResourceCard.js
index 94a7719c..0048e60c 100644
--- a/src/Components/ResourceCard.js
+++ b/src/Components/ResourceCard.js
@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import './CollectionCard.css';
 import {Container} from 'react-grid-system';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
@@ -29,11 +30,16 @@ import Video from '@material-ui/icons/OndemandVideo';
 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: "Mapa", thumb: mapa}, {label: "Outros", thumb: outros}, {label: "Software", thumb:software}, {label: "Texto", thumb:texto}, {label: "Vídeo", thumb:video}]
 
+const thumbStyle={
+
+};
+
 class ResourceCard extends Component {
   constructor(props) {
     super(props);
     this.state={
       thumbnail: this.props.thumbnail,
+      userStyle: "animation",
     };
 
   }
@@ -43,14 +49,20 @@ class ResourceCard extends Component {
       this.setState({thumbnail: aux.thumb});
     }
   }
-  handleHover(){
-    console.log("aaa");
+  onHover(){
+    this.setState({userStyle: "animationOn"});
+  }
+  onIddle(){
+    this.setState({userStyle: "animation"})
   }
   render(){
   this.renderType(this.props.type)
    return (
-     <Card onMouseEnter={this.handleHover()}>
-       <img src={this.state.thumbnail} alt="thumbnail do recurso"/>
+     <Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
+       <Container style={{padding:"0px"}}>
+       <div className={this.state.userStyle}>aaaaaaaaaaa</div>
+       <img  src={this.state.thumbnail} alt="thumbnail do recurso"/>
+       </Container>
        <CardContent style={{height: "60%", textAlign: "left", paddingBottom: "0px"}}>
          <Typography variant="body2" color="textSecondary" component="p" style={{height:"45px", overflow: "hidden", fontSize: "0.8em"}}>
            {this.props.name}
-- 
GitLab