Moegirl iOS APP Statics Rank Style

rank.all.js

!function(){$(function(){$(".moe-group").each(function(){var o,r=$(this),e=parseInt(r.children(".moe-rank").text()),n=parseInt(r.children(".moe-prev").text());if(isNaN(n))o="fresh";else switch(Math.sign(e-n)){case-1:o="up";break;case 0:o="eq";break;case 1:o="down"}r.children(".moe-rank").addClass(o).prepend('<span class="rank-diff-icon"></span>')}),$("head").append('<style>.moe-rank .rank-diff-icon{position:relative;display:inline-block;margin-right:.5em;width:1em;height:1em;line-height:1em;border-radius:100%;text-align:center;color:#fff;vertical-align:-2px;box-sizing:border-box}.moe-rank.up .rank-diff-icon{background-color:#f94343}.moe-rank.down .rank-diff-icon{background-color:#11ba47}.moe-rank.eq .rank-diff-icon{background-color:#43a5f9}.moe-rank.fresh .rank-diff-icon{background-color:#f94343}.moe-group:nth-child(1) .rank-diff-icon{border:1px solid #eaad2b;background-color:#f4bc45;box-shadow:#f4bc45 0 0 5px}.moe-group:nth-child(2) .rank-diff-icon{border:1px solid #a0a0a0;background-color:#cdcdcd;box-shadow:#cdcdcd 0 0 5px}.moe-group:nth-child(3) .rank-diff-icon{border:1px solid #814509;background-color:#9b5612;box-shadow:#9b5612 0 0 5px}.moe-group:nth-child(1) .moe-rank{color:#f4bc45}.moe-group:nth-child(2) .moe-rank{color:#cdcdcd}.moe-group:nth-child(3) .moe-rank{color:#9b5612}.moe-rank .rank-diff-icon:before,.moe-rank.fresh .rank-diff-icon:after{content:" ";display:block;position:absolute;left:50%;top:50%;margin-left:-.5em;margin-top:-.5em}.moe-rank.fresh .rank-diff-icon:before,.moe-rank.up .rank-diff-icon:before{border-style:solid;border-width:0 .3em .6em;border-color:#fff transparent;margin-left:-.25em;margin-top:-.35em}.moe-rank.down .rank-diff-icon:before,.moe-rank.fresh .rank-diff-icon:after{border-style:solid;border-width:.6em .3em 0;border-color:#fff transparent;margin-left:-.25em;margin-top:-.25em}.moe-rank.eq .rank-diff-icon:before{width:.7em;height:.3em;background:#fff;margin-left:-.3em;margin-top:-.15em}.moe-rank.fresh .rank-diff-icon:before{border-width:0 .3em .6em;margin-top:-.35em}.moe-rank.fresh .rank-diff-icon:after{border-width:.6em .3em 0;margin-top:-.15em}</style>')})}();

rank.css

.moe-rank .rank-diff-icon {
	position: relative;
	display: inline-block;
	margin-right: .5em;
	width: 1em;
	height: 1em;
	line-height: 1em;
	border-radius: 100%;
	text-align: center;
	color: #fff;
	vertical-align: -2px;
	box-sizing: border-box;
}

.moe-rank.up   .rank-diff-icon  { background-color: #f94343; }
.moe-rank.down .rank-diff-icon  { background-color: #11ba47; }
.moe-rank.eq .rank-diff-icon    { background-color: #43a5f9; }
.moe-rank.fresh .rank-diff-icon { background-color: #f94343; }

.moe-group:nth-child(1) .rank-diff-icon { border: 1px solid #eaad2b; background-color: #f4bc45; box-shadow: #f4bc45 0 0 5px; }
.moe-group:nth-child(2) .rank-diff-icon { border: 1px solid #a0a0a0; background-color: #cdcdcd; box-shadow: #cdcdcd 0 0 5px; }
.moe-group:nth-child(3) .rank-diff-icon { border: 1px solid #814509; background-color: #9b5612; box-shadow: #9b5612 0 0 5px; }

.moe-group:nth-child(1) .moe-rank { color: #f4bc45; }
.moe-group:nth-child(2) .moe-rank { color: #cdcdcd; }
.moe-group:nth-child(3) .moe-rank { color: #9b5612; }

.moe-rank .rank-diff-icon:before, .moe-rank.fresh .rank-diff-icon:after {
	content: ' ';
	display:block;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -.5em;
	margin-top: -.5em;
}

/* ^ */
.moe-rank.up .rank-diff-icon:before, .moe-rank.fresh .rank-diff-icon:before {
	border-style: solid;
	border-width: 0 .3em .6em;
	border-color: #fff transparent;
	margin-left: -.25em;
	margin-top: -.35em;
}

/* v */
.moe-rank.down .rank-diff-icon:before, .moe-rank.fresh .rank-diff-icon:after {
	border-style: solid;
	border-width: .6em .3em 0;
	border-color: #fff transparent;
	margin-left: -.25em;
	margin-top: -.25em;
}

/* - */
.moe-rank.eq .rank-diff-icon:before {
	width: .7em;
	height: .3em;
	background: #fff;
	margin-left: -.3em;
	margin-top: -.15em;
}

/* * */
.moe-rank.fresh .rank-diff-icon:before {
	border-width: 0 .3em .6em;
	margin-top: -.35em;
}
.moe-rank.fresh .rank-diff-icon:after {
	border-width: .6em .3em 0;
	margin-top: -.15em;
}

rank.js

$('.moe-group').each(function () {
	var row = $(this);
	
	var rank_today = parseInt(row.children('.moe-rank').text());
	var rank_yesterday = parseInt(row.children('.moe-prev').text());
	
	var rank_level;
	if (isNaN(rank_yesterday)) {
		rank_level = 'fresh';
	} else {
		switch (Math.sign(rank_today - rank_yesterday)) {
			case -1: rank_level = 'up'; break;
			case  0: rank_level = 'eq'; break;
			case  1: rank_level = 'down'; break;
		}
	}
	
	row.children('.moe-rank').addClass(rank_level).prepend('<span class="rank-diff-icon"></span>');
});