Switch to bootstrap

html/connect.html

@@ -1,56 +1,57 @@
-<md-content ng-controller="ConnectionController" layout="column" layout-align="center center" flex>
+<div ng-controller="ConnectionController" class="row">
 
-<md-card class="md-block">
+	<div class="col-md-offset-4 col-md-6 panel" style="margin-top: 128px">
 
-	<md-toolbar class="demo-toolbar md-primary">
-		<div class="md-toolbar-tools">
-			<h3 class="ng-binding">Connect</h3>
+		<h2>Connect</h2>
+
+			<div class="alert alert-danger" ng-show="LastErrorMessage != null">{{LastErrorMessage}}</div>
+
+			<p>Enter the address (including rcon port) and the rcon password below to connect.</p>
+
+			<form ng-submit="Connect()">
+				<div class="md-inline-form">
+
+
+					<div class="md-block" flex-gt-xs>
+						<label>Address</label>
+						<input required minlength=5 ng-model="Address" name="Address" class="form-control">
+					</div>
+
+					<div class="md-block" flex-gt-xs>
+						<label>Password</label>
+						<input required minlength=2 type="password" ng-model="Password" name="Password" class="form-control">
+					</div>
+
+					<div class="right">
+						<input type="checkbox" ng-model="SaveConnection">
+						Save Connection
+					</div>
+
+					<br />		<br />
+
+					<div class="center">
+						<button class="btn btn-primary" ng-click="Connect()">Connect</button>
+					</div>
+
+					<br />
+
+				</div>
+
+			</form>
 		</div>
-	</md-toolbar>
 
-	<div layout-padding layout-gt-xs="column">
-	
-		<div layout-padding>Enter the address (including rcon port) and the rcon password below to connect.</div>
+	<div class="col-md-offset-4 col-md-6 panel" style="margin-top: 64px">
 
-		<div ng-repeat="c in PreviousConnects">
-			<md-button ng-click="ConnectTo( c )">{{c.Address}}</md-button>
+		<div ng-show="PreviousConnects.length > 0">
+			<h2>Saved Connections</h2>
+			<ul ng-repeat="c in PreviousConnects">
+				<li><a ng-click="ConnectTo( c )" href="#">{{c.Address}}</a></li>
+			</ul>
 		</div>
-		
-		<div>{{LastErrorMessage}}</div>
-		
-		<form ng-submit="Connect()">
-		<div class="md-inline-form">
-		
 
-			<md-input-container class="md-block" flex-gt-xs>
-				<label>Address</label>
-				<input required minlength=5 ng-model="Address" name="Address">
-			</md-input-container>
-		  
-			<md-input-container class="md-block" flex-gt-xs>
-			<label>Password</label>
-			<input required minlength=2 type="password" ng-model="Password" name="Password">
-		  </md-input-container>
-		  
-			<section layout="row" layout-align="end end" layout-wrap>
-				<md-checkbox md-no-ink aria-label="Save Connection" ng-model="SaveConnection" class="md-primary">
-            Save Connection
-          </section>
-		
-<br/>		<br/>		
-		  
-		<section layout="row" layout-align="end end" layout-wrap>
-		  <md-button class="md-raised md-primary" ng-click="Connect()">Connect</md-button>
-		</section>
-		
-		</div>
-		
-
-		</form>
-		
 	</div>
-	
 
-	
-</md-card>
-</md-content>
+
+
+	</div>
+</div>

html/console.html

@@ -1,21 +1,11 @@
-<div ng-controller="ConsoleController" flex layout="column" id="ConsoleController">
+<div ng-controller="ConsoleController" id="ConsoleController">
 
-    <md-content flex id="vertical-container" class="Output"><div ng-repeat="line in Output" ng-class="line.Class">{{line.Message}}</div></md-content>
+    <div id="vertical-container" style="height: 600px" class="Output scrollable"><div ng-repeat="line in Output" ng-class="line.Class">{{line.Message}}</div></div>
 
 	<form ng-submit="SubmitCommand()" class="md-inline-form">
-		<md-toolbar class="Input">
-		  <div class="md-toolbar-tools">
-	  
-			<span flex>
-				<input ng-model="Command" style="width: 100%">
-			</span>
-		
-			<md-button class="md-icon-button" aria-label="Settings" ng-click="SubmitCommand()">
-				<md-icon md-menu-origin md-svg-icon="image/arrow-right-bold-hexagon-outline.svg"></md-icon>
-			</md-button>
-
-		  </div>
-		</md-toolbar>
+			<div>
+				<input class="form-control" ng-model="Command" style="width: 100%">
+			</div>
 	</form>
 
 </div>

html/playerlist.html

@@ -1,56 +1,63 @@
 <div ng-controller="PlayerListController" flex layout="column" id="PlayerListController">
-<md-content flex id="vertical-container">
-	<md-list>
-			<md-list-item class="" ng-repeat="line in Players | filter : FilterText" href="#/{{address}}/player/{{line.SteamID}}/">
-				<div flex layout="row">
-					<div flex class="md-list-item-text">
-						<h3><a href="#/{{address}}/player/{{line.SteamID}}/">{{line.DisplayName}}</a></h3>
-					</div>
-				</div>
 
-				<div flex="20"style="text-align: right">
-					{{line.SteamID}}	 <span>{{line.OwnerSteamID}}</span>		
-				</div>
-				
-				<div flex="5"style="text-align: right">
-					{{line.VoiationLevel}}			
-				</div>
-								
-				<div flex="10"style="text-align: right">
-					Level: {{line.CurrentLevel}}			
-				</div>
-				
-				<div flex="10"style="text-align: right">
-					XP: <a href="#/{{address}}/player/{{line.SteamID}}/xp">{{line.UnspentXp}}</a>
-				</div>
-				
-				<div flex="20"style="text-align: right">
-					{{line.Address}}		
-				</div>
+	<div class="right row">
+		<div class="float-left">
+			<input ng-model="FilterText" style="width: 300px" 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>
+	</div>
 
-				<div flex="10" class="md-list-item-text" style="text-align: right">Ping {{line.Ping}}</div>
-				
-				<div flex="10" style="text-align: right">
+	<div class="row">
+		<table>
+			<thead>
+				<tr>
+					<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}}/">
+				<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" ng-class="{fade: line.VoiationLevel == 0 }">
+					{{line.VoiationLevel}}
+				</td>
+
+				<td style="text-align: right">
+					{{line.CurrentLevel}}
+				</td>
+
+				<td style="text-align: right">
+					<a href="#/{{address}}/player/{{line.SteamID}}/xp">{{line.UnspentXp}}</a>
+				</td>
+
+				<td style="text-align: right">
+					{{line.Address}}
+				</td>
+
+				<td class="md-list-item-text" style="text-align: right">{{line.Ping}}</td>
+
+				<td style="text-align: right">
 					{{line.ConnectedSeconds | SecondsToDuration}}
-				</div>
-				
-				<md-divider></md-divider>			
-			</md-list-item>
-	</md-list>
-</md-content>
+				</td>
 
- <md-toolbar class="Input">
-      <div class="md-toolbar-tools">
-	  
-		<span flex>
-			<input ng-model="FilterText" style="width: 100%">
-		</span>
-		
-		<md-button class="md-icon-button" aria-label="Settings" ng-click="SubmitCommand()">
-			<md-icon md-menu-origin md-svg-icon="image/arrow-right-bold-hexagon-outline.svg"></md-icon>
-        </md-button>
+				<md-divider></md-divider>
+			</tr>
+		</table>
 
-      </div>
-    </md-toolbar>
+	</div>
 
 </div>