1
0
mirror of https://github.com/devfake/flox.git synced 2024-11-15 06:32:34 +01:00

listen on rate change for color change

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

View File

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

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-5 { background: linear-gradient(#c15e33 20%, #ac1b1b 25%); }
.rating-2 { background: #c15e33; }