diff options
Diffstat (limited to 'src/templates/notifier')
| -rw-r--r-- | src/templates/notifier/inbox.html | 197 |
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 |