From d3d9b6fd42d51b1d2f64cb3e829a322cfbafaf09 Mon Sep 17 00:00:00 2001
From: Florent Viard <fviard@lacie.com>
Date: Tue, 18 Feb 2014 01:10:45 +0100
Subject: [PATCH] Re-organization of the main page: mini graph is on top of
 download list (one click on it to enlarge / reduce it) + fixed message when
 nothing on download list.

---
 css/download.css        |  5 ++++-
 index.html              | 30 +++++++++++++++++++-----------
 js/directives/dgraph.js |  4 ++--
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/css/download.css b/css/download.css
index 049040b..785c90f 100644
--- a/css/download.css
+++ b/css/download.css
@@ -19,12 +19,15 @@
 }
 
 .download-graph {
-  width: 80%;
+  width: 30%;
   margin-top: 5px;
   margin-bottom: 5px;
   margin-left: auto;
   margin-right: auto;
 }
+.large-graph {
+  width: 80%;
+}
 .stats {
   margin-top: 0px;
   margin-bottom: 0px;
diff --git a/index.html b/index.html
index 40912b3..59eda5e 100755
--- a/index.html
+++ b/index.html
@@ -237,12 +237,26 @@
   <!--}}} -->
 
   <!-- {{{ downloads -->
-  <div ng-show="!totalAria2Downloads() && totalAria2Downloads() > getDownloads()" class="hero-unit">
-    <h3>Currently no downloads in line to display, use the Add download button to start downloading files!</h3>
+  <!-- Bug?? <div ng-show="!totalAria2Downloads() && totalAria2Downloads() > getDownloads()" class="hero-unit">-->
+  <div ng-show="!totalAria2Downloads()" class="hero-unit">
+    Currently no download in line to display, use the '<strong>Add</strong>' download button to start downloading files!
   </div>
 
 
+  <!-- {{{ global statistics -->
+  <h3 ng-show="totalAria2Downloads()">Global Statistics</h3>
+
+  <div ng-class="{'large-graph': large_graph}" class="download-graph"
+    dspeed="gstats.downloadSpeed"
+    uspeed="gstats.uploadSpeed"
+    dgraph ng-show="totalAria2Downloads()"
+    ng-click="large_graph = !large_graph">
+  </div>
+    <!-- }}} -->
+
+
   <!-- {{{ download template -->
+   <h3 ng-show="totalAria2Downloads()">Download List</h3>
 
   <form class="row" ng-show="(totalAria2Downloads() > pageSize) || downloadFilter.length">
     <fieldset>
@@ -555,16 +569,7 @@
   </div>
   <!-- }}} -->
 
-  <!-- {{{ global statistics -->
-  <h3 ng-show="totalAria2Downloads()">Global Statistics</h3>
 
-  <div class="download-graph"
-    dspeed="gstats.downloadSpeed"
-    uspeed="gstats.uploadSpeed"
-    dgraph ng-show="totalAria2Downloads()">
-  </div>
-
-  <!-- }}} -->
 
 </div>
 
@@ -820,5 +825,8 @@ http://ex1.com/f2.mp4 http://ex2.com/f2.mp4
 </div>
 <!-- }}} -->
 
+<!-- Bottom Padding -->
+<br /><br /><br /><br /><br />
+
 </body>
 </html>
diff --git a/js/directives/dgraph.js b/js/directives/dgraph.js
index 183f805..61bc4a0 100644
--- a/js/directives/dgraph.js
+++ b/js/directives/dgraph.js
@@ -1,5 +1,5 @@
 // graph takes dspeed and uspeed, it queries them every second and draws
-// the last 20 secs, it also takes draw as an optional attribute and only
+// the last 180 secs, it also takes draw as an optional attribute and only
 // draws the graph when it is true, if not given then graph is always drawn
 angular
 .module('webui.directives.dgraph', ['webui.filters.bytes', 'webui.services.deps'])
@@ -7,7 +7,7 @@ angular
   return function(scope, elem, attrs) {
     var canDraw = true;
 
-    var graphSize = 20
+    var graphSize = 180
       , dspeed = 0, uspeed = 0
       , dconf = {
         label: "Download Speed",