From 2b2dc1c4e313290b20492616c19cd86cf25062b3 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 28 Aug 2016 21:14:47 +0800
Subject: [PATCH] fix some property value (task name, download dir, torrent
 hash, tracker server and file name) make page too wide in task detail page

---
 src/styles/controls/task-table.css |  7 -------
 src/styles/core/core.css           | 11 +++++++++++
 src/views/list.html                |  2 +-
 src/views/task-detail.html         | 13 +++++++------
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/styles/controls/task-table.css b/src/styles/controls/task-table.css
index 9075105..1b39ae4 100644
--- a/src/styles/controls/task-table.css
+++ b/src/styles/controls/task-table.css
@@ -45,18 +45,11 @@
 .task-table .task-name {
     font-size: 14px;
     display: block;
-    word-break: keep-all;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
 }
 
 .task-table .peer-name-wrapper {
     display: inline-block;
     width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
 }
 
 .task-table .task-files, .task-table .task-size {
diff --git a/src/styles/core/core.css b/src/styles/core/core.css
index cafa4c4..6c063eb 100644
--- a/src/styles/core/core.css
+++ b/src/styles/core/core.css
@@ -38,6 +38,17 @@ td {
     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) {
     .navbar-nav .open .dropdown-menu {
         position: absolute;
diff --git a/src/views/list.html b/src/views/list.html
index 4803381..c4f6031 100644
--- a/src/views/list.html
+++ b/src/views/list.html
@@ -38,7 +38,7 @@
                     <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]"/>
                         <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>
                     </div>
                     <div class="task-files">
diff --git a/src/views/task-detail.html b/src/views/task-detail.html
index bfda2bb..73e8454 100644
--- a/src/views/task-detail.html
+++ b/src/views/task-detail.html
@@ -28,7 +28,7 @@
                             <span translate>Task Name</span>
                         </div>
                         <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 class="row" ng-if="task">
@@ -117,7 +117,7 @@
                             <span translate>Info Hash</span>
                         </div>
                         <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 class="row" ng-if="task">
@@ -125,7 +125,7 @@
                             <span translate>Download Dir</span>
                         </div>
                         <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 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>
                         </div>
                         <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 class="row no-hover no-background" ng-if="task && task.status == 'active'">
@@ -221,7 +222,7 @@
                                 <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')"
                                            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 class="col-sm-2">
@@ -276,7 +277,7 @@
                     <div class="task-table-body">
                         <div class="row" ng-repeat="peer in context.btPeers | peerOrderBy: getPeerListOrderType()">
                             <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 class="peer-client" ng-if="!!peer.client"
                                         ng-bind="peer.client ? ('(' + peer.client.name + (peer.client.version ? ' ' + peer.client.version : '') + ')') : ''"></span>