aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/notifier
diff options
context:
space:
mode:
authorBrandon Lo <lobrandon1217@gmail.com>2019-06-20 11:31:25 -0400
committerBrandon Lo <lobrandon1217@gmail.com>2019-06-21 11:09:40 -0400
commit79c629d3ba78ad6884a1ec4a7bdf470140647b16 (patch)
tree73fa7734ece44a9d6708e4bc05574dcc14707635 /src/templates/notifier
parent8cfd61aa885ad30947d3f1fab413ab8addeec724 (diff)
Add bootstrap 4 support
Remove bootstrap 3 module and css/js Recreated almost everything in bootstrap 4 Change workflow layout to support bootstrap 4 and flex Add rotating glyphs for dropdowns Change breadcrumbs to use pagination and its styling Change account dropdown to use full width buttons Add version sock to bootstrap4 Fix indenting in base.html Change comments in base.html Remove dead code in booking_list Revert changes in mulitple_select_filter_widget Remove dead code, whitespace in inbox Fix formatting, dead code in viewport-base Remove unused media tag Make only .rotate classes rotate on dropdown click Attach back and next to breadcrumbs Resize breadcrumbs to be same width Disable pointer cursor on breadcrumb hover Change account page to account dropdown on left Change-Id: I6c5423db6f0f6f7f0b12e55347eddcc42b56e52b Signed-off-by: Brandon Lo <lobrandon1217@gmail.com>
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