responsive playerlist
use bootstrap table-class
This commit is contained in:
alexfriesen
+80
-75
@@ -1,95 +1,100 @@
|
||||
<div ng-controller="PlayerListController" flex layout="column" id="PlayerListController">
|
||||
<div ng-controller="PlayerListController" id="PlayerListController">
|
||||
|
||||
<div class="right row">
|
||||
<div class="float-left">
|
||||
<input ng-model="FilterText" style="width: 300px" class="form-control" placeholder="Filter..">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<input ng-model="FilterText" class="form-control" placeholder="Filter..">
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button ng-click="Refresh()" class="btn btn-default" type="button"><i class="glyphicon glyphicon-refresh"></i></button>
|
||||
<div class="col-xs-6">
|
||||
<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>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Actions</th>
|
||||
<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 style="text-align: 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 style="text-align: 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 ng-click="Order( 'Ping' )" ng-class="SortClass( 'Ping' )">Ping</th>
|
||||
<th 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}}/">
|
||||
<th ng-click="Order( 'DisplayName' )" ng-class="SortClass( 'DisplayName' )">Username</th>
|
||||
<th class="text-right" ng-click="Order( 'SteamID' )" ng-class="SortClass( 'SteamID' )">Steamid</th>
|
||||
<th class="text-right" ng-click="Order( 'VoiationLevel' )" ng-class="SortClass( 'VoiationLevel' )">Voilation</th>
|
||||
<th class="text-right" ng-click="Order( 'CurrentLevel' )" ng-class="SortClass( 'CurrentLevel' )">Level</th>
|
||||
<th class="text-right" ng-click="Order( 'UnspentXp' )" ng-class="SortClass( 'UnspentXp' )">XP</th>
|
||||
<th class="text-right" ng-click="Order( 'Address' )" ng-class="SortClass( 'Address' )">Address</th>
|
||||
<th class="text-right" ng-click="Order( 'Ping' )" ng-class="SortClass( 'Ping' )">Ping</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}}/">
|
||||
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="glyphicon glyphicon-cog"></span> <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="#/{{address}}/player/{{line.SteamID}}/xp">
|
||||
<span class="glyphicon glyphicon-education"></span>
|
||||
XP Info
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.steamcommunity.com/profiles/{{line.SteamID}}" target="_blank">
|
||||
<span class="glyphicon glyphicon-info-sign"></span>
|
||||
Steam Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href ng-click="KickPlayer(line.SteamID)">
|
||||
<span class="glyphicon glyphicon-trash"></span>
|
||||
Kick
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="glyphicon glyphicon-cog"></span> <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="#/{{address}}/player/{{line.SteamID}}/xp">
|
||||
<span class="glyphicon glyphicon-education"></span>
|
||||
XP Info
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.steamcommunity.com/profiles/{{line.SteamID}}" target="_blank">
|
||||
<span class="glyphicon glyphicon-info-sign"></span>
|
||||
Steam Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li>
|
||||
<a href ng-click="KickPlayer(line.SteamID)">
|
||||
<span class="glyphicon glyphicon-trash"></span>
|
||||
Kick
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<a href="#/{{address}}/player/{{line.SteamID}}/">{{line.DisplayName}}</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="#/{{address}}/player/{{line.SteamID}}/">{{line.DisplayName}}</a>
|
||||
</td>
|
||||
|
||||
<td style="text-align: right">
|
||||
<a href="#/{{address}}/player/{{line.SteamID}}/">{{line.SteamID}}</a>
|
||||
</td>
|
||||
<td style="text-align: right">
|
||||
<a href="#/{{address}}/player/{{line.SteamID}}/">{{line.SteamID}}</a>
|
||||
</td>
|
||||
|
||||
<td style="text-align: right" ng-class="{fade: line.VoiationLevel == 0 }">
|
||||
{{line.VoiationLevel}}
|
||||
</td>
|
||||
<td class="text-right" ng-class="{fade: line.VoiationLevel == 0 }">
|
||||
{{line.VoiationLevel}}
|
||||
</td>
|
||||
|
||||
<td style="text-align: right">
|
||||
{{line.CurrentLevel}}
|
||||
</td>
|
||||
<td class="text-right">
|
||||
{{line.CurrentLevel}}
|
||||
</td>
|
||||
|
||||
<td style="text-align: right">
|
||||
<a href="#/{{address}}/player/{{line.SteamID}}/xp">{{line.UnspentXp}}</a>
|
||||
</td>
|
||||
<td class="text-right">
|
||||
<a href="#/{{address}}/player/{{line.SteamID}}/xp">{{line.UnspentXp}}</a>
|
||||
</td>
|
||||
|
||||
<td style="text-align: right">
|
||||
{{line.Address}}
|
||||
</td>
|
||||
<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">
|
||||
{{line.ConnectedSeconds | SecondsToDuration}}
|
||||
</td>
|
||||
|
||||
<md-divider></md-divider>
|
||||
</tr>
|
||||
</table>
|
||||
<td class="text-right">
|
||||
{{line.ConnectedSeconds | SecondsToDuration}}
|
||||
</td>
|
||||
|
||||
<md-divider></md-divider>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
+12
-12
@@ -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 == "-" + o ) return "active descending";
|
||||
if ( $scope.OrderBy === field ) return "sorting";
|
||||
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 ()
|
||||
{
|
||||
//$scope.Refresh();
|
||||
}.bind( this ), 1000 );
|
||||
// var timer = $interval( function ()
|
||||
// {
|
||||
// //$scope.Refresh();
|
||||
// }.bind( this ), 1000 );
|
||||
|
||||
$scope.$on( '$destroy', function () { $interval.cancel( timer ) } )
|
||||
//$scope.$on( '$destroy', function () { $interval.cancel( timer ) } )
|
||||
}
|
||||
@@ -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;
|
||||
border-bottom: 1px solid #414758;
|
||||
background-color: rgba( 255, 255, 255, 0.3 );
|
||||
}
|
||||
|
||||
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 );
|
||||
|
||||
Reference in New Issue
Block a user