Lab as a Service 2.0
[laas.git] / src / templates / notifier / inbox.html
1 {% extends "base.html" %}
2
3
4 {% load staticfiles %}
5
6 {% block content %}
7
8 <style media="screen">
9
10   .inbox-panel {
11     display: grid;
12     grid-template-columns: 30% 70%;
13   }
14
15   .section-panel {
16     padding: 10px;
17   }
18
19   .iframe-panel {
20     padding: 0px;
21     margin-top: 0px;
22   }
23
24   .card-container {
25     box-shadow: 0 0 5px 2px #cccccc;
26   }
27   .card {
28     height: 50px;
29     position: relative;
30     border-bottom: 1px solid #cccccc;
31     padding: 10px;
32     width: 100%;
33     background-color: #ffffff;
34     z-index: 5;
35   }
36   .selected-card {
37     background-color: #f3f3f3;
38   }
39
40   .card:hover {
41     box-shadow: 0px 0 5px 2px #cccccc;
42     z-index: 6;
43   }
44
45   #inbox-iframe {
46     height: calc(100vh - 130px);
47   }
48
49   .half_width {
50     width: 50%;
51   }
52   .card-wrapper {
53   }
54 </style>
55
56 <div class="inbox-panel">
57   <div class="section-panel">
58     <div class="card-container">
59       {% for notification in notifier_messages  %}
60         <div class="inbox-entry card" onclick="showmessage({{notification.id}}); setactive(this);">
61           {{ notification }}
62         </div>
63       {% endfor %}
64     </div>
65   </div>
66   <div class="iframe-panel inbox-expanded-view">
67       <div class="inbox-iframe-div">
68         <iframe id="inbox-iframe" src="notification/0" frameBorder="0" width="100%" height="100vh" scrolling="yes" onload="sizetoiframe(this);">Please select a notification</iframe>
69       </div>
70   </div>
71 </div>
72
73 <script type="text/javascript">
74   $('#inbox-iframe').load(function() {
75     sizetoiframe(this);
76   })
77
78   function showmessage(msg_id)
79   {
80     iframe = document.getElementById("inbox-iframe");
81     iframe.src = "notification/" + msg_id;
82   }
83
84 </script>
85
86 {% endblock %}