Merge "style:optimize the style of the e2e/ns detail page"

2 files changed, 14 insertions, 6 deletions

diff --git a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.html b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.html
index c0953a90..976a9f6c 100644
--- a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.html
+++ b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.html
@@ -50,7 +50,7 @@
         <h3>{{template.name}}</h3>
         <ul class="clearfix">
           <li *ngFor="let input of template.vnfs; let i = index;">
-            <span style="width: 26%"> vf_location: </span>
+            <span style="width: 26%;min-width: 80px!important"> vf_location: </span>
             <span class="input-content">{{input["vf_location"]}}</span>
           </li>
         </ul>
@@ -84,9 +84,14 @@
         <h4>vnfs Inputs</h4>
         <ul>
           <li *ngFor="let vnf of ns_nestedTemplates;">
-            <h5>id: {{vnf.vnfInstanceId}}</h5>
-            <span style="width: 26%"> vf_location: </span>
-            <span class="input-content">{{vnf["vnfInstanceName"]}}</span>
+            <h5>
+              <span style="width: 26%;min-width: 80px!important"> id: </span>
+              <span class="input-content"> {{vnf.vnfInstanceId}}</span>
+            </h5>
+           <h5>
+             <span style="width: 26%;min-width: 80px!important"> vf_location: </span>
+             <span class="input-content">{{vnf["vnfInstanceName"]}}</span>
+           </h5>
           </li>
         </ul>
       </div>
diff --git a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.less b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.less
index e560cd9b..bada5991 100644
--- a/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.less
+++ b/usecaseui-portal/src/app/shared/components/e2e-detail/e2e-detail.component.less
@@ -110,15 +110,18 @@ hr {
           display: inline-block;
           width: 50%;
           font: 700 14px "Arial";
-          vertical-align: middle;
+          vertical-align: top;
           overflow: hidden;
           text-align: left;
           color:rgba(60,79,140,0.5);
+          word-break: break-all;
         }
         span.input-content{
           width: 42%;
           color: #3C4F8C;
           margin-left: 5%;
+          word-break: break-all;
+          vertical-align: top;
         }
       }
     }
@@ -128,7 +131,7 @@ hr {
     padding: 10px;
     height: 95%;
     box-shadow: 0px 10px 35px 10px rgba(222, 222, 222, 0.5);
-    margin-right: 40px;
+    margin-right: 1%;
     background:linear-gradient(180deg,rgba(183, 230, 247, 1) 0%,rgba(214, 240, 254, 1) 100%);
     border-radius: 4px;
     #createChart{