aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/notifier
diff options
context:
space:
mode:
Diffstat (limited to 'src/templates/notifier')
-rw-r--r--src/templates/notifier/inbox.html197
1 files changed, 112 insertions, 85 deletions
diff --git a/src/templates/notifier/inbox.html b/src/templates/notifier/inbox.html
index 4184d1d..72207ed 100644
--- a/src/templates/notifier/inbox.html
+++ b/src/templates/notifier/inbox.html
@@ -6,97 +6,124 @@
{% 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;
- }
-
- #inbox-iframe {
- height: calc(100vh - 57px);
- }
-
- .half_width {
- width: 50%;
- }
- .card-wrapper {
- }
-
- #page-wrapper{
- padding: 0px;
- }
-
- .read_notification{
- background-color: #efefef;
- }
+ .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="inbox-panel">
- <div class="section-panel">
- <h4>New:</h4>
- <div class="card-container">
- {% for notification in unread_notifications %}
- <div class="inbox-entry card" onclick="showmessage({{notification.id}}); setactive(this);">
- {{ notification }}
+<div class="container-fluid d-flex flex-grow-1 flex-column">
+ <div class="row mt-3 mb-2">
+ <div class="col-2 px-0">
+ <div class="btn-group w-100" id="filterGroup">
+ <button class="btn btn-secondary active" data-read="-1">All</button>
+ <button class="btn btn-secondary" data-read="0">Unread</button>
+ <button class="btn btn-secondary" data-read="1">Read</button>
+ </div>
</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 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">
+ {% for notification in unread_notifications %}
+ <a
+ href="#"
+ onclick="showmessage({{notification.id}}); setactive(this);"
+ class="list-group-item list-group-item-action notification">
+ {{ notification }}
+ </a>
+ {% endfor %}
+ </div>
+ <div class="list-group rounded-0 rounded-left scrollable mh-100 notifications" id="readNotifications" data-read="1">
+ {% for notification in read_notifications %}
+ <a
+ href="#"
+ onclick="showmessage({{notification.id}}); setactive(this);"
+ class="list-group-item list-group-item-action list-group-item-secondary notification">
+ {{ notification }}
+ </a>
+ {% endfor %}
+ </div>
+ </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>
</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">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;
- }
-
+ function showmessage(msg_id) {
+ iframe = document.getElementById("inbox-iframe");
+ iframe.src = "notification/" + msg_id;
+ }
+
+ function setactive(obj) {
+ $(".notification").removeClass("active");
+ $(obj).addClass("active");
+ }
+
+ $(document).ready(function(){
+ // For all / unread / read
+ $("#filterGroup button").click(function(){
+ let read = $(this).attr("data-read");
+ $(this).siblings().removeClass("active");
+ $(".notifications").addClass("d-none");
+ $(this).addClass("active");
+ if (read === "-1") {
+ return $(".notifications").removeClass("d-none");
+ }
+ $(`.notifications[data-read="${read}"]`).removeClass("d-none");
+ });
+ });
</script>
-{% endblock %}
+{% endblock %} \ No newline at end of file