From 334961fe106802d37449ce9db767fe17cd96fb43 Mon Sep 17 00:00:00 2001
From: Jakob Borg <jakob@nym.se>
Date: Wed, 8 Jan 2014 13:52:17 +0100
Subject: [PATCH] Footer with links

---
 gui/index.html | 143 ++++++++++++++++++++++++++++---------------------
 1 file changed, 81 insertions(+), 62 deletions(-)
diff --git a/gui/index.html b/gui/index.html
index 72900d4fc..f049c8f35 100644
--- a/gui/index.html
+++ b/gui/index.html
@@ -11,9 +11,20 @@
 <title>syncthing</title>
 <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
 <style type="text/css">
-body {
+html, body {
+    height: 100%;
+}
+#wrap{
     padding-top: 20px;
-    padding-bottom: 20px;
+    min-height: 100%;
+    height: auto;
+    margin: 0 auto -50px;
+    padding: 20px 0 50px 0;
+}
+#footer {
+    height: 50px;
+    padding: 12px;
+    background-color: #f5f5f5;
 }
 
 .header {
@@ -28,75 +39,83 @@ body {
 </head>
 
 <body ng-controller="SyncthingCtrl">
-<div class="container">
-    <div class="header">
-        <h3 class="text-muted">syncthing&emsp;<small>|</small>&emsp;<small>{{version}}</small></h3>
-    </div>
+<div id="wrap">
+    <div class="container">
+        <div class="header">
+            <h3 class="text-muted">syncthing</h3>
+        </div>
 
-    <div class="row">
-        <div class="col-md-12">
-            <h2>Synchronization</h2>
-            <div class="progress">
-                <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
-                    ng-class="{'progress-bar-success': model.needBytes === 0, 'progress-bar-info': model.needBytes !== 0}"
-                    style="width: {{100 * model.inSyncBytes / model.globalBytes | number:2}}%;">
+        <div class="row">
+            <div class="col-md-12">
+                <h2>Synchronization</h2>
+                <div class="progress">
+                    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
+                        ng-class="{'progress-bar-success': model.needBytes === 0, 'progress-bar-info': model.needBytes !== 0}"
+                        style="width: {{100 * model.inSyncBytes / model.globalBytes | number:2}}%;">
                         {{100 * model.inSyncBytes / model.globalBytes | number:0}}%
+                    </div>
+                </div>
+                <p ng-show="model.needBytes > 0">Need {{model.needFiles | alwaysNumber}} files, {{model.needBytes | binary}}B</p>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-6">
+                <h1>Repository Status</h1>
+
+                <p>Cluster contains {{model.globalFiles | alwaysNumber}} files, {{model.globalBytes | binary}}B
+                <span class="text-muted">(+{{model.globalDeleted | alwaysNumber}} delete records)</span></p>
+
+                <p>Local repository has {{model.localFiles | alwaysNumber}} files, {{model.localBytes | binary}}B
+                <span class="text-muted">(+{{model.localDeleted | alwaysNumber}} delete records)</span></p>
+
+                <div ng-show="model.needFiles > 0">
+                    <h2>Files to Synchronize</h2>
+                    <table class="table table-condensed table-striped">
+                        <tr ng-repeat="file in need track by $index">
+                            <td><abbr title="{{file.Name}}">{{file.ShortName}}</abbr></td>
+                            <td class="text-right">{{file.Size | binary}}B</td>
+                        </tr>
+                    </table>
                 </div>
             </div>
-            <p ng-show="model.needBytes > 0">Need {{model.needFiles | alwaysNumber}} files, {{model.needBytes | binary}}B</p>
-        </div>
-    </div>
-
-    <div class="row">
-        <div class="col-md-6">
-            <h1>Repository Status</h1>
-
-            <p>Cluster contains {{model.globalFiles | alwaysNumber}} files, {{model.globalBytes | binary}}B
-            <span class="text-muted">(+{{model.globalDeleted | alwaysNumber}} delete records)</span></p>
-
-            <p>Local repository has {{model.localFiles | alwaysNumber}} files, {{model.localBytes | binary}}B
-            <span class="text-muted">(+{{model.localDeleted | alwaysNumber}} delete records)</span></p>
-
-            <div ng-show="model.needFiles > 0">
-                <h2>Files to Synchronize</h2>
-                <table class="table table-condensed table-striped">
-                    <tr ng-repeat="file in need track by $index">
-                        <td><abbr title="{{file.Name}}">{{file.ShortName}}</abbr></td>
-                        <td class="text-right">{{file.Size | binary}}B</td>
+            <div class="col-md-6">
+                <h1>Cluster Status</h1>
+                <table class="table table-condensed">
+                    <tbody>
+                    <tr ng-repeat="(node, address) in config.nodes" ng-class="{'text-primary': !!connections[node]}">
+                        <td><abbr class="text-monospace" title="{{node}}">{{node | short}}</abbr></td>
+                        <td>
+                            <span ng-show="!!connections[node]">
+                                <span class="glyphicon glyphicon-link"></span>
+                                {{connections[node].Address}}
+                            </span>
+                            <span ng-hide="!!connections[node]">
+                                <span class="glyphicon glyphicon-cog"></span>
+                                {{address}}
+                            </span>
+                        </td>
+                        <td class="text-right">
+                            <abbr title="{{connections[node].InBytesTotal | binary}}B">{{connections[node].inbps | metric}}b/s</abbr>
+                            <span class="text-muted glyphicon glyphicon-cloud-download"></span>
+                        </td>
+                        <td class="text-right">
+                            <abbr title="{{connections[node].OutBytesTotal | binary}}B">{{connections[node].outbps | metric}}b/s</abbr>
+                            <span class="text-muted glyphicon glyphicon-cloud-upload"></span>
+                        </td>
                     </tr>
+                    </tbody>
                 </table>
             </div>
         </div>
-        <div class="col-md-6">
-            <h1>Cluster Status</h1>
-            <table class="table table-condensed">
-                <tbody>
-                <tr ng-repeat="(node, address) in config.nodes" ng-class="{'text-primary': !!connections[node]}">
-                    <td><abbr class="text-monospace" title="{{node}}">{{node | short}}</abbr></td>
-                    <td>
-                        <span ng-show="!!connections[node]">
-                            <span class="glyphicon glyphicon-link"></span>
-                            {{connections[node].Address}}
-                        </span>
-                        <span ng-hide="!!connections[node]">
-                            <span class="glyphicon glyphicon-cog"></span>
-                            {{address}}
-                        </span>
-                    </td>
-                    <td class="text-right">
-                        <abbr title="{{connections[node].InBytesTotal | binary}}B">{{connections[node].inbps | metric}}b/s</abbr>
-                        <span class="text-muted glyphicon glyphicon-cloud-download"></span>
-                    </td>
-                    <td class="text-right">
-                        <abbr title="{{connections[node].OutBytesTotal | binary}}B">{{connections[node].outbps | metric}}b/s</abbr>
-                        <span class="text-muted glyphicon glyphicon-cloud-upload"></span>
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-        </div>
     </div>
-
+</div>
+<div id="footer" class="text-center">
+    syncthing {{version}}
+    | <a href="https://github.com/calmh/syncthing/releases">Latest Release</a>
+    | <a href="https://github.com/calmh/syncthing/wiki">Documentation</a>
+    | <a href="https://github.com/calmh/syncthing/issues">Bugs</a>
+    | <a href="https://github.com/calmh/syncthing">Source Code</a>
 </div>
 
 <script src="angular.min.js"></script>
