style:services-list page style optimization

Change-Id: Ic5f3078b03a2b1dee4d5c0458815c716a1945c86
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

3 files changed, 163 insertions, 146 deletions

diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html
index 127d9ad9..d47b342c 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html
@@ -15,30 +15,41 @@
 -->
 <div class="action ant-tabs-bar">
 
-    <span><i style="margin-right: 10px"><img src="assets/images/customer.png" alt=""></i> {{"i18nTextDefine_Customer" | translate}} : </span>
+    <span>
+        <i class="icon">
+            <img src="../../../assets/images/customer.png" alt="">
+        </i>
+         {{"i18nTextDefine_Customer" | translate}} : 
+    </span>
     <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
         <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i>
         </button>
-        <ul nz-menu style="min-height:40px;max-height: 200px; overflow: auto;">
+        <ul nz-menu>
             <li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList">
-                <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
+                <a title="{{item.name}}">{{item.name}}</a>
             </li>
         </ul>
     </nz-dropdown>
 
-    <span style="margin-left:40px"><i style="margin-right: 10px"><img src="assets/images/service-type.png" alt=""></i> {{"i18nTextDefine_ServiceType" | translate}} : </span>
+    <span>
+        <i class="icon">
+            <img src="../../../assets/images/service-type.png"alt="">
+        </i> 
+        {{"i18nTextDefine_ServiceType" | translate}} : 
+    </span>
     <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
         <button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i>
         </button>
-        <ul nz-menu style="min-height:40px;max-height: 200px; overflow: auto;">
+        <ul nz-menu>
             <li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList">
-                <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
+                <a title="{{item.name}}">{{item.name}}</a>
             </li>
         </ul>
     </nz-dropdown>
 
-    <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i
-            class="anticon anticon-plus" style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span> {{"i18nTextDefine_Create" | translate}} </span>
+    <button class="create" nz-button [nzType]="'primary'" (click)="createModal()">
+        <i *ngIf="width>1200" class="anticon anticon-plus"></i>
+        <span> {{"i18nTextDefine_Create" | translate}} </span>
     </button>
     <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle=" {{'i18nTextDefine_ServiceCreation' | translate}} "
               (nzOnCancel)="handleCancel()"
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less
index fcb70b82..2a19e5bb 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.less
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less
@@ -13,6 +13,52 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
+@media screen and (min-width: 1050px){
+    .action{
+        span:nth-of-type(2){
+            margin-left: 40px;
+        }
+    }
+    
+}
+@media screen and (max-width: 1050px){
+    .action{
+        span:nth-of-type(2){
+            margin-left: 20px;
+        }
+    }
+    
+}
+@media screen and (max-width: 1300px){
+    .top-list-text{
+        p{
+            width: 200px;
+        }
+    }
+}
+@media screen and (min-width: 1200px){
+    .round{
+        top:45%;
+        left: 50px;
+        margin-top: -40px;
+    }
+    
+}
+
+@media screen and (max-width: 1200px){
+    .round{
+        top:12%;
+        left: 12%;
+    }
+    .top-list-text{
+        p{
+            width: 170px;
+        }
+    }
+    
+}
+
+
 .title {
     font: 700 18px/18px "思源黑体";
     color: #4c5e70;
@@ -27,6 +73,18 @@ hr {
 .ant-tabs-bar{
     margin-bottom: 0!important;
 }
+.ant-dropdown-menu{
+    min-height:40px;
+    max-height: 200px;
+    overflow: auto;
+}
+.ant-dropdown-menu-item{
+    a{
+        max-width: 165px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
 .mask{
     width: 100%;
     height: 100%;
@@ -77,15 +135,20 @@ hr {
         font: 700 14px "Arial";
         color: #3C4F8C;
         margin-right: 5px;
+        .icon{
+            margin-right: 10px;
+        }
     }
     nz-dropdown {
+        width: 20%;
         vertical-align: middle;
         background-color:#ffffff;
         :hover{
             border-color: #48C6EF;
         }
         button {
-            width: 165px;
+            width: 100%;
+            max-width:165px;
             height: 42px;
             background-color:#ffffff;
             text-align: left;
@@ -111,11 +174,15 @@ hr {
         position: absolute;
         right: 3%;
         top:50%;
-        width:116px;
         height:42px;
         background:#0DA9E2;
         border-radius:6px;
         margin-top: -15px;
+        i{
+            transform: scale(1.5);
+            line-height: 15px;
+            margin-right: 5px;
+        }
         span {
             color: #fff;
             font-weight: 400;
@@ -133,90 +200,76 @@ hr {
     }
 
 }
-.top-num{
-    overflow: auto;
-    width: 100%;
-}
-.top-list{
-    position: relative;
-    width:29%;
-    height:170px;
-    margin: 10px 1%;
-    float: left;
-    background:url("../../../assets/images/servicelist-e2e.png") no-repeat;
-    background-size: 100% 100%;
-    border-radius:2px;
-}
-.top-num .top-list:nth-child(2){
-    background:url("../../../assets/images/servicelist-e2e.png") no-repeat;
-    background-size: 100% 100%;
-}
-.top-num .top-list:nth-child(3){
-    background:url("../../../assets/images/servicelist-e2e.png") no-repeat;
-    background-size: 100% 100%;
-}
-.top-num .top-list:nth-child(4){
-    background:url("../../../assets/images/servicelist-sotn.png") no-repeat;
-    background-size: 100% 100%;
-}
-.top-list .round{
-    position: absolute;
-    width: 60px;
-    height: 60px;
-    line-height: 60px;
-  text-align: center;
-    top:45%;
-    left: 50px;
-    margin-top: -30px;
-    background:#E0EDFF;
-    border:2px solid rgba(224,237,255,1);
-    border-radius: 50%;
-    font-size:16px;
-    font-family:ArialMT;
-    color:#3C4F8C;
-}
-.top-list {
-    .top-list-text {
-        position: absolute;
-        text-align: right;
-        height: 40px;
-        line-height: 20px;
-        right: 50px;
-        color: #fff;
-        p {
-            font-size: 14px;
-            width: 250px;
-            margin: 15px 0 0 0;
-            height: 13px;
-            clear: both;
-            span {
-                display: inline-block;
-                font-weight: 500;
-                text-align: right;
-                float: right;
-            }
-            span:nth-child(1) {
-                font-size: 18px;
-                width: 40px;
-                min-width: 40px;
+nz-layout{
+    padding: 20px 32px;
+    .top-num{
+
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+        .top-list{
+            position: relative;
+            width:32%;
+            max-width:400px;
+            height:170px;
+            background:url("../../../assets/images/servicelist-e2e.png") no-repeat;
+            background-size: 100% 100%;
+            border-radius:2px;
+            .round{
+                position: absolute;
+                width: 60px;
+                height: 60px;
+                line-height: 60px;
+                text-align: center;               
+                background:#E0EDFF;
+                border:2px solid rgba(224,237,255,1);
+                border-radius: 50%;
+                font-size:16px;
+                font-family:ArialMT;
+                color:#3C4F8C;
+                transition: .5s;    
             }
-            span:nth-child(2) {
-                width: 85px;
-                font-size: 16px;
+            .top-list-text{
+                position: absolute;
+                text-align: right;
+                line-height: 20px;
+                right: 12%;
+                color: #fff;
+                p{
+                    height: 28px;
+                    margin-bottom: 0;
+                    padding-left: 5px;
+                    font-size: 14px;
+                    clear: both;
+                    span{
+                        display: inline-block;
+                        float: right;
+                        font-weight: 500;
+                        text-align: right;
+                    }
+                    span:nth-child(1){
+                        font-size: 18px;
+                        margin-left: 15px;
+                    }
+                    span:nth-child(2){
+                        width: 85px;
+                        font-size: 16px;
+                    }
+                }
+                p:nth-child(1){
+                    margin-top: 25px;
+                }
+                .service-description{
+                    
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    color: #3C4F8C;
+
+                }
             }
         }
-        p:nth-child(1) {
-            margin-top: 25px;
-        }
-    }
-    .service-description{
-        font-size: 14px;
-        width: 250px;
-        height: 13px;
-        position: absolute;
-        bottom: 30px;
-        left: 50px;
-        color: #3C4F8C;
+        
     }
 }
 .list {
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
index 3c22b7d8..3a07c1fe 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
@@ -18,6 +18,7 @@ import { MyhttpService } from '../../myhttp.service';
 import { slideToRight } from '../../animates';
 import { NzModalService } from 'ng-zorro-antd';
 import { NzNotificationService } from 'ng-zorro-antd';
+import { Observable } from 'rxjs/Rx';
 
 @Component({
     selector: 'app-services-list',
@@ -28,11 +29,16 @@ import { NzNotificationService } from 'ng-zorro-antd';
 export class ServicesListComponent implements OnInit {
     @HostBinding('@routerAnimate') routerAnimateState;
 
+    public width:number = document.documentElement.clientWidth;
+
     constructor(private myhttp: MyhttpService, private modalService: NzModalService, private notification: NzNotificationService) {
     }
 
     ngOnInit() {
         this.getallCustomers();
+        Observable.fromEvent(window, 'resize').subscribe((event) => {
+            this.width = document.documentElement.clientWidth
+        });
     }
 
     // customer servicetype
@@ -1273,19 +1279,6 @@ export class ServicesListComponent implements OnInit {
 
     queryProgress(obj, callback) {
         let mypromise = new Promise((res, rej) => {
-            // let data = {
-            //   operationStatus:{
-            //     "operationId": "XXXXXX",
-            //     "operation": "create|delete|update|scale",
-            //     "result": "finished|error|processing",
-            //     "reason": "",
-            //     "userId": "",
-            //     "operationContent": "Be creating pop.",
-            //     "progress": 0,
-            //     "operateAt": "",
-            //     "finishedAt": ""
-            //   }
-            // }
             let errorNums = 180;
             let requery = () => {
                 this.myhttp.getProgress(obj)
@@ -1319,17 +1312,6 @@ export class ServicesListComponent implements OnInit {
                             res(data.operationStatus);
                         }
                     })
-                // setTimeout(()=>{
-                //   console.log(data.operationStatus.progress)
-                //   data.operationStatus.progress++;
-                //   if(data.operationStatus.progress<100){
-                //     callback(data.operationStatus);
-                //     requery()
-                //   }else{
-                //     callback(data.operationStatus);
-                //     res(data.operationStatus)
-                //   }
-                // },100)
             }
             requery();
         })
@@ -1338,25 +1320,7 @@ export class ServicesListComponent implements OnInit {
 
     queryNsProgress(jobid, id, callback, operationType) {
         let mypromise = new Promise((res, rej) => {
-            // let data = {
-            //   "jobId": "string",
-            //   "responseDescriptor": {
-            //     "status": "string",
-            //     "progress": 0,
-            //     "statusDescription": "string",
-            //     "errorCode": "string",
-            //     "responseId": "string",
-            //     "responseHistoryList": [
-            //       {
-            //         "status": "string",
-            //         "progress": "string",
-            //         "statusDescription": "string",
-            //         "errorCode": "string",
-            //         "responseId": "string"
-            //       }
-            //     ]
-            //   }
-            // }
+           
             let errorNums = 180;
             let requery = () => {
                 this.myhttp.getNsProgress(jobid, id, operationType)
@@ -1366,7 +1330,6 @@ export class ServicesListComponent implements OnInit {
                             return false;
                         }
                         if (data.responseDescriptor == null || data.responseDescriptor.progress == undefined) {
-                            // console.log(data);
                             errorNums--;
                             if (errorNums == 0) {
                                 callback({ progress: 255, status: "time over" });
@@ -1390,17 +1353,7 @@ export class ServicesListComponent implements OnInit {
                             res(data);
                         }
                     })
-                // setTimeout(()=>{
-                //   console.log(data.responseDescriptor.progress)
-                //   data.responseDescriptor.progress++;
-                //   if(data.responseDescriptor.progress<100){
-                //     callback(data.responseDescriptor);
-                //     requery()
-                //   }else{
-                //     callback(data);
-                //     res(data)
-                //   }
-                // },100)
+              
             };
             requery();
         });