Merge pull request #134 from PureHacks/pong-96

#96 added custom radio buttons to player stats page

client/public/views/partials/playerStats.html

@@ -75,20 +75,17 @@ <h2>All Player Stats</h2>
 			<div class="data-filter wgrid-6of12 wgrid-6of8 marg-r-0">
 				<div class="row">
 					<form>
-						<div class="wgrid-2of12 wgrid-2of8 marg-l-0">
-							<label for="allTime">
-								<input type="radio" ng-model="filter" value="allTime" id="allTime" name="allTime">All time
-							</label>
+						<div class="radio-container wgrid-2of12 wgrid-2of8 marg-l-0">
+							<input type="radio" ng-model="filter" value="allTime" id="allTime" name="allTime">
+							<label for="allTime">All time</label>
 						</div>
-						<div class="wgrid-2of12 wgrid-2of8">
-							<label for="monthly">
-								<input type="radio" ng-model="filter" value="monthly" id="monthly" name="monthly">Monthly
-							</label>
+						<div class="radio-container wgrid-2of12 wgrid-2of8">
+							<input type="radio" ng-model="filter" value="monthly" id="monthly" name="monthly">
+							<label for="monthly">Monthly</label>
 						</div>
-						<div class="wgrid-2of12 wgrid-2of8 marg-r-0">
-							<label for="weekly">
-								<input type="radio" ng-model="filter" value="weekly" id="weekly" name="weekly">Weekly
-							</label>
+						<div class="radio-container wgrid-2of12 wgrid-2of8 marg-r-0">
+							<input type="radio" ng-model="filter" value="weekly" id="weekly" name="weekly">
+							<label for="weekly">Weekly</label>
 						</div>
 					</form>
 				</div>
@@ -98,13 +95,13 @@ <h2>All Player Stats</h2>
 	<section class="all-stats wgrid-12of12 wgrid-4of4 wgrid-8of8">
 		<table ts-wrapper>
 			<thead class="uppercase">
-				<th class="name" ts-criteria="name" ts-default>Player</th>
-				<th class="games" ts-criteria="gameCount">Total Games</th>
-				<th class="wins" ts-criteria="wins">Wins</th>
-				<th class="losses" ts-criteria="losses">Losses</th>
-				<th class="win-rate" ts-criteria="winRate">Win Rate</th>
-				<th class="rank" ts-criteria="rank">All-time Rank</th>
-				<th class="compare-check">Head to Head Stats</th>
+				<th class="name" ts-criteria="name" ts-default>Player<span class="arrow"></span></th>
+				<th class="games" ts-criteria="gameCount">Total Games<span class="arrow"></span></th>
+				<th class="wins" ts-criteria="wins">Wins<span class="arrow"></span></th>
+				<th class="losses" ts-criteria="losses">Losses<span class="arrow"></span></th>
+				<th class="win-rate" ts-criteria="winRate">Win Rate<span class="arrow"></span></th>
+				<th class="rank" ts-criteria="rank">All-time Rank<span class="arrow"></span></th>
+				<th class="compare-check">Head to Head Stats<span class="arrow"></span></th>
 			</thead>
 			<tr ng-repeat="player in allPlayerStats | tablesort" ts-repeat>
 				<td class="name">

client/stylus/playerStats.styl

@@ -1,31 +1,42 @@
 
 .player-stats
 	margin 0 auto
-	
+
 	.top-row
 		height 93px
 		padding 26px 0
 		postion relative
 		@import "compareOverlay"
 		form
-			label
-				display block
-				padding 13px 12px
+			.radio-container
 				position relative
-				height 45px
-				border 1px solid $font-dark-blue
+				label
+					display block
+					padding 13px 12px
+					height 45px
+					border 1px solid $font-dark-blue
+					cursor pointer
 				input[type=radio]
 					position absolute
 					right 14px
 					top 14px
-
+					opacity 0
+				input[type=radio] + label
+					background url("/assets/img/radio-uncheck.png") no-repeat
+					background-position-x 130px
+					background-position-y 10px
+				input[type=radio]:checked + label
+					background url("/assets/img/radio-checked.png") no-repeat
+					background-position-x 130px
+					background-position-y 10px
+
 	.all-stats
 		margin-bottom 20px
 		table
 			background-color $white
 			width 100%
 			height 600px
-			
+
 			.name
 				width 	26.5%
 			.games
@@ -40,24 +51,45 @@
 				width 	16%
 			.compare-check
 				width 	16%
-
-
+
 			thead
 				background-color $header-bg-grey
 				th
 					height 37px
 					text-align center
+					position relative
+					transition 0.5s ease
 					&:first-child
 						text-align left
 						padding-left 20px
 
-					.tablesort-sortable
+					&.tablesort-sortable
 						-webkit-user-select none
-					    -khtml-user-select none
-					    -moz-user-select none
-					    -o-user-select none
-					    user-select none
-					    cursor pointer
+						-khtml-user-select none
+						-moz-user-select none
+						-o-user-select none
+						user-select none
+						cursor pointer
+						&:hover
+							border-bottom solid 3px $font-dark-blue
+						.arrow
+							margin-left 10px
+							margin-bottom 2px
+						&.tablesort-desc
+							.arrow
+								display inline-block
+								width 10px
+								height 7px
+								background url("/assets/img/toggle-arrow.png") no-repeat
+								margin-bottom 1px
+						&.tablesort-asc
+							.arrow
+								display inline-block
+								width 10px
+								height 7px
+								background url("/assets/img/toggle-arrow.png") no-repeat
+								transform rotate(180deg)
+
 			tr
 				&:last-child td
 					border-bottom none
@@ -79,14 +111,14 @@
 					.checkbox-container
 						margin-left 0%
 						margin-right 17px
-					
+
 					img 
 						display block
 						border-radius 50%
 					span
 						display block
 						vertical-align middle
-						
+
 					.checkbox-container
 						position relative
 						label

client/stylus/typography.styl

@@ -241,7 +241,7 @@ a:hover
 			td
 				font-family Regular
 				font-size 18px
-				&:first-child, &:nth-child(5)
+				&:first-child
 					font-family Bold
 .game-history
 	.header