{% extends "base.html" %} {% load staticfiles %} {% 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; } </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> {% 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> {% 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; } </script> {% endblock %}