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>

1 files changed, 6 insertions, 39 deletions

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 %}