Alex/flox
1
0
Fork 0
mirror of https://github.com/devfake/flox.git synced 2024-11-15 06:32:34 +01:00
Code Issues Releases Wiki Activity

listen on rate change for color change

Browse Source
This commit is contained in:
devfake 2016-02-24 15:46:21 +01:00
parent 5b174b9e5a
commit 782ef43d7d
2 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/app/partials/flox-item.js
View File

@ -8,7 +8,8 @@ class FloxItem extends React.Component {
super(props); super(props);
this.state = { this.state = {
removed: false removed: false,
ratingColor: this.formatRating()
} }
} }
@ -32,7 +33,7 @@ class FloxItem extends React.Component {
</div> </div>
<div className="item-image"> <div className="item-image">
{this.props.image ? <img src={this.props.image} /> : <i className="icon-no-image"></i>} {this.props.image ? <img src={this.props.image} /> : <i className="icon-no-image"></i>}
<div className={"rating rating-" + this.formatRating()}></div> <div className={"rating rating-" + this.state.ratingColor}></div>
</div> </div>
<div className="item-content"> <div className="item-content">
@ -44,9 +45,7 @@ class FloxItem extends React.Component {
); );
} }
formatRating() { formatRating(rating = this.props.data.rating) {
let rating = this.props.data.rating;
return rating.replace('.', '-'); return rating.replace('.', '-');
} }
@ -69,7 +68,9 @@ class FloxItem extends React.Component {
} }
onHoverRate(value) { onHoverRate(value) {
console.log(value); this.setState({
ratingColor: value ? this.formatRating(value.toString()) : this.formatRating()
});
} }
} }

2
client/assets/sass/_item.scss
View File

@ -48,7 +48,7 @@
} }
} }
.rating-0-5 { background: linear-gradient(#000 20%, #ac1b1b 25%); } .rating-0-5 { background: linear-gradient(#ac1b1b 20%, #000 25%); }
.rating-1 { background: #ac1b1b; } .rating-1 { background: #ac1b1b; }
.rating-1-5 { background: linear-gradient(#c15e33 20%, #ac1b1b 25%); } .rating-1-5 { background: linear-gradient(#c15e33 20%, #ac1b1b 25%); }
.rating-2 { background: #c15e33; } .rating-2 { background: #c15e33; }