Right-float the main download graph

css/download.css

@@ -31,14 +31,13 @@
 }
 
 .download-graph {
-  width: 30%;
+  width: 35%;
   margin-top: 1em;
   margin-bottom: 1em;
-  margin-left: auto;
-  margin-right: auto;
+  margin-right: 30px;
 }
 .large-graph {
-  width: 80%;
+  width: 66%;
 }
 .stats {
   margin-top: 0px;

css/style.css

@@ -41,6 +41,16 @@
   font-family: sans-serif;
 }
 
+#download-graph {
+  float: right;
+}
+@media (max-width: 767px) {
+  #download-graph {
+    float: none;
+    width: 100%;
+  }
+}
+
 #download-filter {
   margin: 0;
   height: auto;

index.html

@@ -226,22 +226,18 @@
     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 hidden-phone"
+  <div ng-class="{'large-graph': large_graph}" id="download-graph" class="download-graph"
     dspeed="gstats.downloadSpeed"
     uspeed="gstats.uploadSpeed"
     dgraph ng-show="totalAria2Downloads()"
     draw="true"
     ng-click="large_graph = !large_graph">
   </div>
-    <!-- }}} -->
-
+  <!-- }}} -->
 
   <!-- {{{ download template -->
-   <h3 ng-show="totalAria2Downloads()">Download List</h3>
+  <h3 ng-show="totalAria2Downloads()">Download List</h3>
 
   <form ng-show="(totalAria2Downloads() > pageSize) || downloadFilter.length" id="filters">
     <fieldset>
@@ -280,6 +276,7 @@
     </fieldset>
   </form>
 
+
   <table
     ng-repeat="download in getDownloads()"
     class="row download" data-gid="{{download.gid}}">

js/directives/dgraph.js

@@ -4,6 +4,7 @@
 angular
 .module('webui.directives.dgraph', ['webui.filters.bytes', 'webui.services.deps'])
 .directive('dgraph', ['$', '$filter', '$parse', function($, filter, parse) {
+  var ratio = 0.4;
   var xfmt = "%H:%M:%S";
   var yTicks = 7; // Number of y-axis ticks (sans 0)
   var yTickBase = 10240; // y-axis ticks must be a multiple of this (bytes).
@@ -37,7 +38,7 @@ angular
     ;
 
     // hack for the null height for flot elem
-    elem.height(elem.width() / 2);
+    elem.height(elem.width() * ratio);
 
     var graph = $.plot(elem, [dconf, uconf], {
       legend: {
@@ -84,7 +85,7 @@ angular
       var width = elem.width();
       if (width == 0) return;
 
-      elem.height(width / 2);
+      elem.height(width * ratio);
 
       graph.setData([dconf, uconf]);
       graph.resize();