Replace and change CSS

Fix animation bugs
Fix layout issues
Replace custom CSS to bootstrap classes
Remove unused files
Change code to use es6 syntax
Add dropdown styles

Change-Id: Ie2ed31fa2e6763cf30d3b19e4bf9379019cbb0f5
Signed-off-by: Brandon Lo <lobrandon1217@gmail.com>

2 files changed, 10 insertions, 99 deletions

diff --git a/src/templates/notifier/inbox.html b/src/templates/notifier/inbox.html
index 72207ed..9d7b426 100644
--- a/src/templates/notifier/inbox.html
+++ b/src/templates/notifier/inbox.html
@@ -5,61 +5,6 @@
 
 {% block content %}
 
-<style media="screen">
-    .inbox-panel {
-        display: grid;
-        grid-template-columns: 30% 5% 65%;
-    }
-
-    .section-panel {
-        padding: 10px;
-    }
-
-    .iframe-panel {
-        padding: 0px;
-        margin-top: 0px;
-    }
-
-    .card-container {
-        border: 1px solid #cccccc;
-        border-bottom: 0px;
-    }
-
-    .card {
-        height: 50px;
-        position: relative;
-        border-bottom: 1px solid #cccccc;
-        padding: 10px;
-        width: 100%;
-        background-color: #ffffff;
-        z-index: 5;
-    }
-
-    .selected-card {
-        background-color: #f3f3f3;
-    }
-
-    .card:hover {
-        box-shadow: 0px 0 5px 2px #cccccc;
-        z-index: 6;
-    }
-
-    .half_width {
-        width: 50%;
-    }
-
-    #page-wrapper {
-        padding: 0px;
-    }
-
-    .read_notification {
-        background-color: #efefef;
-    }
-
-    .scrollable {
-        overflow-y: auto;
-    }
-</style>
 <div class="container-fluid d-flex flex-grow-1 flex-column">
     <div class="row mt-3 mb-2">
         <div class="col-2 px-0">
@@ -73,7 +18,7 @@
     <div class="row flex-grow-1" id="fixHeight">
         <!-- Notification list && Controls -->
         <div class="mb-2 mb-lg-0 col-lg-2 px-0 mh-100">
-            <div class="list-group rounded-0 rounded-left scrollable mh-100 notifications" id="unreadNotifications" data-read="0">
+            <div class="list-group rounded-0 rounded-left overflow-auto mh-100 notifications" id="unreadNotifications" data-read="0">
                 {% for notification in unread_notifications %}
                     <a
                         href="#"
@@ -83,7 +28,7 @@
                     </a>
                 {% endfor %}
             </div>
-            <div class="list-group rounded-0 rounded-left scrollable mh-100 notifications" id="readNotifications" data-read="1">
+            <div class="list-group rounded-0 rounded-left overflow-auto mh-100 notifications" id="readNotifications" data-read="1">
                 {% for notification in read_notifications %}
                     <a
                         href="#"
@@ -96,15 +41,14 @@
         </div>
         <!-- Content -->
         <div class="col ml-lg-2 border mh-100 p-4">
-            <iframe class="w-100 h-100" id="inbox-iframe" frameBorder="0" scrolling="yes">Please select a notification</iframe>
+            <iframe name="messageView" class="w-100 h-100" id="inbox-iframe" frameBorder="0" scrolling="yes">Please select a notification</iframe>
         </div>
     </div>
 </div>
 
 <script type="text/javascript">
     function showmessage(msg_id) {
-        iframe = document.getElementById("inbox-iframe");
-        iframe.src = "notification/" + msg_id;
+        window.frames["messageView"].location = "notification/" + msg_id;
     }
 
     function setactive(obj) {
diff --git a/src/templates/notifier/notification.html b/src/templates/notifier/notification.html
index 0eafa60..603edea 100644
--- a/src/templates/notifier/notification.html
+++ b/src/templates/notifier/notification.html
@@ -27,13 +27,12 @@
     }
 </script>
 
-<div>
-    <h3 class="msg_header">{{notification.title}}
-    <div class="btn_group">
-        <button class="btn btn-primary inbox-btn" onclick="mark_unread()">Mark Unread</button>
-        <button class="btn btn-danger inbox-btn" onclick="delete_notification()">Delete</button>
-    </div>
-    </h3>
+<div class="d-flex justify-content-between border-bottom">
+  <span class="h3">{{notification.title}}</span>
+  <div class="btn_group">
+      <button class="btn btn-primary inbox-btn" onclick="mark_unread()">Mark Unread</button>
+      <button class="btn btn-danger inbox-btn" onclick="delete_notification()">Delete</button>
+  </div>
 </div>
 
 <p class="content-divider"></p>
@@ -48,36 +47,4 @@
 <form id="notification_action_form" action="." method="post">
     {% csrf_token %}
 </form>
-
-<style media="screen">
-  .card-container {
-    border: 1px solid #ffffff;
-    margin-top: 11px;
-  }
-  .card {
-    height: 50px;
-    margin: 0px;
-    position: relative;
-    border-bottom: 1px solid #cccccc;
-    padding: 0px;
-    width: 100%;
-    background-color: #ffffff;
-    z-index: 5;
-  }
-  .sender {
-    color: #636363;
-  }
-  .content-divider {
-    border-bottom: 1px solid #cccccc;
-    padding-bottom: 15px;
-    clear: right;
-  }
-  .inbox-btn{
-    display: inline;
-    margin: 3px;
-  }
-  .btn_group{
-    float: right;
-  }
-</style>
 {% endblock %}