add title in download task page

This commit is contained in:
MaysWind 2016-05-17 23:00:07 +08:00
parent 3d43450014
commit 140de46c5d
4 changed files with 90 additions and 24 deletions

View file

@ -20,6 +20,12 @@
'Stopped': 'Stopped', 'Stopped': 'Stopped',
'Settings': 'Settings', 'Settings': 'Settings',
'AriaNg Settings': 'AriaNg 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', 'Language': 'Language',
'Aria2 RPC Host': 'Aria2 RPC Host', 'Aria2 RPC Host': 'Aria2 RPC Host',
'Aria2 RPC Port': 'Aria2 RPC Port', 'Aria2 RPC Port': 'Aria2 RPC Port',

View file

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

View file

@ -253,16 +253,20 @@ td {
margin-right: 15px; margin-right: 15px;
} }
.task-table > div.row { .task-table .task-table-title {
font-size: 12px;
}
.task-table > .task-table-body > div.row {
padding: 8px; padding: 8px;
border-top: 1px solid #ddd; 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; background-color: #f9f9f9;
} }
.task-table > div.row:hover { .task-table > .task-table-body > div.row:hover {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
@ -271,7 +275,7 @@ td {
display: block; display: block;
} }
.task-table .task-volumn { .task-table .task-files {
font-size: 12px; font-size: 12px;
display: block; display: block;
} }
@ -280,11 +284,19 @@ td {
margin-bottom: 0; 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; color: #888;
font-size: 12px; 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 { .task-table .task-download-speed {
font-size: 12px; font-size: 12px;
} }

View file

@ -1,11 +1,50 @@
<section class="content no-padding"> <section class="content no-padding">
<div id="task-table" class="task-table"> <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 class="col-sm-8">
<span translate>File Name</span>
<i class="fa" ng-class="{'fa-sort-asc': isSetDisplayOrder('name')}"></i>
</div> </div>
<div class="col-md-2"> <div class="col-sm-4">
<span translate>File Size</span>
<i class="fa" ng-class="{'fa-sort-asc': isSetDisplayOrder('size')}"></i>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="row">
<div class="col-sm-6">
<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>
<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">
<div class="progress-bar progress-bar-primary" role="progressbar" <div class="progress-bar progress-bar-primary" role="progressbar"
aria-valuenow="{{task.completePercent}}" aria-valuemin="1" aria-valuenow="{{task.completePercent}}" aria-valuemin="1"
@ -17,12 +56,15 @@
<div> <div>
<span class="task-last-time" <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> 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> <span class="task-seeders pull-right" ng-bind="(task.numSeeders ? (task.numSeeders + '/') : '') + task.connections"></span>
</div> </div>
</div> </div>
<div class="col-md-2"> <div class="col-sm-2 hidden-xs">
<span class="task-download-speed" ng-bind="(task.downloadSpeed | readableVolumn) + '/s'"></span> <span class="task-download-speed" ng-bind="(task.downloadSpeed | readableVolumn) + '/s'"></span>
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>