q3aql/webui-aria2
q3aql/webui-aria2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Right-float the main download graph

Browse Source
This commit is contained in:
Nils Maier 2014-02-24 05:55:04 +01:00
parent 8eed4e162f
commit a773d03dc4
4 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/download.css
View File

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

10
css/style.css
View File

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

11
index.html
View File

@ -226,22 +226,18 @@
Currently no download in line to display, use the '<strong>Add</strong>' download button to start downloading files! Currently no download in line to display, use the '<strong>Add</strong>' download button to start downloading files!
</div> </div>
<!-- {{{ global statistics --> <!-- {{{ global statistics -->
<h3 ng-show="totalAria2Downloads()">Global Statistics</h3> <div ng-class="{'large-graph': large_graph}" id="download-graph" class="download-graph"
<div ng-class="{'large-graph': large_graph}" class="download-graph hidden-phone"
dspeed="gstats.downloadSpeed" dspeed="gstats.downloadSpeed"
uspeed="gstats.uploadSpeed" uspeed="gstats.uploadSpeed"
dgraph ng-show="totalAria2Downloads()" dgraph ng-show="totalAria2Downloads()"
draw="true" draw="true"
ng-click="large_graph = !large_graph"> ng-click="large_graph = !large_graph">
</div> </div>
<!-- }}} --> <!-- }}} -->
<!-- {{{ download template --> <!-- {{{ 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"> <form ng-show="(totalAria2Downloads() > pageSize) || downloadFilter.length" id="filters">
<fieldset> <fieldset>
@ -280,6 +276,7 @@
</fieldset> </fieldset>
</form> </form>
<table <table
ng-repeat="download in getDownloads()" ng-repeat="download in getDownloads()"
class="row download" data-gid="{{download.gid}}"> class="row download" data-gid="{{download.gid}}">

5
js/directives/dgraph.js
View File

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