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>
|
||||
Reference in New Issue
Block a user