From 8e6dbe9bc3aa6a4febdfdb2f37f4d15377dd67a3 Mon Sep 17 00:00:00 2001
From: sunny <sunny@loafle.com>
Date: Wed, 25 Apr 2018 21:08:19 +0900
Subject: [PATCH] design

---
 .../app.notification.component.html           | 29 ++++++++++---------
 .../layout/topbar/app.topbar.component.html   |  2 +-
 src/styles.scss                               | 14 +++++++--
 3 files changed, 28 insertions(+), 17 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 7b7873f..5a79d6f 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,16 @@
-<div class="ui-g-12 ui-bottom-border-1">
-    Notifications
+<div class="ui-g ui-g-nopad ui-app-noti">
+    <h4>Notifications</h4>
+
+    <li role="menuitem" *ngFor="let noti of notifications | slice:0:5; let i = index">
+        <a 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 role="menuitem">
+        <a href="javascript:void(0)" class="topbar-message" (click)="onViewAllClick(noti)">
+            <span>View All</span>
+        </a>
+    </li>
 </div>
-<li role="menuitem" *ngFor="let noti of notifications | slice:0:5; let i = index" class="ui-bottom-border-1 ui-app-noti">
-    <a 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>
diff --git a/src/app/commons/component/layout/topbar/app.topbar.component.html b/src/app/commons/component/layout/topbar/app.topbar.component.html
index 77010f0..82751ef 100644
--- a/src/app/commons/component/layout/topbar/app.topbar.component.html
+++ b/src/app/commons/component/layout/topbar/app.topbar.component.html
@@ -132,7 +132,7 @@
                     <span class="topbar-badge animated rubberBand" *ngIf="notificationCount > 0">
                         {{notificationCount}}
                     </span>
-                    <span class="topbar-item-name">Messages</span>
+                    <span class="topbar-item-name">Notifications</span>
                 </a>
                 <ul class="ultima-menu animated fadeInDown">
                     <of-notification-menu (notificationLoaded)="onNotiLoaded($event)"></of-notification-menu>
diff --git a/src/styles.scss b/src/styles.scss
index a964f47..a28103e 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -189,17 +189,27 @@ img.ui-img-profile-responsive {
 .ui-bottom-border-1 {
     border-bottom: #bdbdbd 1px solid;
 }
+/*.layout-container .ultima-menu{
+    width: 100% ;
+}*/
 
 .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%;
+        border-bottom: #bdbdbd 1px solid;
         padding: 7px 10px;
         color: #bdbdbd;
     }
+    @media (max-width: 1024px){
+        h4 {
+            display: none;
+        }
+        li{
+            border-top: #bdbdbd 1px solid;
+        }
+    }
     li{
         padding: 0 ;
         width: 100%;