responsive playerlist

use bootstrap table-class

html/playerlist.html

@@ -1,28 +1,30 @@
-<div ng-controller="PlayerListController" flex layout="column" id="PlayerListController">
+<div ng-controller="PlayerListController" id="PlayerListController">
 
-	<div class="right row">
+	<div class="row">
-		<div class="float-left">
+		<div class="col-xs-6">
-			<input ng-model="FilterText" style="width: 300px" class="form-control" placeholder="Filter..">
+			<input ng-model="FilterText" class="form-control" placeholder="Filter..">
 		</div>
-		<div class="btn-group">
+		<div class="col-xs-6">
-			<button ng-click="Refresh()" class="btn btn-default" type="button"><i class="glyphicon glyphicon-refresh"></i></button>
+			<button ng-click="Refresh()" class="btn btn-default pull-right" type="button"><span class="glyphicon glyphicon-refresh"></span></button>
 		</div>
 	</div>
 
 	<div class="row">
-		<table>
+		<div class="col-sm-12">
+			<div class="table-responsive">
+				<table class="table">
 					<thead>
 						<tr>
 							<th>Actions</th>
 
 							<th ng-click="Order( 'DisplayName' )" ng-class="SortClass( 'DisplayName' )">Username</th>
-					<th style="text-align: right" ng-click="Order( 'SteamID' )" ng-class="SortClass( 'SteamID' )">Steamid</th>
+							<th class="text-right" ng-click="Order( 'SteamID' )" ng-class="SortClass( 'SteamID' )">Steamid</th>
-					<th style="text-align: right" ng-click="Order( 'VoiationLevel' )" ng-class="SortClass( 'VoiationLevel' )">Voilation</th>
+							<th class="text-right" ng-click="Order( 'VoiationLevel' )" ng-class="SortClass( 'VoiationLevel' )">Voilation</th>
-					<th style="text-align: right" ng-click="Order( 'CurrentLevel' )" ng-class="SortClass( 'CurrentLevel' )">Level</th>
+							<th class="text-right" ng-click="Order( 'CurrentLevel' )" ng-class="SortClass( 'CurrentLevel' )">Level</th>
-					<th style="text-align: right" ng-click="Order( 'UnspentXp' )" ng-class="SortClass( 'UnspentXp' )">XP</th>
+							<th class="text-right" ng-click="Order( 'UnspentXp' )" ng-class="SortClass( 'UnspentXp' )">XP</th>
-					<th style="text-align: right" ng-click="Order( 'Address' )" ng-class="SortClass( 'Address' )">Address</th>
+							<th class="text-right" ng-click="Order( 'Address' )" ng-class="SortClass( 'Address' )">Address</th>
-					<th ng-click="Order( 'Ping' )" ng-class="SortClass( 'Ping' )">Ping</th>
+							<th class="text-right" ng-click="Order( 'Ping' )" ng-class="SortClass( 'Ping' )">Ping</th>
-					<th ng-click="Order( 'ConnectedSeconds' )" ng-class="SortClass( 'ConnectedSeconds' )">Duration</th>
+							<th class="text-right" ng-click="Order( 'ConnectedSeconds' )" ng-class="SortClass( 'ConnectedSeconds' )">Duration</th>
 						</tr>
 					</thead>
 					<tr ng-repeat="line in Players | orderBy: OrderBy | filter:FilterText" href="#/{{address}}/player/{{line.SteamID}}/">
@@ -64,32 +66,35 @@
 							<a href="#/{{address}}/player/{{line.SteamID}}/">{{line.SteamID}}</a>
 						</td>
 
-				<td style="text-align: right" ng-class="{fade: line.VoiationLevel == 0 }">
+						<td class="text-right" ng-class="{fade: line.VoiationLevel == 0 }">
 							{{line.VoiationLevel}}
 						</td>
 
-				<td style="text-align: right">
+						<td class="text-right">
 							{{line.CurrentLevel}}
 						</td>
 
-				<td style="text-align: right">
+						<td class="text-right">
 							<a href="#/{{address}}/player/{{line.SteamID}}/xp">{{line.UnspentXp}}</a>
 						</td>
 
-				<td style="text-align: right">
+						<td class="text-right">
 							{{line.Address}}
 						</td>
 
-				<td class="md-list-item-text" style="text-align: right">{{line.Ping}}</td>
+						<td class="text-right">
+							{{line.Ping}}
+						</td>
 
-				<td style="text-align: right">
+						<td class="text-right">
 							{{line.ConnectedSeconds | SecondsToDuration}}
 						</td>
 
 						<md-divider></md-divider>
 					</tr>
 				</table>
-
+			</div>
+		</div>
 	</div>
 
 </div>

js/playerlist.js

@@ -14,20 +14,20 @@ function PlayerListController( $scope, rconService, $interval )
 		});
 	}
 
-	$scope.Order = function( o )
+	$scope.Order = function( field )
 	{
-		if ( $scope.OrderBy == o )
+		if ( $scope.OrderBy === field )
 		{
-			o = '-' + o;
+			field = '-' + field;
 		}
 
-		$scope.OrderBy = o;
+		$scope.OrderBy = field;
 	}
 
-	$scope.SortClass = function( o )
+	$scope.SortClass = function( field )
 	{
-		if ( $scope.OrderBy == o ) return "active";
+		if ( $scope.OrderBy === field ) return "sorting";
-		if ( $scope.OrderBy == "-" + o ) return "active descending";
+		if ( $scope.OrderBy === "-" + field ) return "sorting descending";
 
 		return null;
 	}
@@ -41,10 +41,10 @@ function PlayerListController( $scope, rconService, $interval )
 
 	rconService.InstallService( $scope, $scope.Refresh )
 
-	var timer = $interval( function ()
+	// var timer = $interval( function ()
-	{
+	// {
-		//$scope.Refresh();
+	// 	//$scope.Refresh();
-	}.bind( this ), 1000 );
+	// }.bind( this ), 1000 );
 
-	$scope.$on( '$destroy', function () { $interval.cancel( timer ) } )
+	//$scope.$on( '$destroy', function () { $interval.cancel( timer ) } )
 }

rcon.css

@@ -21,19 +21,11 @@ a:hover
 	text-decoration: none;
 }
 
-.right 
-{
-	text-align: right;
-}
-
 .center
 {
 	text-align: center;
 }
 
-
-.float-left { float: left; }
-
 #ConsoleController .Output
 {
 	font-family: monospace;
@@ -68,53 +60,22 @@ a:hover
   background-color: #428bca;
 }
 
-table
-{
-	border-collapse: collapse;
-	border-spacing: 0;
-	width: 100%;
-}
-
 .fade 
 {
 	opacity: 0.5;
 }
 
-th, td 
+.table > tbody > tr:hover
 {
-		padding: 5px 8px;
+	background-color: rgba( 255, 255, 255, 0.3 );
-		border-bottom: 1px solid #414758;
 }
 
-th.active 
+.table > thead > tr > th.sorting 
 {
 	color: #1bc98e;
 	border-color: #1bc98e;
 }
 
-th 
-{
-	border-bottom: 2px solid #414758;
-	border-radius: 10px;
-}
-
-th:first-child 
-{
-    border-radius: 6px;
-}
-
-th:last-child 
-{
-    border-radius: 0 6px 0 0;
-}
-
-th:only-child
-{
-    border-radius: 6px 6px 0 0;
-}
-
-
-
 .btn-default, .btn-default:active, .form-control
 {
 	background: rgba( 255, 255, 255, 0.3 );