Flux - 33 - CSS Animations

StephenGrider · Jul 6, 2015 · 9bfde96 · 9bfde96
1 parent a3a6207
commit 9bfde96
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/imgur-client/sass/topic.scss b/imgur-client/sass/topic.scss
@@ -1,3 +1,16 @@
 .topic {
   text-align: center;
+
+  .image-preview {
+    animation: fadein .65s ease-out;
+
+    @keyframes fadein {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1.0;
+      }
+    }
+  }
 }
diff --git a/imgur-client/src/components/comment-box.jsx b/imgur-client/src/components/comment-box.jsx
@@ -2,9 +2,17 @@ var React = require('react');
 
 module.exports = React.createClass({
   render: function(){
-    return <div>
-      I am a comment box.
-      {this.props.comments}
-    </div>
+    return <ul className="list-group">
+      {this.renderComments()}
+    </ul>
+  },
+  renderComments: function() {
+    return this.props.comments.slice(0, 20).map(function(comment){
+      return <li className="list-group-item comment-box" key={comment.id}>
+        <span className="badge">{comment.ups}</span>
+        <h5>{comment.author}</h5>
+        {comment.comment}
+      </li>
+    })
   }
 });