@@ -183,7 +183,7 @@
function buildTable(data) {
/* Build each table row */
- $.each(data,function(index,item) {
+ $.each(data, function(index,item) {
buildRow(item);
});
@@ -192,23 +192,27 @@
function buildRow(item) {
+ var status = (item.complete == 1 ? 'complete' : (item.is_checking == 1 ? 'hashing' : 'incomplete'));
+
$('#torrentsTable tbody').tplAppend(item, function() {
return [
'tr', { className: 'menu' + (this.state === 0 ? ' stopped' : ''), id: this.hash }, [
'td',, [ 'img', { src: "/images/icons/" + this.mime_img + ".png" } ],
'td',, this.name,
'td',, [
- 'div', { className: 'prog-border' }, [
- 'div', { className: 'prog-bar', style: { 'width': this.percentage + "%" } }, [
+ 'div', { className: 'progress-container' }, [
+ 'div', { className: status, style: { 'width': this.percentage + "%" } }, [
'div', { className: 'prog-text' }, this.percentage + "%"
]
]
],
- 'td',, this.size,
- 'td',, this.remaining,
- 'td',, this.down_rate,
- 'td',, this.up_rate,
- 'td', { style: { 'text-align': 'center' } }, [ 'img', { src: "/images/icons/" + this.ratio_img + ".png" } ]
+ 'td',, this.size,
+ 'td',, this.remaining,
+ 'td',, this.down_rate,
+ 'td',, this.up_rate,
+ 'td', { className: 'ratioCell' }, [
+ 'img', { src: "/images/icons/" + this.ratio_img + ".png" }
+ ]
]
];
});
@@ -216,8 +220,10 @@
function processData(item) {
+ var status = (item.complete == 1 ? 'complete' : (item.is_checking == 1 ? 'hashing' : 'incomplete'));
+
var order = [
- "<div class='prog-border'><div class='prog-bar' style='width: " + item.percentage + "%'><div class='prog-text'>" + item.percentage + "%</div></div></div>",
+ "<div class='progress-container'><div class='" + status + "' style='width: " + item.percentage + "%'><div class='prog-text'>" + item.percentage + "%</div></div></div>",
item.size,
item.remaining,
item.down_rate,
public/javascripts/poller.js
@@ -31,29 +31,39 @@ tr.stopped {
color: #666;
}
-div.prog-border {
- width: 100px;
- height: 20px;
- background: #FFF;
- padding: 3px;
- border: 1px solid #DDD;
- }
-
-div.prog-bar {
- height: 20px;
- background: url(/images/progress_blue.gif) repeat-x;
+td.ratioCell {
+ text-align: center;
}
-div.complete {
- background: url(/images/progress_blue.gif) repeat-x;
+div.progress-container {
+ border: 1px solid #ccc;
+ width: 100px;
+ height: 20px;
+ margin: 2px 5px 2px 0;
+ padding: 1px;
+ float: left;
+ background: #FFF;
}
-div.incomplete {
- background: url(/images/progress_blue.gif) repeat-x;
+div.progress-container > div {
+ height: 20px;
}
div.prog-text {
font-family: 'Lucida Grande';
font-size: 7pt;
text-align: right;
+ font-weight: bolder;
+}
+
+div.complete {
+ background-color: #C3D9FF;
+}
+
+div.incomplete {
+ background-color: #CDEB8B;
+}
+
+div.hashing {
+ background-color: #FF7400;
}
public/stylesheets/index.css
d3496fec291382b08fa2d2b1bdf8f700c4dc2d66
Gavin Gilmour
gavin.gilmour@gmail.com
http://github.com/gaving/rtor/commit/758cd8f64df3d8e8db1b687f19a9683aba5cca38
758cd8f64df3d8e8db1b687f19a9683aba5cca38
2009-11-11T09:19:47-08:00
2009-11-11T09:19:47-08:00
pure css progress bar instead, change colour on status
c81addf2ce92c719cc1e0d171bebf323608cb0cf
Gavin Gilmour
gavin.gilmour@gmail.com