Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 10, 2015 10:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/10b91873bcf1cf87ccdc to your computer and use it in GitHub Desktop.
Save anonymous/10b91873bcf1cf87ccdc to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/fadulo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://fb.me/react-0.14.3.js"></script>
<script src="http://fb.me/react-dom-0.14.3.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.rating-table {
border: 0;
padding: 0;
margin-top: 3px;
}
.rating-table tr.avg-ratings {
font-size: 16px;
}
.rating-table tr.avg-ratings td {
width: 5em;
}
.rating-table tr.avg-ratings td .rating-number {
font-size: 48px;
line-height: 48px;
padding: 0 0.5em;
text-align: center;
}
.rating-table tr.avg-ratings td .rating-star {
position: relative;
width: calc(1em * 5);
padding: 0;
margin: 6px auto;
}
.rating-table tr.avg-ratings td .rating-star .fa.fa-star {
width: 1em;
}
.rating-table tr.avg-ratings td .rating-star .bg {
position: relative;
z-index: 0;
white-space: nowrap;
color: #eeeeee;
}
.rating-table tr.avg-ratings td .rating-star .fg {
position: absolute;
top: 0;
z-index: 1;
white-space: nowrap;
overflow-x: hidden;
color: #fec558;
}
.rating-table tr.avg-ratings td .rating-count {
font-size: 11px;
line-height: 1;
color: #757575;
text-align: center;
}
.rating-table td {
background-color: transparent;
border: 0;
padding: 0;
}
.rating-table td.stars {
width: 2.5em;
text-align: left;
font-size: 12px;
vertical-align: baseline;
}
.rating-table td.stars i {
width: auto;
color: #b7bfca;
}
.rating-table td.stars .star-count {
display: inline-block;
vertical-align: baseline;
text-align: left;
font-size: 11px;
}
.rating-table td.bar {
height: 17px;
line-height: 17px;
}
.rating-table td.bar .bar-bg {
width: 100%;
height: 17px;
display: inline-block;
background-color: #eeeeee;
}
.rating-table td.bar .bar-bg .bar-fg {
height: 100%;
border: 1px solid transparent;
box-sizing: border-box;
}
.rating-table td.bar .bar-bg .bar-fg.star-5 {
background-color: #9adbb8;
border-color: #9adbb8;
}
.rating-table td.bar .bar-bg .bar-fg.star-4 {
background-color: #d2e8b5;
border-color: #d2e8b5;
}
.rating-table td.bar .bar-bg .bar-fg.star-3 {
background-color: #fde6ac;
border-color: #fde6ac;
}
.rating-table td.bar .bar-bg .bar-fg.star-2 {
background-color: #f7c498;
border-color: #f7c498;
}
.rating-table td.bar .bar-bg .bar-fg.star-1 {
background-color: #efb3a8;
border-color: #efb3a8;
}
.rating-table td.rating-count {
width: 1em;
padding-left: 10px;
font-size: 11px;
vertical-align: baseline;
text-align: left;
color: #757575;
}
</style>
</head>
<body>
<script id="jsbin-javascript">
"use strict";
var ratings = [300, 234, 13, 1, 0];
var RatingBarsTable = React.createClass({
displayName: "RatingBarsTable",
getAverageRating: function getAverageRating() {
// var averageRating = this.props.ratings.reduce((rating, sum) {
// return rating + sum;
// }, 0)
return 0;
},
renderFiveStars: function renderFiveStars() {
return '12345'.split().map(function (index) {
return React.createElement("i", { className: "fa fa-star", key: index });
});
},
renderBars: function renderBars() {
var sum = this.props.ratings.reduce(function (value, sum) {
return sum + value;
}, 0);
return this.props.ratings.map(function (rating, index) {
return React.createElement(
"tr",
{ key: index },
React.createElement(
"td",
{ className: "stars" },
React.createElement("i", { className: "fa fa-star" }),
React.createElement(
"span",
{ className: "star-count" },
5 - index
)
),
React.createElement(
"td",
{ className: "bar" },
React.createElement(
"div",
{ className: "bar-bg" },
React.createElement("div", { className: "star-" + index + " bar-fg", style: { width: rating / sum + "%"
} })
)
),
React.createElement(
"td",
{ className: "rating-count" },
rating
)
);
});
},
render: function render() {
var averageRating = this.getAverageRating();
var sum = this.props.ratings.reduce(function (value, sum) {
return sum + value;
}, 0);
return React.createElement(
"table",
{ className: "rating-table", cellspacing: "0", cellpadding: "0" },
React.createElement(
"tr",
{ className: "avg-ratings" },
React.createElement(
"td",
{ rowspan: "6" },
React.createElement(
"div",
{ className: "rating-number" },
averageRating
),
React.createElement(
"div",
{ className: "rating-star" },
React.createElement(
"div",
{ className: "bg" },
this.renderFiveStars()
),
React.createElement(
"div",
{ className: "fg", style: {
width: "calc(1em * 5 * " + averageRating + " / 5)"
} },
this.renderFiveStars()
)
),
React.createElement(
"div",
{ className: "rating-count" },
sum,
" ratings"
)
)
),
this.renderBars()
);
}
});
ReactDOM.render(React.createElement(RatingBarsTable, { ratings: ratings }), document.body);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-0.14.3.js"><\/script>
<script src="//fb.me/react-dom-0.14.3.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.rating-table {
@rating-bar-star-five-color: #9adbb8;
@rating-bar-star-four-color: #d2e8b5;
@rating-bar-star-three-color: #fde6ac;
@rating-bar-star-two-color: #f7c498;
@rating-bar-star-one-color: #efb3a8;
@rating-bar-star-bg-color: #eee;
@star-light-color: #fec558;
@star-dark-color: #eee;
@star-gray-color: #b7bfca;
@small-text-color: #757575;
@small-text-size: 11px;
border: 0;
padding: 0;
margin-top: 3px;
tr.avg-ratings {
// in this case, 1em = 16px
font-size: 16px;
td {
width: 5em;
.rating-number {
font-size: 48px;
line-height: 48px;
padding: 0 0.5em;
text-align: center;
}
.rating-star {
position: relative;
width: ~"calc(1em * 5)";
padding: 0;
margin: 6px auto;
.fa.fa-star {
width: 1em;
}
.bg {
position: relative;
z-index: 0;
white-space: nowrap;
color: @star-dark-color;
}
.fg {
position: absolute;
top: 0;
z-index: 1;
white-space: nowrap;
overflow-x: hidden;
color: @star-light-color;
// say, if you want 4.5 out of 5 rating:
// width: calc(1em * 5 * rating / 5);
}
}
.rating-count {
font-size: @small-text-size;
line-height: 1;
color: @small-text-color;
text-align: center;
}
}
}
td {
background-color: transparent;
border: 0;
padding: 0;
&.stars {
width: 2.5em;
text-align: left;
font-size: 12px;
vertical-align: baseline;
i {
width: auto;
color: @star-gray-color;
}
.star-count {
display: inline-block;
vertical-align: baseline;
text-align: left;
font-size: @small-text-size;
}
}
&.bar {
height: 17px;
line-height: 17px;
.bar-bg {
width: 100%;
height: 17px;
display: inline-block;
background-color: @rating-bar-star-bg-color;
.bar-fg {
height: 100%;
border: 1px solid transparent;
box-sizing: border-box;
&.star-5 {
background-color: @rating-bar-star-five-color;
border-color: @rating-bar-star-five-color;
}
&.star-4 {
background-color: @rating-bar-star-four-color;
border-color: @rating-bar-star-four-color;
}
&.star-3 {
background-color: @rating-bar-star-three-color;
border-color: @rating-bar-star-three-color;
}
&.star-2 {
background-color: @rating-bar-star-two-color;
border-color: @rating-bar-star-two-color;
}
&.star-1 {
background-color: @rating-bar-star-one-color;
border-color: @rating-bar-star-one-color;
}
}
}
}
&.rating-count {
width: 1em;
padding-left: 10px;
font-size: @small-text-size;
vertical-align: baseline;
text-align: left;
color: @small-text-color;
}
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var ratings = [
300,
234,
13,
1,
0
];
var RatingBarsTable = React.createClass({
getAverageRating: function() {
// var averageRating = this.props.ratings.reduce((rating, sum) {
// return rating + sum;
// }, 0)
return 0;
},
renderFiveStars: function() {
return '12345'.split().map(function(index) {
return (<i className="fa fa-star" key={index} />);
});
},
renderBars: function() {
var sum = this.props.ratings.reduce(function(value, sum) {
return sum + value;
}, 0);
return this.props.ratings.map(function(rating, index) {
return (
<tr key={index}>
<td className="stars">
<i className="fa fa-star"/>
<span className="star-count">{ 5 - index }</span>
</td>
<td className="bar"><div className="bar-bg"><div className={`star-${index} bar-fg`} style={{width: `${rating / sum}%`
}}></div></div></td>
<td className="rating-count">{ rating }</td>
</tr>
);
});
},
render: function() {
var averageRating = this.getAverageRating();
var sum = this.props.ratings.reduce(function(value, sum) {
return sum + value;
}, 0);
return (
<table className="rating-table" cellspacing="0" cellpadding="0">
<tr className="avg-ratings">
<td rowspan="6">
<div className="rating-number">{ averageRating }</div>
<div className="rating-star">
<div className="bg">{this.renderFiveStars()}</div>
<div className="fg" style={{
width: `calc(1em * 5 * ${averageRating} / 5)`
}}>{this.renderFiveStars()}</div>
</div>
<div className="rating-count">{ sum } ratings</div>
</td>
</tr>
{this.renderBars()}
</table>
);
}
});
ReactDOM.render(<RatingBarsTable ratings={ratings} />, document.body);
</script></body>
</html>
Raw
jsbin.fadulo.css
.rating-table {
border: 0;
padding: 0;
margin-top: 3px;
}
.rating-table tr.avg-ratings {
font-size: 16px;
}
.rating-table tr.avg-ratings td {
width: 5em;
}
.rating-table tr.avg-ratings td .rating-number {
font-size: 48px;
line-height: 48px;
padding: 0 0.5em;
text-align: center;
}
.rating-table tr.avg-ratings td .rating-star {
position: relative;
width: calc(1em * 5);
padding: 0;
margin: 6px auto;
}
.rating-table tr.avg-ratings td .rating-star .fa.fa-star {
width: 1em;
}
.rating-table tr.avg-ratings td .rating-star .bg {
position: relative;
z-index: 0;
white-space: nowrap;
color: #eeeeee;
}
.rating-table tr.avg-ratings td .rating-star .fg {
position: absolute;
top: 0;
z-index: 1;
white-space: nowrap;
overflow-x: hidden;
color: #fec558;
}
.rating-table tr.avg-ratings td .rating-count {
font-size: 11px;
line-height: 1;
color: #757575;
text-align: center;
}
.rating-table td {
background-color: transparent;
border: 0;
padding: 0;
}
.rating-table td.stars {
width: 2.5em;
text-align: left;
font-size: 12px;
vertical-align: baseline;
}
.rating-table td.stars i {
width: auto;
color: #b7bfca;
}
.rating-table td.stars .star-count {
display: inline-block;
vertical-align: baseline;
text-align: left;
font-size: 11px;
}
.rating-table td.bar {
height: 17px;
line-height: 17px;
}
.rating-table td.bar .bar-bg {
width: 100%;
height: 17px;
display: inline-block;
background-color: #eeeeee;
}
.rating-table td.bar .bar-bg .bar-fg {
height: 100%;
border: 1px solid transparent;
box-sizing: border-box;
}
.rating-table td.bar .bar-bg .bar-fg.star-5 {
background-color: #9adbb8;
border-color: #9adbb8;
}
.rating-table td.bar .bar-bg .bar-fg.star-4 {
background-color: #d2e8b5;
border-color: #d2e8b5;
}
.rating-table td.bar .bar-bg .bar-fg.star-3 {
background-color: #fde6ac;
border-color: #fde6ac;
}
.rating-table td.bar .bar-bg .bar-fg.star-2 {
background-color: #f7c498;
border-color: #f7c498;
}
.rating-table td.bar .bar-bg .bar-fg.star-1 {
background-color: #efb3a8;
border-color: #efb3a8;
}
.rating-table td.rating-count {
width: 1em;
padding-left: 10px;
font-size: 11px;
vertical-align: baseline;
text-align: left;
color: #757575;
}
Raw
jsbin.fadulo.js
"use strict";
var ratings = [300, 234, 13, 1, 0];
var RatingBarsTable = React.createClass({
displayName: "RatingBarsTable",
getAverageRating: function getAverageRating() {
// var averageRating = this.props.ratings.reduce((rating, sum) {
// return rating + sum;
// }, 0)
return 0;
},
renderFiveStars: function renderFiveStars() {
return '12345'.split().map(function (index) {
return React.createElement("i", { className: "fa fa-star", key: index });
});
},
renderBars: function renderBars() {
var sum = this.props.ratings.reduce(function (value, sum) {
return sum + value;
}, 0);
return this.props.ratings.map(function (rating, index) {
return React.createElement(
"tr",
{ key: index },
React.createElement(
"td",
{ className: "stars" },
React.createElement("i", { className: "fa fa-star" }),
React.createElement(
"span",
{ className: "star-count" },
5 - index
)
),
React.createElement(
"td",
{ className: "bar" },
React.createElement(
"div",
{ className: "bar-bg" },
React.createElement("div", { className: "star-" + index + " bar-fg", style: { width: rating / sum + "%"
} })
)
),
React.createElement(
"td",
{ className: "rating-count" },
rating
)
);
});
},
render: function render() {
var averageRating = this.getAverageRating();
var sum = this.props.ratings.reduce(function (value, sum) {
return sum + value;
}, 0);
return React.createElement(
"table",
{ className: "rating-table", cellspacing: "0", cellpadding: "0" },
React.createElement(
"tr",
{ className: "avg-ratings" },
React.createElement(
"td",
{ rowspan: "6" },
React.createElement(
"div",
{ className: "rating-number" },
averageRating
),
React.createElement(
"div",
{ className: "rating-star" },
React.createElement(
"div",
{ className: "bg" },
this.renderFiveStars()
),
React.createElement(
"div",
{ className: "fg", style: {
width: "calc(1em * 5 * " + averageRating + " / 5)"
} },
this.renderFiveStars()
)
),
React.createElement(
"div",
{ className: "rating-count" },
sum,
" ratings"
)
)
),
this.renderBars()
);
}
});
ReactDOM.render(React.createElement(RatingBarsTable, { ratings: ratings }), document.body);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment