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 %}