From 698c5a1a0c189b8b2d0e94ffc558ca183921bf31 Mon Sep 17 00:00:00 2001
From: sayuri <smr17@inf.ufpr.br>
Date: Thu, 11 Jul 2019 13:10:56 -0300
Subject: [PATCH] =?UTF-8?q?anima=C3=A7=C3=B5es=20iniciais=20dos=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...{CollectionCard.css => CardsAnimation.css} |  7 +++----
 src/Components/CollectionCard.js              | 21 +++++++++++++------
 src/Components/ResourceCard.js                |  8 ++-----
 3 files changed, 20 insertions(+), 16 deletions(-)
 rename src/Components/{CollectionCard.css => CardsAnimation.css} (76%)

diff --git a/src/Components/CollectionCard.css b/src/Components/CardsAnimation.css
similarity index 76%
rename from src/Components/CollectionCard.css
rename to src/Components/CardsAnimation.css
index c3f03c93..aa284c81 100644
--- a/src/Components/CollectionCard.css
+++ b/src/Components/CardsAnimation.css
@@ -1,20 +1,19 @@
 .animation{
   position: absolute;
   display: flex;
-  background-color: gray;
-  opacity: 0.6;
+  background-color: inherit;
   width: 0%;
   height: 100%;
   padding-top: 20px;
   transition: width 2s;
   visibility: hidden;
+  transition-delay: 1s;
 }
 
 .animationOn{
   position: absolute;
   display: flex;
-  background-color: gray;
-  opacity: 0.6;
+  background-color: inherit;
   width: 100%;
   height: 100%;
   padding-top: 20px;
diff --git a/src/Components/CollectionCard.js b/src/Components/CollectionCard.js
index 8aa2d22d..9683dd3f 100644
--- a/src/Components/CollectionCard.js
+++ b/src/Components/CollectionCard.js
@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import './CardsAnimation.css';
 import {Container} from 'react-grid-system';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
@@ -32,16 +33,24 @@ class CollectionCard extends Component {
     super(props);
     this.state={
       thumbnail: algumaCoisa,
+      userStyle: "animation",
     };
-
+  }
+  onHover(){
+    this.setState({userStyle: "animationOn"});
+  }
+  onIddle(){
+    this.setState({userStyle: "animation"})
   }
   render(){
    return (
-     <Card>
-     <Container style={{padding:"0px"}}>
-       <img src={this.state.thumbnail} alt="thumbnail do recurso"/>
-       <div style={authorStyle}> Autor Autor <br/> authro</div>
-       <div style={pictureStyle}> fotinha </div>
+     <Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
+     <Container style={{padding:"0px", backgroundColor: "#673ab7"}}>
+     <div style={authorStyle}> Autor Autor <br/> authro</div>
+     <div style={pictureStyle}> fotinha </div>
+     <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"}}>
        </CardContent>
diff --git a/src/Components/ResourceCard.js b/src/Components/ResourceCard.js
index 0048e60c..5bbf2fe9 100644
--- a/src/Components/ResourceCard.js
+++ b/src/Components/ResourceCard.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import './CollectionCard.css';
+import './CardsAnimation.css';
 import {Container} from 'react-grid-system';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
@@ -30,10 +30,6 @@ 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);
@@ -59,7 +55,7 @@ class ResourceCard extends Component {
   this.renderType(this.props.type)
    return (
      <Card onMouseOver={this.onHover.bind(this)} onMouseOut={this.onIddle.bind(this)} >
-       <Container style={{padding:"0px"}}>
+       <Container style={{padding:"0px", backgroundColor: "#ff7f00"}}>
        <div className={this.state.userStyle}>aaaaaaaaaaa</div>
        <img  src={this.state.thumbnail} alt="thumbnail do recurso"/>
        </Container>
-- 
GitLab