Revamp UI (fixes #185, fixes #147, fixes #136, fixes #124)

gui/app.js

@@ -128,21 +128,21 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
 
     $scope.repoClass = function (repo) {
         if (typeof $scope.model[repo] === 'undefined') {
-            return 'text-info';
+            return 'info';
         }
 
         if ($scope.model[repo].invalid !== '') {
-            return 'text-danger';
+            return 'danger';
         }
 
         var state = '' + $scope.model[repo].state;
         if (state == 'idle') {
-            return 'text-success';
+            return 'success';
         }
         if (state == 'syncing') {
-            return 'text-primary';
+            return 'primary';
         }
-        return 'text-info';
+        return 'info';
     }
 
     $scope.syncPercentage = function (repo) {
@@ -154,7 +154,7 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
         }
 
         var pct = 100 * $scope.model[repo].inSyncBytes / $scope.model[repo].globalBytes;
-        return Math.ceil(pct);
+        return Math.floor(pct);
     };
 
     $scope.nodeStatus = function (nodeCfg) {
@@ -223,6 +223,14 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
         return '?';
     };
 
+    $scope.findNode = function (nodeID) {
+        var matches = $scope.nodes.filter(function (n) { return n.NodeID == nodeID; });
+        if (matches.length != 1) {
+            return undefined;
+        }
+        return matches[0];
+    };
+
     $scope.nodeName = function (nodeCfg) {
         if (nodeCfg.Name) {
             return nodeCfg.Name;
@@ -231,15 +239,14 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
     };
 
     $scope.thisNodeName = function () {
-        var nodes = $scope.thisNode();
-        if (typeof nodes === 'undefined' || nodes.length != 1) {
+        var node = $scope.thisNode();
+        if (typeof node === 'undefined') {
             return "(unknown node)";
         }
-        var nodeCfg = nodes[0];
-        if (nodeCfg.Name) {
-            return nodeCfg.Name;
+        if (node.Name) {
+            return node.Name;
         }
-        return nodeCfg.NodeID.substr(0, 6);
+        return node.NodeID.substr(0, 6);
     };
 
     $scope.editSettings = function () {
@@ -260,6 +267,13 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
         $scope.configInSync = true;
     };
 
+    $scope.shutdown = function () {
+        $http.post(urlbase + '/shutdown').success(function () {
+            setTimeout($scope.refresh(), 250);
+        });
+        $scope.configInSync = true;
+    };
+
     $scope.editNode = function (nodeCfg) {
         $scope.currentNode = $.extend({}, nodeCfg);
         $scope.editingExisting = true;
@@ -338,11 +352,17 @@ syncthing.controller('SyncthingCtrl', function ($scope, $http) {
         for (i = 0; i < $scope.nodes.length; i++) {
             n = $scope.nodes[i];
             if (n.NodeID === $scope.myID) {
-                return [n];
+                return n;
             }
         }
     };
 
+    $scope.allNodes = function () {
+        var nodes = $scope.otherNodes();
+        nodes.push($scope.thisNode());
+        return nodes;
+    };
+
     $scope.errorList = function () {
         return $scope.errors.filter(function (e) {
             return e.Time > $scope.seenError;
@@ -570,6 +590,18 @@ syncthing.filter('chunkID', function () {
     }
 });
 
+syncthing.filter('shortPath', function () {
+    return function (input) {
+        if (input === undefined)
+            return "";
+        var parts = input.split(/[\/\\]/);
+        if (!parts || parts.length <= 3) {
+            return input;
+        }
+        return ".../" + parts.slice(parts.length-2).join("/");
+    }
+});
+
 syncthing.directive('optionEditor', function () {
     return {
         restrict: 'C',

gui/bootstrap/css/bootstrap.min.css

@@ -1 +1,7 @@
-/*! normalize.css v3.0.0 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@media print{*{text-shadow:none !important;color:#000 !important;background:transparent !important;box-shadow:none !important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100% !important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}select{background:#fff !important}.navbar{display:none}.table td,.table th{background-color:#fff !important}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000 !important}.label{border:1px solid #000}.table{border-collapse:collapse !important}.table-bordered th,.table-bordered td{border:1px solid #ddd !important}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Open Sans",Calibri,Candara,Arial,sans-serif;font-size:15px;line-height:1.42857143;color:#333333;background-color:#ffffff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#007fff;text-decoration:none}a:hover,a:focus{color:#0059b3;text-decoration:underline}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive,.thumbnail>img,.thumbnail a>img,.carousel-inner>.item>img,.carousel-inner>.item>a>img{display:block;max-width:100%;height:auto}.img-rounded{border-radius:0}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#ffffff;border:1px solid #dddddd;border-radius:0;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:21px;margin-bottom:21px;border:0;border-top:1px solid #e6e6e6}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:"Open Sans",Calibri,Candara,Arial,sans-serif;font-weight:300;line-height:1.1;color:inherit}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small{font-weight:normal;line-height:1;color:#999999}h1,.h1,h2,.h2,h3,.h3{margin-top:21px;margin-bottom:10.5px}h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small{font-size:65%}h4,.h4,h5,.h5,h6,.h6{margin-top:10.5px;margin-bottom:10.5px}h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small{font-size:75%}h1,.h1{font-size:39pxLine truncated
+/*!
+ * Bootstrap v3.1.1 (http://getbootstrap.com)
+ * Copyright 2011-2014 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+/*! normalize.css v3.0.0 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}@media print{*{text-shadow:none!important;color:#000!important;background:transparent!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100%!important}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}select{background:#fff!important}.navbar{display:none}.table td,.table th{background-color:#fff!important}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table{border-collapse:collapse!important}.table-bordered th,.table-bordered td{border:1px solid #ddd!important}}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.42857143;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#3498db;text-decoration:none}a:hover,a:focus{color:#1d6fa5;text-decoration:underline}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive,.thumbnail>img,.thumbnail a>img,.carousel-inner>.item>img,.carousel-inner>.item>a>img{display:block;max-width:100%;height:auto}.img-rounded{border-radius:3px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:3px;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:22px;margin-bottom:22px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:inherit;font-weight:400;line-height:1.1;color:inherit}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small,.h1 .small,.h2 .small,.h3 .small,.h4 .small,.h5 .small,.h6 .small{font-weight:400;line-height:1;color:#999}h1,.h1,h2,.h2,h3,.h3{margin-top:22px;margin-bottom:11px}h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small{font-size:65%}h4,.h4,h5,.h5,h6,.h6{margin-top:11px;margin-bottom:11px}h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small{font-size:75%}h1,.h1{font-size:41px}h2,.h2{font-size:34px}h3,.h3{font-size:28px}h4,.h4{font-size:20px}h5,.h5{font-size:16px}h6,.h6{font-size:14px}p{mLine truncated

gui/index.html

@@ -16,31 +16,18 @@
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     }
 
-    h1, h2, h3, h4, h5, h6 {
-      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-      font-weight: 300;
-    }
-
-    a.btn {
-      text-decoration: none;
-    }
-
     ul+h5 {
       margin-top: 1.5em;
     }
 
     .text-monospace {
-      font-family: monospace;
+      font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
     }
 
     .table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td {
       border-top: none;
     }
 
-    thead tr th {
-      text-align: center;
-    }
-
     .logo {
       margin: 0;
       padding: 0;
@@ -48,23 +35,6 @@
       position: relative;
     }
 
-    .progress {
-      height: 21px;
-      margin-bottom: inherit;
-    }
-
-    .progress .progress-bar {
-      line-height: 21px;
-      font-size: 12px;
-    }
-
-    .collapsed-visible {
-      display: none;
-    }
-    .collapsed .collapsed-visible {
-      display: inline;
-    }
-
     .list-no-bullet {
       list-style-type: none
     }
@@ -88,6 +58,14 @@
     .ng-cloak {
       display: none !important;
     }
+
+    .table th {
+      font-weight: 400;
+    }
+
+    .table td {
+      padding-left: 20px !important;
+    }
   </style>
 </head>
 
@@ -97,8 +75,21 @@
 
   <nav class="navbar navbar-top navbar-default" role="navigation">
     <div class="container">
-      <span class="navbar-brand"><img class="logo" src="st-logo-128.png" width="32" height="32" /> Syncthing<small> | {{thisNodeName()}}</small></span>
-      <button type="button" class="btn btn-primary btn-sm pull-right navbar-btn" ng-click="editSettings()"><span class="glyphicon glyphicon-cog"></span> Settings</button>
+      <span class="navbar-brand"><img class="logo" src="st-logo-128.png" width="32" height="32" /> Syncthing<small class="hidden-xs"> <span class="text-muted">|</span> {{thisNodeName()}}</small></span>
+      <ul class="nav navbar-nav navbar-right">
+      <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit&nbsp;<b class="caret"></b></a>
+          <ul class="dropdown-menu">
+            <li><a ng-click="addRepo()"><span class="glyphicon glyphicon-hdd"></span> Add Repository</a></li>
+            <li><a ng-click="addNode()"><span class="glyphicon glyphicon-globe"></span> Add Node</a></li>
+            <li class="divider"></li>
+            <li><a ng-click="editSettings()"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
+            <li class="divider"></li>
+            <li><a ng-click="shutdown()"><span class="glyphicon glyphicon-off"></span> Shutdown</a></li>
+            <li><a ng-click="restart()"><span class="glyphicon glyphicon-refresh"></span> Restart</a></li>
+          </ul>
+        </li>
+        </ul>
     </div>
   </nav>
 
@@ -128,144 +119,160 @@
       <!-- Repository list (top left) -->
 
       <div class="col-md-6">
-        <div class="panel panel-default">
-          <div class="panel-heading"><h3 class="panel-title">Repositories</h3></div>
+      <div class="panel-group" id="repositories">
+        <div class="panel panel-{{repoClass(repo.ID)}}" ng-repeat="repo in repoList()">
+          <div class="panel-heading">
+          <h3 class="panel-title">
+          <a data-toggle="collapse" data-parent="#repositories" href="#repo-{{repo.ID}}">
+          <span class="glyphicon glyphicon-hdd"></span> {{repo.Directory | shortPath}}
+          <span class="pull-right">{{repoStatus(repo.ID)}}</span>
+          </a>
+          </h3>
+          </div>
+          <div id="repo-{{repo.ID}}" class="panel-collapse collapse">
           <div class="panel-body">
-            <ul class="list-unstyled" ng-repeat="repo in repoList()">
-              <li>
-                <span class="text-monospace">{{repo.Directory}}</span>
-                <span ng-if="model[repo.ID].invalid" class="label label-danger">{{model[repo.ID].invalid}}</span>
-                <ul class="list-no-bullet">
-                  <li>
-                    <div class="li-column" title="Repository ID">
-                      <span class="text-muted glyphicon glyphicon-tag"></span>
-                      <span class="data">{{repo.ID}}</span>
-                    </div>
-                    <div class="li-column" title="Repository synchronization status">
-                      <span class="text-muted glyphicon glyphicon-comment"></span>
-                      <span class="data" ng-class="repoClass(repo.ID)">{{repoStatus(repo.ID)}}</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div class="li-column" title="Global repository files">
-                      <span class="text-muted glyphicon glyphicon-globe"></span>
-                      <span class="data">{{model[repo.ID].globalFiles | alwaysNumber}} files, {{model[repo.ID].globalBytes | binary}}B</span>
-                    </div>
-                    <div class="li-column" title="Local repository files">
-                      <span class="text-muted glyphicon glyphicon-home"></span>
-                      <span class="data">{{model[repo.ID].localFiles | alwaysNumber}} files, {{model[repo.ID].localBytes | binary}}B</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div class="li-column" title="Unsynchronized files">
-                      <span class="text-muted glyphicon glyphicon-cloud-download"></span>
-                      <span class="data">{{model[repo.ID].needFiles | alwaysNumber}} files, {{model[repo.ID].needBytes | binary}}B</span>
-                    </div>
-                    <div class="li-column">
-                      <span class="text-muted glyphicon glyphicon-cog"></span>
-                      <span class="data"><a href="" ng-click="editRepo(repo)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
-                    </div>
-                  </li>
-                </ul>
-              </li>
-            </ul>
+          <div class="table-responsive">
+            <table class="table table-condensed table-striped">
+            <tbody>
+              <tr>
+                <th><span class="glyphicon glyphicon-tag"></span> Repository ID</th>
+                <td class="text-right">{{repo.ID}}</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-folder-open"></span> Folder</th>
+                <td class="text-right">{{repo.Directory}}</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-comment"></span> Synchronization</th>
+                <td class="text-right">{{repoStatus(repo.ID)}}</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-globe"></span> Global Repository</th>
+                <td class="text-right">{{model[repo.ID].globalFiles | alwaysNumber}} files, {{model[repo.ID].globalBytes | binary}}B</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-home"></span> Local Repository</th>
+                <td class="text-right">{{model[repo.ID].localFiles | alwaysNumber}} files, {{model[repo.ID].localBytes | binary}}B</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-cloud-download"></span> Out of Sync</th>
+                <td class="text-right">{{model[repo.ID].needFiles | alwaysNumber}} files, {{model[repo.ID].needBytes | binary}}B</td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-lock"></span> Master Repository</th>
+                <td class="text-right">
+                <span ng-if="repo.ReadOnly">Yes</span>
+                <span ng-if="!repo.ReadOnly">No</span>
+                </td>
+              </tr>
+              <tr>
+                <th><span class="glyphicon glyphicon-globe"></span> Shared With</th>
+                <td class="text-right">
+                <span ng-repeat="n in repo.Nodes">
+                {{nodeName(findNode(n.NodeID))}}<span ng-if="!$last">, </span>
+                </span>
+                </td>
+              </tr>
+            </tbody>
+            </table>
+            </div>
+          <span class="pull-right"><a class="btn btn-sm btn-primary" href="" ng-click="editRepo(repo)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
           </div>
-          <div class="panel-footer">
-            <button type="button" class="pull-right btn btn-sm btn-default" ng-click="addRepo()"><span class="glyphicon glyphicon-plus"></span> Add Repository</button>
-            <div class="clearfix"></div>
           </div>
         </div>
       </div>
+      </div>
 
       <!-- Node list (top right) -->
 
       <div class="col-md-6">
-        <div class="panel panel-default">
-          <div class="panel-heading"><h3 class="panel-title">Nodes</h3></div>
+      <div class="panel-group" id="nodes">
+        <div class="panel panel-default" ng-repeat="nodeCfg in [thisNode()]">
+          <div class="panel-heading">
+            <h3 class="panel-title">
+            <a data-toggle="collapse" data-parent="#nodes" href="#node-{{nodeCfg.NodeID}}"><span class="glyphicon glyphicon-home"></span> {{nodeName(nodeCfg)}}</a>
+            </h3>
+          </div>
+          <div id="node-{{nodeCfg.NodeID}}" class="panel-collapse collapse in">
           <div class="panel-body">
+          <div class="table-responsive">
+            <table class="table table-condensed table-striped">
+              <tbody>
+                <tr>
+                  <th><span class="glyphicon glyphicon-th"></span> RAM Utilization</th>
+                  <td class="text-right">{{system.sys | binary}}B</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-tasks"></span> CPU Utilization</th>
+                  <td class="text-right">{{system.cpuPercent | alwaysNumber | natural:1}}%</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-cloud-download"></span> Download Rate</th>
+                  <td class="text-right">{{inbps | metric}}bps</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-cloud-upload"></span> Upload Rate</th>
+                  <td class="text-right">{{outbps | metric}}bps </td>
+                </tr>
+                <tr ng-if="system.extAnnounceOK != undefined">
+                  <th><span class="glyphicon glyphicon-bullhorn"></span> Announce Server</th>
+                  <td class="text-right">
+                  <span class="data text-success" ng-if="system.extAnnounceOK">Online</span>
+                  <span class="data text-danger" ng-if="!system.extAnnounceOK">Offline</span>
+                  </td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-tag"></span> Version</th>
+                  <td class="text-right">{{version}}</td>
+                </tr>
+              </tbody>
+            </table>
+            </div>
+            <span class="pull-right"><a class="btn btn-sm btn-primary" href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
+          </div>
+          </div>
+        </div>
 
-            <h5>Peer Nodes</h5>
-            <ul class="list-unstyled" ng-repeat="nodeCfg in otherNodes()">
-              <li>
-                <span class="text-monospace">{{nodeName(nodeCfg)}}</span>
-                <ul class="list-no-bullet">
-                  <li>
-                    <div class="li-column" title="Node address">
-                      <span class="text-muted glyphicon glyphicon-link"></span>
-                      <span class="data">{{nodeAddr(nodeCfg)}}</span>
-                    </div>
-                    <div class="li-column" title="Node synchronization status">
-                      <span class="text-muted glyphicon glyphicon-comment"></span>
-                      <span class="data text-{{nodeClass(nodeCfg)}}">{{nodeStatus(nodeCfg)}}</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div class="li-column" title="Download rate">
-                      <span class="text-muted glyphicon glyphicon-cloud-download"></span>
-                      <span class="data">{{connections[nodeCfg.NodeID].inbps | metric}}bps</span>
-                    </div>
-                    <div class="li-column" title="Upload rate">
-                      <span class="text-muted glyphicon glyphicon-cloud-upload"></span>
-                      <span class="data">{{connections[nodeCfg.NodeID].outbps | metric}}bps</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div class="li-column" title="Node version">
-                      <span class="text-muted glyphicon glyphicon-tag"></span>
-                      <span class="data">{{nodeVer(nodeCfg)}}</span>
-                    </div>
-                    <div class="li-column">
-                      <span class="text-muted glyphicon glyphicon-cog"></span>
-                      <span class="data"><a href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
-                    </div>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-
-            <h5>This Node</h5>
-            <ul class="list-unstyled" ng-repeat="nodeCfg in thisNode()">
-              <li>
-                <span class="text-monospace">{{nodeName(nodeCfg)}}</span>&emsp;
-                <ul class="list-no-bullet">
-                  <li>
-                    <div class="li-column" title="Current RAM utilization">
-                      <span class="text-muted glyphicon glyphicon-th"></span>
-                      <span class="data">{{system.sys | binary}}B RAM</span>
-                    </div>
-                    <div class="li-column" title="Current CPU utilization (10 s)">
-                      <span class="text-muted glyphicon glyphicon-tasks"></span>
-                      <span class="data">{{system.cpuPercent | alwaysNumber | natural:1}}% CPU</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div class="li-column" title="Download rate (total)">
-                      <span class="text-muted glyphicon glyphicon-cloud-download"></span>
-                      <span class="data">{{inbps | metric}}bps</span>
-                    </div>
-                    <div class="li-column" title="Upload rate (total)">
-                      <span class="text-muted glyphicon glyphicon-cloud-upload"></span>
-                      <span class="data">{{outbps | metric}}bps</span>
-                    </div>
-                  </li>
-                  <li>
-                    <div ng-if="system.extAnnounceOK != undefined" class="li-column" title="Global announce server">
-                      <span class="text-muted glyphicon glyphicon-bullhorn"></span>
-                      <span class="data text-success" ng-if="system.extAnnounceOK">Online</span>
-                      <span class="data text-danger" ng-if="!system.extAnnounceOK">Offline</span>
-                    </div>
-                    <div class="li-column">
-                      <span class="text-muted glyphicon glyphicon-cog"></span>
-                      <span class="data"><a href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
-                    </div>
-                  </li>
-                </ul>
-              </li>
-            </ul>
+        <div class="panel panel-{{nodeClass(nodeCfg)}}" ng-repeat="nodeCfg in otherNodes()">
+          <div class="panel-heading">
+            <h3 class="panel-title">
+            <a data-toggle="collapse" data-parent="#nodes" href="#node-{{nodeCfg.NodeID}}">
+            <span class="glyphicon glyphicon-globe"></span>
+            {{nodeName(nodeCfg)}}
+            <span class="pull-right">{{nodeStatus(nodeCfg)}}</span>
+            </a>
+            </h3>
+          </div>
+          <div id="node-{{nodeCfg.NodeID}}" class="panel-collapse collapse">
+          <div class="panel-body">
+          <div class="table-responsive">
+            <table class="table table-condensed table-striped">
+              <tbody>
+                <tr>
+                  <th><span class="glyphicon glyphicon-link"></span> Address</th>
+                  <td class="text-right">{{nodeAddr(nodeCfg)}}</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-comment"></span> Synchronization</th>
+                  <td class="text-right">{{nodeStatus(nodeCfg)}}</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-cloud-download"></span> Download Rate</th>
+                  <td class="text-right">{{connections[nodeCfg.NodeID].inbps | metric}}bps</td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-cloud-upload"></span> Upload Rate</th>
+                  <td class="text-right">{{connections[nodeCfg.NodeID].outbps | metric}}bps </td>
+                </tr>
+                <tr>
+                  <th><span class="glyphicon glyphicon-tag"></span> Version</th>
+                  <td class="text-right">{{nodeVer(nodeCfg)}}</td>
+                </tr>
+              </tbody>
+            </table>
+            </div>
+            <span class="pull-right"><a class="btn btn-sm btn-primary" href="" ng-click="editNode(nodeCfg)"><span class="glyphicon glyphicon-pencil"></span> Edit</a></span>
           </div>
-          <div class="panel-footer">
-            <button type="button" class="pull-right btn btn-sm btn-default" ng-click="addNode()"><span class="glyphicon glyphicon-plus"></span> Add Node</button>
-            <div class="clearfix"></div>
           </div>
         </div>
       </div>
@@ -295,13 +302,12 @@
 
   <nav class="navbar navbar-default navbar-fixed-bottom hidden-xs">
     <div class="container">
-      <p class="navbar-text">{{version}}</p>
-      <ul class="nav navbar-nav navbar-right">
+      <ul class="nav navbar-nav">
         <li><a class="navbar-link" href="http://discourse.syncthing.net/">Support / Forum</a></li>
-        <li><a class="navbar-link hidden-sm" href="https://github.com/calmh/syncthing/releases">Latest Release</a></li>
+        <li><a class="navbar-link" href="https://github.com/calmh/syncthing/releases">Latest Release</a></li>
         <li><a class="navbar-link" href="http://discourse.syncthing.net/category/documentation">Documentation</a></li>
-        <li><a class="navbar-link hidden-sm" href="https://github.com/calmh/syncthing/issues">Bugs</a></li>
-        <li><a class="navbar-link hidden-sm" href="https://github.com/calmh/syncthing">Source Code</a></li>
+        <li><a class="navbar-link" href="https://github.com/calmh/syncthing/issues">Bugs</a></li>
+        <li><a class="navbar-link" href="https://github.com/calmh/syncthing">Source Code</a></li>
       </ul>
     </div>
   </nav>