{% extends "base.html" %} {% load staticfiles %} {% block content %} <style media="screen"> .inbox-panel { display: grid; grid-template-columns: 30% 70%; } .section-panel { padding: 10px; } .iframe-panel { padding: 0px; margin-top: 0px; } .card-container { box-shadow: 0 0 5px 2px #cccccc; } .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 - 130px); } .half_width { width: 50%; } .card-wrapper { } </style> <div class="inbox-panel"> <div class="section-panel"> <div class="card-container"> {% for notification in notifier_messages %} <div class="inbox-entry card" onclick="showmessage({{notification.id}}); setactive(this);"> {{ notification }} </div> {% endfor %} </div> </div> <div class="iframe-panel inbox-expanded-view"> <div class="inbox-iframe-div"> <iframe id="inbox-iframe" src="notification/0" frameBorder="0" width="100%" height="100vh" scrolling="yes" onload="sizetoiframe(this);">Please select a notification</iframe> </div> </div> </div> <script type="text/javascript"> $('#inbox-iframe').load(function() { sizetoiframe(this); }) function showmessage(msg_id) { iframe = document.getElementById("inbox-iframe"); iframe.src = "notification/" + msg_id; } </script> {% endblock %}