From 39960aa897d5eb6c8bb858760230e37e10135a21 Mon Sep 17 00:00:00 2001
From: alexfriesen <friesen.alex.home@gmail.com>
Date: Fri, 21 Apr 2017 15:45:55 +0200
Subject: [PATCH] move disconnect button to nav-header

moved disconnect button to nav-header
fix navbar (responsive again)
replace custon classes with bootstap classes
---
 index.html        | 41 ++++++++++++++++++++++++++---------------
 js/rconService.js |  1 +
 rcon.css          |  1 +
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 59b4e8d..1286fbe 100644
--- a/index.html
+++ b/index.html
@@ -15,43 +15,57 @@
     <nav class="navbar navbar-default" ng-controller="ServerInfoController" ng-show="Connected">
       <div class="container">
         <div class="navbar-header">
-          <a class="navbar-brand" href="#">{{info.Hostname}}</a>
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-header" aria-expanded="false">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
 
+          <a class="navbar-brand" href="#">{{info.Hostname}}</a>
+        </div>
+
+        <div class="collapse navbar-collapse" id="navbar-collapse-header">
           <ul class="nav navbar-nav">
             <li>
-              <div class="navbar-info" title="Uptime">
+              <p class="navbar-text" title="Uptime">
                 <span class="glyphicon glyphicon-time"></span>
                 {{info.Uptime|SecondsToDuration}}
-              </div>
+              </p>
             </li>
             <li>
-              <div class="navbar-info" title="Map Name">
+              <p class="navbar-text" title="Map Name">
                 <span class="glyphicon glyphicon-globe"></span>
                 {{info.Map}}
-              </div>
+              </p>
             </li>
             <li>
-              <div class="navbar-info" title="Current Players/Maximum Players">
+              <p class="navbar-text" title="Current Players/Maximum Players">
                 <span class="glyphicon glyphicon-user"></span>
                 {{info.Players|number}}/{{info.MaxPlayers|number}}
-              </div>
+              </p>
             </li>
             <li>
-              <div class="navbar-info" title="Framerate">
+              <p class="navbar-text" title="Framerate">
                 <span class="glyphicon glyphicon-hourglass"></span>
                 {{info.Framerate|number}}fps
-              </div>
+              </p>
             </li>
             <li>
-              <div class="navbar-info" title="Entity Count">
+              <p class="navbar-text" title="Entity Count">
                 <span class="glyphicon glyphicon-oil"></span>
                 {{info.EntityCount|number}}
-              </div>
+              </p>
+            </li>
+          </ul>
+
+          <ul class="nav navbar-nav navbar-right">
+            <li>
+              <button class="btn btn-danger navbar-btn" type="button" ng-click="Disconnect()">Disconnect</button>
             </li>
           </ul>
 
         </div>
-
       </div>
     </nav>
 
@@ -65,9 +79,6 @@
           <li ng-repeat="page in pages" ng-class="{'active' : $route.current.Title == page.Title }">
             <a href="#{{Nav( page.originalPath )}}">{{page.Title}}</a>
           </li>
-          <li>
-            <a href="#" ng-click="Disconnect()">Disconnect</a>
-          </li>
         </ul>
 
       </div>
diff --git a/js/rconService.js b/js/rconService.js
index 91d3047..7750daa 100644
--- a/js/rconService.js
+++ b/js/rconService.js
@@ -1,4 +1,5 @@
 function RconService() {
+
   var ConnectionStatus = {
     'CONNECTING': 0,
     'OPEN': 1,
diff --git a/rcon.css b/rcon.css
index 97dde59..43e427b 100644
--- a/rcon.css
+++ b/rcon.css
@@ -118,6 +118,7 @@ a:hover
     color: #fff;
 }
 
+.navbar-default .navbar-nav > li > .navbar-text,
 .navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus
 {
     color: #fff;