diff options
Diffstat (limited to 'src/templates/notifier/inbox.html')
| -rw-r--r-- | src/templates/notifier/inbox.html | 84 |
1 files changed, 21 insertions, 63 deletions
diff --git a/src/templates/notifier/inbox.html b/src/templates/notifier/inbox.html index 72207ed..26b6d32 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,8 @@ <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"> + <span class="text-muted d-none" id="noMessages">No messages available</span> + <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 +29,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 +42,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) { @@ -112,18 +57,31 @@ $(obj).addClass("active"); } + // Shows messages in the given notification list. + // Shows/hides the 'no messages' span after checking children amount + // given the .notification classed element + function showMessages(notificationList) { + $(".notifications").addClass("d-none"); + if (notificationList.children().length < 1) { + $("#noMessages").removeClass("d-none"); + } else { + $("#noMessages").addClass("d-none"); + notificationList.removeClass("d-none"); + } + } + $(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"); + return showMessages($(".notifications")); } - $(`.notifications[data-read="${read}"]`).removeClass("d-none"); + return showMessages($(`.notifications[data-read="${read}"]`)); }); + showMessages($(".notifications")); }); </script> {% endblock %}
\ No newline at end of file |