add title in download task page

app/scripts/langs/en-US.js

@@ -20,6 +20,12 @@
             'Stopped': 'Stopped',
             'Settings': 'Settings',
             'AriaNg Settings': 'AriaNg Settings',
+            'File Name': 'File Name',
+            'File Size': 'File Size',
+            'Completed Percent': 'Percent',
+            'Remain Time': 'Remain',
+            'Download Speed': 'Download Speed',
+            'Files': 'Files',
             'Language': 'Language',
             'Aria2 RPC Host': 'Aria2 RPC Host',
             'Aria2 RPC Port': 'Aria2 RPC Port',

app/scripts/langs/zh-CN.js

@@ -12,7 +12,7 @@
             'Default': '默认',
             'By File Name': '按文件名',
             'By File Size': '按文件大小',
-            'By Completed Percent': '按完成度',
+            'By Completed Percent': '按进度',
             'By Remain Time': '按剩余时间',
             'Download': '下载',
             'Downloading': '正在下载',
@@ -20,6 +20,12 @@
             'Stopped': '已停止',
             'Settings': '系统设置',
             'AriaNg Settings': 'AriaNg 设置',
+            'File Name': '文件名',
+            'File Size': '大小',
+            'Completed Percent': '进度',
+            'Remain Time': '剩余时间',
+            'Download Speed': '下载速度',
+            'Files': '个文件',
             'Language': '语言',
             'Aria2 RPC Host': 'Aria2 RPC 主机',
             'Aria2 RPC Port': 'Aria2 RPC 端口',

app/styles/aria-ng.css

@@ -253,16 +253,20 @@ td {
     margin-right: 15px;
 }
 
-.task-table > div.row {
+.task-table .task-table-title {
+    font-size: 12px;
+}
+
+.task-table > .task-table-body > div.row {
     padding: 8px;
     border-top: 1px solid #ddd;
 }
 
-.task-table > div.row:nth-of-type(odd) {
+.task-table > .task-table-body > div.row:nth-of-type(odd) {
     background-color: #f9f9f9;
 }
 
-.task-table > div.row:hover {
+.task-table > .task-table-body > div.row:hover {
     background-color: #f5f5f5;
 }
 
@@ -271,7 +275,7 @@ td {
     display: block;
 }
 
-.task-table .task-volumn {
+.task-table .task-files {
     font-size: 12px;
     display: block;
 }
@@ -280,11 +284,19 @@ td {
     margin-bottom: 0;
 }
 
-.task-table .task-last-time, .task-table .task-seeders {
+.task-table .task-last-time, .task-table .task-seeders, .task-table .task-last-time + .task-download-speed {
     color: #888;
     font-size: 12px;
 }
 
+.task-table .task-seeders, .task-table .task-last-time + .task-download-speed {
+    margin-top: 1px;
+}
+
+.task-table .task-last-time + .task-download-speed {
+    padding-left: 20px;
+}
+
 .task-table .task-download-speed {
     font-size: 12px;
 }

app/views/list.html

@@ -1,27 +1,69 @@
 <section class="content no-padding">
     <div id="task-table" class="task-table">
-        <div class="row" ng-repeat="task in downloadTasks | taskOrderBy: getOrderType()" data-gid="{{task.gid}}">
+        <div class="task-table-title hidden-xs">
-            <div class="col-md-8">
+            <div class="row">
-                <span class="task-name" ng-bind="task.taskName | substring: (titleWidth / 20)" title="{{task.taskName}}"></span>
+                <div class="col-sm-8">
-                <span class="task-volumn" ng-bind="task.fileSize | readableVolumn"></span>
+                    <div class="row">
-            </div>
+                        <div class="col-sm-8">
-            <div class="col-md-2">
+                            <span translate>File Name</span>
-                <div class="progress">
+                            <i class="fa" ng-class="{'fa-sort-asc': isSetDisplayOrder('name')}"></i>
-                    <div class="progress-bar progress-bar-primary" role="progressbar"
+                        </div>
-                         aria-valuenow="{{task.completePercent}}" aria-valuemin="1"
+                        <div class="col-sm-4">
-                         aria-valuemax="100" style="width: {{task.completePercent}}%;">
+                            <span translate>File Size</span>
-                        <div ng-class="{'lower': task.completePercent < 50}"
+                            <i class="fa" ng-class="{'fa-sort-asc': isSetDisplayOrder('size')}"></i>
-                            ng-bind="(task.completePercent | percent: 2) + '%'"></div>
+                        </div>
                     </div>
                 </div>
-                <div>
+                <div class="col-sm-2">
-                    <span class="task-last-time"
+                    <div class="row">
-                          ng-bind="0 <= task.remainTime && task.remainTime < 86400? (task.remainTime | dateDuration: 'second': 'HH:mm:ss') : ('More Than One Day' | translate)"></span>
+                        <div class="col-sm-6">
-                    <span class="task-seeders pull-right" ng-bind="(task.numSeeders ? (task.numSeeders + '/') : '') + task.connections"></span>
+                            <span translate>Completed Percent</span>
+                            <i class="fa" ng-class="{'fa-sort-desc': isSetDisplayOrder('percent')}"></i>
+                        </div>
+                        <div class="col-sm-6">
+                            <span translate>Remain Time</span>
+                            <i class="fa" ng-class="{'fa-sort-asc': isSetDisplayOrder('remain')}"></i>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-sm-2">
+                    <div class="row">
+                        <span translate>Download Speed</span>
+                    </div>
                 </div>
             </div>
-            <div class="col-md-2">
+        </div>
-                <span class="task-download-speed" ng-bind="(task.downloadSpeed | readableVolumn) + '/s'"></span>
+        <div class="task-table-body">
+            <div class="row" ng-repeat="task in downloadTasks | taskOrderBy: getOrderType()" data-gid="{{task.gid}}">
+                <div class="col-sm-8">
+                    <span class="task-name" ng-bind="task.taskName | substring: (titleWidth / 20)" title="{{task.taskName}}"></span>
+                    <div class="task-files">
+                        <span ng-bind="task.fileSize | readableVolumn"></span>
+                        <a ng-href="#/task/detail/{{task.gid}}">
+                            <span ng-bind="'(' + task.files.length + ' ' + ('Files' | translate) + ')'"></span>
+                        </a>
+                    </div>
+                </div>
+                <div class="col-sm-2">
+                    <div class="progress">
+                        <div class="progress-bar progress-bar-primary" role="progressbar"
+                             aria-valuenow="{{task.completePercent}}" aria-valuemin="1"
+                             aria-valuemax="100" style="width: {{task.completePercent}}%;">
+                            <div ng-class="{'lower': task.completePercent < 50}"
+                                ng-bind="(task.completePercent | percent: 2) + '%'"></div>
+                        </div>
+                    </div>
+                    <div>
+                        <span class="task-last-time"
+                              ng-bind="0 <= task.remainTime && task.remainTime < 86400? (task.remainTime | dateDuration: 'second': 'HH:mm:ss') : ('More Than One Day' | translate)"></span>
+                        <span class="task-download-speed visible-xs-inline pull-right"
+                              ng-bind="(task.downloadSpeed | readableVolumn) + '/s'"></span>
+                        <span class="task-seeders pull-right" ng-bind="(task.numSeeders ? (task.numSeeders + '/') : '') + task.connections"></span>
+                    </div>
+                </div>
+                <div class="col-sm-2 hidden-xs">
+                    <span class="task-download-speed" ng-bind="(task.downloadSpeed | readableVolumn) + '/s'"></span>
+                </div>
             </div>
         </div>
     </div>