From c5e1b49b5336780bfe65a1db9a07a5643f2881c0 Mon Sep 17 00:00:00 2001
From: sunny <sunny@loafle.com>
Date: Wed, 25 Apr 2018 20:14:54 +0900
Subject: [PATCH] design

---
 .../app.notification.component.html           | 30 +++++------
 .../notification/notification.component.html  | 10 +++-
 src/styles.scss                               | 50 +++++++++++--------
 3 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/src/app/commons/component/layout/notification/app.notification.component.html b/src/app/commons/component/layout/notification/app.notification.component.html
index 9d6b575..74e0c90 100644
--- a/src/app/commons/component/layout/notification/app.notification.component.html
+++ b/src/app/commons/component/layout/notification/app.notification.component.html
@@ -1,15 +1,15 @@
-<div class="ui-g-12 ui-bottom-border-1">
-    No tifications
-</div>
-<li role="menuitem" *ngFor="let noti of notifications; let i = index" class="ui-bottom-border-1 ui-app-noti">
-    <a *ngIf="i < 5" href="javascript:void(0)" class="topbar-message" (click)="onNotiClick(noti)" [ngStyle]="noti.confirmDate ? '' : {'background-color': 'lightblue'}">
-        <div class="ui-app-noti-title">{{noti.title}}</div>
-        <div class="ui-app-noti-content">{{noti.message}}</div>
-        <div class="ui-app-noti-date">{{noti.createDate | date: 'short'}}</div>
-    </a>
-</li>
-<li role="menuitem">
-    <a href="javascript:void(0)" class="topbar-message" (click)="onViewAllClick(noti)">
-        <span>View All</span>
-    </a>
-</li>
\ No newline at end of file
+<div class="ui-g ui-g-12 ui-g-nopad ui-app-noti">
+    <h4>No tifications</h4>
+    <li role="menuitem" *ngFor="let noti of notifications; let i = index">
+        <a *ngIf="i < 5" href="javascript:void(0)" class="topbar-message" (click)="onNotiClick(noti)" [ngStyle]="noti.confirmDate ? '' : {'background-color': 'lightblue'}">
+            <div class="ui-app-noti-date">{{noti.createDate | date: 'short'}}</div>
+            <div class="ui-app-noti-title">{{noti.title}}</div>
+            <div class="ui-app-noti-content">{{noti.message}}</div>
+        </a>
+    </li>
+    <li>
+        <a href="javascript:void(0)" (click)="onViewAllClick(noti)">
+            <span>View All</span>
+        </a>
+    </li>
+</div>
\ No newline at end of file
diff --git a/src/packages/notification/component/notification/notification.component.html b/src/packages/notification/component/notification/notification.component.html
index 2d18724..61dd07f 100644
--- a/src/packages/notification/component/notification/notification.component.html
+++ b/src/packages/notification/component/notification/notification.component.html
@@ -4,7 +4,15 @@
 </div>
 
 <p-table [value]="notifications" selectionMode="single"  (onRowSelect)="onRowSelect($event)" >
-  <ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" >
+    <ng-template pTemplate="header">
+        <tr>
+            <th style="width:9em">Date</th>
+            <th style="width:12em">Title</th>
+            <th pResizableColumn>Message</th>
+            <th style="width:8em">User</th>
+        </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" >
       <tr [pSelectableRow]="notification" [ngStyle]="notification.confirmDate ? '' : {'background-color': 'lightblue'}">
           <td>{{notification.createDate | date: 'dd/MM/yyyy'}}</td>
           <td>{{notification.title}}</td>
diff --git a/src/styles.scss b/src/styles.scss
index 60e09ee..a964f47 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -189,27 +189,35 @@ img.ui-img-profile-responsive {
 .ui-bottom-border-1 {
     border-bottom: #bdbdbd 1px solid;
 }
-.ultima-menu li a{
-    .ui-app-noti{
-        li{
-            padding: 10px !important;
-            line-height: 1.2em !important;
-            width: 100% !important;
-            a {
-                .ui-app-noti-title {
-                font-weight: bold !important;
-                float: left !important;
-                padding: 10px !important;
-                margin: 0 !important;
-                }
-                .ui-app-noti-date{
-                    float: right !important;
-                    font-size: 0.6em !important;
-                    color: gray !important;
-                }
-                .ui-app-noti-content{
-                    float: left !important;
-                }
+
+.layout-container .ultima-menu .ui-app-noti{
+    h4 {
+        line-height: 1.2em;
+        border-top : 1px solid #bdbdbd;
+        border-bottom : 1px solid #bdbdbd;
+        margin: 0;
+        width: 100%;
+        padding: 7px 10px;
+        color: #bdbdbd;
+    }
+    li{
+        padding: 0 ;
+        width: 100%;
+        border-bottom: #bdbdbd 1px solid;
+        a {
+            display: block;
+            .ui-app-noti-title {
+            font-weight: bold;
+            float: left;
+            }
+            .ui-app-noti-date{
+                float: right;
+                font-size: 0.8em;
+                color: #5e6166;
+            }
+            .ui-app-noti-content{
+                float: left;
+                overflow: hidden;
             }
         }
     }