fix some property value (task name, download dir, torrent hash, tracker server and file name) make page too wide in task detail page

This commit is contained in:
MaysWind 2016-08-28 21:14:47 +08:00
parent 2c29a52afb
commit 2b2dc1c4e3
4 changed files with 19 additions and 14 deletions

View file

@ -45,18 +45,11 @@
.task-table .task-name { .task-table .task-name {
font-size: 14px; font-size: 14px;
display: block; display: block;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.task-table .peer-name-wrapper { .task-table .peer-name-wrapper {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.task-table .task-files, .task-table .task-size { .task-table .task-files, .task-table .task-size {

View file

@ -38,6 +38,17 @@ td {
cursor: pointer !important; cursor: pointer !important;
} }
.allow-word-break {
word-wrap: break-word;
word-break: break-all;
}
.auto-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 767px) { @media (max-width: 767px) {
.navbar-nav .open .dropdown-menu { .navbar-nav .open .dropdown-menu {
position: absolute; position: absolute;

View file

@ -38,7 +38,7 @@
<div class="checkbox checkbox-primary" ng-class="{'checkbox-hide': !taskContext.selected[task.gid]}"> <div class="checkbox checkbox-primary" ng-class="{'checkbox-hide': !taskContext.selected[task.gid]}">
<input id="{{'task_' + task.gid}}" type="checkbox" ng-model="taskContext.selected[task.gid]"/> <input id="{{'task_' + task.gid}}" type="checkbox" ng-model="taskContext.selected[task.gid]"/>
<label for="{{'task_' + task.gid}}"> <label for="{{'task_' + task.gid}}">
<span class="task-name" ng-bind="task.taskName" title="{{task.taskName}}"></span> <span class="task-name auto-ellipsis" ng-bind="task.taskName" title="{{task.taskName}}"></span>
</label><i class="icon-seeder fa fa-angle-double-up" ng-if="task && task.status == 'active' && task.seeder" title="{{'Seeding' | translate}}"></i> </label><i class="icon-seeder fa fa-angle-double-up" ng-if="task && task.status == 'active' && task.seeder" title="{{'Seeding' | translate}}"></i>
</div> </div>
<div class="task-files"> <div class="task-files">

View file

@ -28,7 +28,7 @@
<span translate>Task Name</span> <span translate>Task Name</span>
</div> </div>
<div class="setting-value col-sm-8"> <div class="setting-value col-sm-8">
<span ng-bind="task.taskName"></span> <span class="allow-word-break" ng-bind="task.taskName"></span>
</div> </div>
</div> </div>
<div class="row" ng-if="task"> <div class="row" ng-if="task">
@ -117,7 +117,7 @@
<span translate>Info Hash</span> <span translate>Info Hash</span>
</div> </div>
<div class="setting-value col-sm-8"> <div class="setting-value col-sm-8">
<span ng-bind="task.infoHash"></span> <span class="allow-word-break" ng-bind="task.infoHash"></span>
</div> </div>
</div> </div>
<div class="row" ng-if="task"> <div class="row" ng-if="task">
@ -125,7 +125,7 @@
<span translate>Download Dir</span> <span translate>Download Dir</span>
</div> </div>
<div class="setting-value col-sm-8"> <div class="setting-value col-sm-8">
<span ng-bind="task.dir"></span> <span class="allow-word-break" ng-bind="task.dir"></span>
</div> </div>
</div> </div>
<div class="row" ng-if="task && task.bittorrent && task.bittorrent.announceList && task.bittorrent.announceList.length > 0"> <div class="row" ng-if="task && task.bittorrent && task.bittorrent.announceList && task.bittorrent.announceList.length > 0">
@ -138,7 +138,8 @@
title="{{(context.collapseTrackers ? 'Expand' : 'Collapse') | translate}}"></i> title="{{(context.collapseTrackers ? 'Expand' : 'Collapse') | translate}}"></i>
</div> </div>
<div class="setting-value col-sm-8"> <div class="setting-value col-sm-8">
<div ng-bind="serverAddress" ng-repeat="serverAddress in task.bittorrent.announceList | limitTo: (context.collapseTrackers ? 1 : task.bittorrent.announceList.length)"></div> <div class="auto-ellipsis" ng-bind="serverAddress" title="{{serverAddress}}"
ng-repeat="serverAddress in task.bittorrent.announceList | limitTo: (context.collapseTrackers ? 1 : task.bittorrent.announceList.length)"></div>
</div> </div>
</div> </div>
<div class="row no-hover no-background" ng-if="task && task.status == 'active'"> <div class="row no-hover no-background" ng-if="task && task.status == 'active'">
@ -221,7 +222,7 @@
<div class="checkbox checkbox-primary"> <div class="checkbox checkbox-primary">
<input id="{{'file_' + file.index}}" type="checkbox" ng-disabled="!task || !task.files || task.files.length < 2 || (task.status != 'waiting' && task.status != 'paused')" <input id="{{'file_' + file.index}}" type="checkbox" ng-disabled="!task || !task.files || task.files.length < 2 || (task.status != 'waiting' && task.status != 'paused')"
ng-model="file.selected" ng-change="setSelectedFile()"/> ng-model="file.selected" ng-change="setSelectedFile()"/>
<label for="{{'file_' + file.index}}" ng-bind="file.fileName" title="{{file.fileName}}"></label> <label for="{{'file_' + file.index}}" class="allow-word-break" ng-bind="file.fileName" title="{{file.fileName}}"></label>
</div> </div>
</div> </div>
<div class="col-sm-2"> <div class="col-sm-2">
@ -276,7 +277,7 @@
<div class="task-table-body"> <div class="task-table-body">
<div class="row" ng-repeat="peer in context.btPeers | peerOrderBy: getPeerListOrderType()"> <div class="row" ng-repeat="peer in context.btPeers | peerOrderBy: getPeerListOrderType()">
<div class="col-md-4 col-sm-4 col-xs-12"> <div class="col-md-4 col-sm-4 col-xs-12">
<div class="peer-name-wrapper" title="{{(peer.client ? peer.client.info : '') + (peer.seeder ? (peer.client.info ? ', ' : '') + ('Seeding' | translate) : '')}}"> <div class="peer-name-wrapper auto-ellipsis" title="{{(peer.client ? peer.client.info : '') + (peer.seeder ? (peer.client.info ? ', ' : '') + ('Seeding' | translate) : '')}}">
<span ng-bind="peer.name | translate"></span><i class="icon-seeder fa fa-angle-double-up" ng-if="peer && peer.seeder"></i> <span ng-bind="peer.name | translate"></span><i class="icon-seeder fa fa-angle-double-up" ng-if="peer && peer.seeder"></i>
<span class="peer-client" ng-if="!!peer.client" <span class="peer-client" ng-if="!!peer.client"
ng-bind="peer.client ? ('(' + peer.client.name + (peer.client.version ? ' ' + peer.client.version : '') + ')') : ''"></span> ng-bind="peer.client ? ('(' + peer.client.name + (peer.client.version ? ' ' + peer.client.version : '') + ')') : ''"></span>