1 files changed, 25 insertions, 9 deletions

diff --git a/dashboard/src/templates/notifier/inbox.html b/dashboard/src/templates/notifier/inbox.html
index 471eae4..4184d1d 100644
--- a/dashboard/src/templates/notifier/inbox.html
+++ b/dashboard/src/templates/notifier/inbox.html
@@ -9,7 +9,7 @@
 
   .inbox-panel {
     display: grid;
-    grid-template-columns: 30% 70%;
+    grid-template-columns: 30% 5% 65%;
   }
 
   .section-panel {
@@ -22,7 +22,8 @@
   }
 
   .card-container {
-    box-shadow: 0 0 5px 2px #cccccc;
+    border: 1px solid #cccccc;
+    border-bottom: 0px;
   }
   .card {
     height: 50px;
@@ -43,7 +44,7 @@
   }
 
   #inbox-iframe {
-    height: calc(100vh - 130px);
+    height: calc(100vh - 57px);
   }
 
   .half_width {
@@ -51,29 +52,45 @@
   }
   .card-wrapper {
   }
+
+  #page-wrapper{
+    padding: 0px;
+  }
+
+  .read_notification{
+    background-color: #efefef;
+  }
 </style>
 
 <div class="inbox-panel">
   <div class="section-panel">
+    <h4>New:</h4>
     <div class="card-container">
-      {% for notification in notifications  %}
+      {% for notification in unread_notifications  %}
         <div class="inbox-entry card" onclick="showmessage({{notification.id}}); setactive(this);">
           {{ notification }}
         </div>
       {% endfor %}
     </div>
+    <h4>Read:</h4>
+    <div class="card-container">
+      {% for notification in read_notifications %}
+        <div class="inbox-entry card read_notification" onclick="showmessage({{notification.id}}); setactive(this);">
+          {{ notification }}
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+  <div>
   </div>
   <div class="iframe-panel inbox-expanded-view">
       <div class="inbox-iframe-div">
-        <iframe id="inbox-iframe" frameBorder="0" width="100%" height="100vh" scrolling="yes" onload="sizetoiframe(this);">Please select a notification</iframe>
+        <iframe id="inbox-iframe" frameBorder="0" width="100%" height="100vh" scrolling="yes">Please select a notification</iframe>
       </div>
   </div>
 </div>
 
 <script type="text/javascript">
-  $('#inbox-iframe').load(function() {
-    sizetoiframe(this);
-  })
 
   function showmessage(msg_id)
   {
@@ -82,5 +99,4 @@
   }
 
 </script>
-
 {% endblock %}