Moved miscallenous info out of the main page. Added "server info" and "about" modals as settings sub-menus.

index.html

@@ -170,6 +170,18 @@
               ng-click="changeGSettings()"
               href="#"><i class="icon-wrench"></i> Global Settings</a>
           </li>
+
+          <li>
+            <a
+              ng-click="showServerInfo()"
+              href="#"><i class="icon-info-sign"></i> Server info</a>
+          </li>
+
+          <li>
+            <a
+              ng-click="showAbout()"
+              href="#"><i class="icon-question-sign"></i> About and contribute</a>
+          </li>
         </ul>
       </li>
     </ul>
@@ -554,26 +566,6 @@
 
   <!-- }}} -->
 
-  <!-- {{{ miscellaneous -->
-  <h3>Miscellaneous</h3>
-  <b>Aria2 Version {{miscellaneous.version}}</b>
-  <br><br>
-  <b>Features Enabled</b>
-  <ul>
-    <li
-      ng-repeat="feature in miscellaneous.enabledFeatures">
-      <span>{{feature}}</span>
-    </li>
-  </ul>
-  <br>
-  <p>
-    To download the latest version of the project, add issues or to contribute back head on to
-    <a href="https://github.com/ziahamza/webui-aria2">http://github.com/ziahamza/webui-aria2</a>
-    <br>
-    Or you can open the latest version in browser through <a href="http://ziahamza.github.io/webui-aria2">http://ziahamza.github.io/webui-aria2</a>
-  </p>
-  <!-- }}} -->
-
 </div>
 
 <!-- }}} -->
@@ -779,6 +771,52 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
 <!-- }}} -->
 
 
+<!-- {{{ server info modal -->
+<div class="modal hide" modal="server_info.shown">
+  <div class="modal-header">
+    <button class="close" ng-click="server_info.close()">x</button>
+    <h3>Aria2 server info</h3>
+  </div>
+  <div class="modal-body">
+      <b>Aria2 Version {{miscellaneous.version}}</b>
+      <br><br>
+      <b>Features Enabled</b>
+        <ul>
+        <li
+          ng-repeat="feature in miscellaneous.enabledFeatures">
+          <span>{{feature}}</span>
+        </li>
+        </ul>
+  </div>
+  <div class="modal-footer">
+    <button class="btn" ng-click="server_info.close()">Close</button>
+  </div>
+</div
+<!-- }}} -->
+
+<!-- {{{ about modal -->
+<div class="modal hide" modal="about.shown">
+  <div class="modal-header">
+    <button class="close" ng-click="about.close()">x</button>
+    <h3>About and contribute</h3>
+  </div>
+  <div class="modal-body">
+      <p>
+        To download the latest version of the project,<br />
+         add issues or to contribute back head on to:<br />
+        <a href="https://github.com/ziahamza/webui-aria2">http://github.com/ziahamza/webui-aria2</a>
+        <br /><br />
+        Or you can open the latest version in browser through:<br />
+        <a href="http://ziahamza.github.io/webui-aria2">http://ziahamza.github.io/webui-aria2</a>
+      </p>
+  </div>
+  <div class="modal-footer">
+    <button class="btn" ng-click="about.close()">Close</button>
+  </div>
+</div
+<!-- }}} -->
+
+
 </div>
 <!-- }}} -->
 

js/ctrls/modal.js

@@ -143,9 +143,26 @@ angular
     };
   });
 
+  _.each(['server_info', 'about'], function(name) {
+    scope[name] =  {
+      shown: false,
+      init: function(cb) {
+        this.shown = this.open =  true;
+      },
+
+      close: function() {
+        this.shown = this.open = false;
+      }
+    };
+  });
+
+  rpc.once('getVersion', [], function(data) {
+      scope.miscellaneous = data[0];
+      });
+  
   _.each([
     'getUris', 'getTorrents', 'getMetalinks',
-    'settings', 'connection'
+    'settings', 'connection', 'server_info', 'about'
   ], function(name) {
     modals.register(name, function(cb) {
       if (scope[name].open) {

js/ctrls/nav.js

@@ -118,4 +118,17 @@ angular
       });
     });
   };
+
+  scope.showServerInfo = function() {
+    modals.invoke(
+      'server_info'
+    );
+  };
+
+  scope.showAbout = function() {
+    modals.invoke(
+      'about'
+    );
+  }
+  
 }]);