design ing

src/commons/component/host-detail.component.html

@@ -1,3 +1,5 @@
+<div class="ui-g-12">
+  <div class="ui-g-6">
     <ul class="key-value">
       <li *ngIf="host.address">
         IP Address
@@ -16,3 +18,5 @@
         <span class="meta-value">{{host.portList.length}}</span>
       </li>
     </ul>
+  </div>
+</div>

src/commons/component/node-detail.component.html

@@ -1,6 +1,8 @@
-<div>
+<div class="ui-g">
+  <div class="detail-img">
     <img src="../../assets/image/icon/icon_db_maria.svg" width="100" height="100" />
   </div>
+  <div class="detail-content">
 
     <ng-container [ngSwitch]="node.group">
 
@@ -20,3 +22,5 @@
       </ng-container>
 
     </ng-container>
+  </div>
+</div>

src/commons/component/node-detail.component.scss

@@ -0,0 +1,8 @@
+.detail-img {
+  display: inline;
+  width: 140px;
+  padding: 10px;
+}
+.detail-content {
+  display: inline;
+}

src/commons/component/service-detail.component.html

@@ -1,3 +1,5 @@
+<div class="ui-g-12">
+  <div class="ui-g-6">
     <ul class="key-value">
       <li *ngIf="service.key">
         Name
@@ -20,3 +22,5 @@
         <span class="meta-value">{{item[1]}}</span>
       </li> -->
     </ul>
+  </div>
+</div>

src/commons/component/service-detail.component.scss

@@ -0,0 +1,20 @@
+.key-value {
+    list-style-type: none;
+    margin: 28px 0 0 0;
+    padding: 0;
+    box-sizing: border-box;
+    width: 500px;
+    li {
+    padding: 8px 14px;
+    border-bottom: 1px solid #d8dae2;
+    position: relative;
+    font-weight: bold;
+    width: 180px;
+      .meta-value {
+        font-weight: 100;
+        position: absolute;
+        width: 300px;
+        right: 40px;
+      }
+    }
+}

src/commons/component/zone-detail.component.html

@@ -1 +1,3 @@
+<div class="ui-g-12">
   zone component
+</div>