feat(about): new client black list ui

modules/about/client/less/about.less

@@ -19,54 +19,15 @@
     line-height: 1.7;
 }
 
+
+.table-black-list {
+    table {
+        margin-bottom: 0 !important;
+    }
+}
+
 .black-list {
     .black-item {
-        cursor: pointer;
-        position: relative;
-        border: solid 1px #1a1a1a;
-        border-radius: 4px;
-        background-color: #2a2a2a;
-        padding: 10px 0 15px 0;
-        margin: 20px 0 0 0;
-        overflow: hidden;
-
-        .fa {
-            transition-property: transform, opacity;
-            transition-duration: .5s;
-            transition-timing-function: ease;
-            font-size: 7em;
-        }
-        h4 {
-            color: #ddd;
-            position: relative;
-            z-index: 100;
-        }
-        span {
-            color: #999;
-            position: relative;
-            z-index: 100;
-        }
-
-        &:hover {
-            .fa {
-                /* csslint ignore:start */
-                transform: scale(1.5);
-                /* csslint ignore:end */
-            }
-            h4, span {
-                color: #fff;
-            }
-            .black-icon {
-                opacity: 1;
-            }
-        }
-    }
-
-    .black-icon {
-        position: absolute;
-        top: -20px;
-        right: -20px;
-        opacity: 0.5;
     }
 }
 

modules/about/client/views/black.client.view.html

@@ -8,20 +8,35 @@
             </span>
 
             <div class="margin-top-10">
-                <div class="alert alert-warning" role="alert" style="padding: 10px 50px;">
+                <div class="alert alert-warning" role="alert" style="padding: 20px 50px;">
                     <span translate="ABOUT.BLACK_TOOLTIP"
                           translate-values="{sMail: vm.supportConfig.supportMailAddress, sNameDesc: vm.supportConfig.supportGroupNameDesc, sName: vm.supportConfig.supportGroupName}"></span>
                 </div>
             </div>
 
-            <div class="row black-list">
-                <div class="col-xs-6 col-sm-4 col-md-3" ng-repeat="b in vm.blackListConfig">
-                    <div class="text-center black-item">
-                        <h4>{{b.name}}</h4>
-                        <span>{{b.type}}</span>
-                        <i class="fa fa-ban text-danger black-icon"></i>
-                    </div>
-                </div>
+            <div class="table-responsive table-black-list">
+                <table class="table table-hover tb-v-middle top-border bottom-border">
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>{{ 'ABOUT.BLANK_NAME' | translate}}</th>
+                            <th>{{ 'ABOUT.BLANK_REASON' | translate}}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr ng-repeat="b in vm.blackListConfig">
+                            <td class="col-md-1 td-v-middle width-50">
+                                {{$index}}
+                            </td>
+                            <td class="col-md-3 td-v-middle width-150">
+                                <strong>{{b.name}}</strong>
+                            </td>
+                            <td class="col-md-8 td-v-middle width-300">
+                                {{b.reason | translate}}
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
         </div>
     </div>

modules/core/client/app/trans-string-en.js

@@ -654,6 +654,8 @@
       CLIENT_BLACK_LIST: 'Client Black List',
       MAKER_GROUP: 'Torrents Maker Group',
       BLACK_TOOLTIP: '<h4>Note:</h4>All the clients in the list was forbidden by server and can not announce or get any torrent data, For more help, please contact our {{sNameDesc | translate}} by <strong><a href="/messages/send?to={{sName}}">Message</a></strong> or <strong><a href="mailto:{{sMail}}">Email</a></strong>.',
+      BLANK_NAME: 'Client Name',
+      BLANK_REASON: 'Forbidden Reason',
       FORM_MAKER_NAME: 'Maker Group Name',
       FORM_MAKER_DESC: 'Maker Group Description',
       FORM_MAKER_FOR: 'Create maker group for - {{name}}',

modules/core/client/app/trans-string-zh.js

@@ -654,6 +654,8 @@
       CLIENT_BLACK_LIST: '禁止客户端列表',
       MAKER_GROUP: '资源压制小组',
       BLACK_TOOLTIP: '<h4>提示:</h4>下面列出的所有客户端都已被服务器禁止，使用它们将不能下载到任何数据, 如需其它帮助，请给{{sNameDesc | translate}}发送 <strong><a href="/messages/send?to={{sName}}">消息</a></strong> 或 <strong><a href="mailto:{{sMail}}">邮件</a></strong>.',
+      BLANK_NAME: '客户端名称',
+      BLANK_REASON: '禁止理由',
       FORM_MAKER_NAME: '资源压制小组名称',
       FORM_MAKER_DESC: '资源压制小组简介',
       FORM_MAKER_FOR: '创建资源压制小组 - {{name}}',