implement star-rating design

client/app/partials/flox-item.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Api from '../api';
+import Rating from 'react-rating';
 
 class FloxItem extends React.Component {
 
@@ -20,6 +21,11 @@ class FloxItem extends React.Component {
         <div className="item-hidden-content">
           <span className="item-date">{this.props.released().year}</span>
           <span className="item-title">{title}</span>
+
+          <div className="icons-rating">
+            <Rating empty='fa fa-star-o fa-2x' full='fa fa-star fa-2x' fractions={2} onRate={this.onHoverRate.bind(this)} />
+          </div>
+
           <i className="icon-close-small" onClick={this.closeHiddenContent.bind(this)}></i>
           <a href={"https://www.youtube.com/results?search_query=" + title + " Trailer"} target="_blank" className="trailer-btn">Watch Trailer</a>
           <span className={'remove-btn' + (this.state.removed ? ' reset' : '')} onClick={this.handleItemRemove.bind(this)}>{this.state.removed ? "Bring it back" : "Remove from list"}</span>
@@ -61,6 +67,10 @@ class FloxItem extends React.Component {
       alert("Error");
     });
   }
+
+  onHoverRate(value) {
+    console.log(value);
+  }
 }
 
 export default FloxItem;

client/assets/sass/_item.scss

@@ -99,14 +99,18 @@
   width: 444px;
   height: 360px;
   padding: 20px;
-  display: none;
+  opacity: 0;
+  visibility: hidden;
   position: absolute;
   top: -20px;
   left: -20px;
   z-index: 100;
+  transition: opacity .2s ease-in-out 0s;
 
   .active & {
-    display: block;
+    opacity: 1;
+    visibility: visible;
+    box-shadow: 0 0 8px 5px rgba(0,0,0,.5);
   }
 }
 
@@ -236,4 +240,20 @@
   &:active {
     opacity: .8;
   }
+}
+
+.icons-rating {
+  position: absolute;
+  font-size: 16px;
+  color: #cf9c12;
+  left: 230px;
+  bottom: 100px;
+
+  span {
+    margin: 0 4px 0 0;
+
+    &:last-child {
+      margin: 0;
+    }
+  }
 }

client/package.json

@@ -9,7 +9,7 @@
     "laravel-elixir-spritesmith": "^0.3.*",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
-    "react-icon-rating": "^0.2.0",
+    "react-rating": "^0.2.0",
     "react-router": "^2.0.0"
   }
 }

client/views/app.blade.php

@@ -6,6 +6,7 @@
     <meta name="csrf_token" content="{{ csrf_token() }}">
     <title>Flox - Collect your Movies, Series and Anime watch list</title>
 
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
     <link href="{{ url('assets/favicon.ico') }}" rel="icon" type="image/x-icon">
     <link href="{{ url('assets/css/app.css') }}" rel="stylesheet">