basic tweaks in styling in small resolutions, with graphs drawing updated in angular

angular.html

@@ -27,7 +27,9 @@
   <script src="js/libs/angular.js"></script>
 
   <script src="js/libs/jquery.flot.js"></script>
+  <!-- We do manual resize currently
   <script src="js/libs/jquery.flot.resize.js"></script>
+  -->
 
   <!-- webui core -->
   <script src="js/init.js"></script>
@@ -216,7 +218,7 @@
     <tr>
       <td class="download-progress" colspan="2" data-toggle="collapse" data-target="[data-gid={{download.gid}}] .download-detail .collapse">
 
-        <div ng-show="hasStatus(download, 'active')" class="progress progress-striped active" style="width: 100%; margin: 0; padding: 0;">
+        <div ng-show="hasStatus(download, 'active')" class="progress progress-striped" style="width: 100%; margin: 0; padding: 0;">
           <div class="bar" style="width: {{getProgress(download)}}%;"></div>
         </div>
 

css/download.css

@@ -1,5 +1,6 @@
 .download-name {
   font-size: 12px;
+  word-wrap: break-word;
 }
 .active-download, .waiting-download, .stopped-download, .download {
   width: 100%;
@@ -10,6 +11,13 @@
   box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
 }
 
+/* fix table  layout to break words */
+@media (max-width: 767px) {
+.active-download, .waiting-download, .stopped-download, .download {
+  table-layout: fixed;
+}
+}
+
 .download-graph {
   width: 80%;
   margin-top: 5px;
@@ -26,6 +34,8 @@
 }
 .stats li {
   padding: 5px;
+  margin-top: 2px;
+  margin-bottom: 2px;
 }
 
 .download-progress {

css/style.css

@@ -2,8 +2,10 @@
 .modal {
   position: absolute;
 }
-@media all and (min-width: 980px) {
+@media (min-width: 980px) {
   body {
     padding-top: 60px;
   }
 }
+
+

js/directives/dgraph.js

@@ -20,7 +20,8 @@ app.directive('dgraph', ['$', '$filter', function($, filter) {
       start = new Date
     ;
 
-    // jqplot doesnt draw graphs with no fixed height
+
+    // hack for the null height for flot elem
     elem.height(elem.width() / 2);
 
     var graph = $.plot(elem, [dconf, uconf], {
@@ -38,10 +39,10 @@ app.directive('dgraph', ['$', '$filter', function($, filter) {
     });
 
     var draw = function() {
-      var height = elem.height();
+      var width = elem.width();
-      if (height <= 0) return;
+      if (width == 0) return;
 
-      elem.height(elem.width() / 2);
+      elem.height(width / 2);
 
       graph.setData([dconf, uconf]);
       graph.resize();
@@ -74,8 +75,10 @@ app.directive('dgraph', ['$', '$filter', function($, filter) {
 
     var interval = setInterval(update, 1000);
 
+    angular.element(window).bind('resize', draw);
     elem.bind('$destroy', function() {
       clearInterval(interval);
     });
+
   };
 }]);

js/services/deps.js

@@ -1,5 +1,5 @@
 app.constant('$name', 'webui-aria2');
-app.constant('$globalTimeout', 1000);
+app.constant('$globalTimeout', 5000);
 
 app.value('$', $);
 app.value('$_', _);

js/services/rpc/jsoncall.js

@@ -20,7 +20,7 @@ app.factory('$jsoncall', ['$', '$json', '$base64', function($, JSON, base64) {
           params: params && params.length ? this.encode(params) : undefined
         },
         success: function(data) {
-          conn.avgTimeout = 3 * (new Date() - startTime);
+          conn.avgTimeout =  2000 + 3 * (new Date() - startTime);
           return success(data)
         },
         error: error,