Ross
429 lines
19 KiB
HTML
429 lines
19 KiB
HTML
<!DOCTYPE HTML>
|
|
{% load static %}
|
|
{% load django_htmx %}
|
|
{% load crispy_forms_tags %}
|
|
{% load auth_extras %}
|
|
{% load help_tags %}
|
|
<html data-bs-theme="dark">
|
|
|
|
<head>
|
|
<title>
|
|
{% block title %}
|
|
PENRA Courses
|
|
{% endblock %}
|
|
</title>
|
|
<meta name="htmx-config" content='{"selfRequestsOnly": false}' />
|
|
{% comment %} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /> {% endcomment %}
|
|
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
|
|
|
|
<link href="{% static 'css/widgets.css' %}" type="text/css" media="all" rel="stylesheet">
|
|
<link rel="stylesheet" href="{% static 'css/dicomViewer.css' %}">
|
|
<link rel="stylesheet" href="{% static 'css/toastr.min.css' %}">
|
|
<link rel="stylesheet" href="{% static 'css/bootstrap-icons.css' %}">
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'favicon/apple-touch-icon.png' %}">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'favicon/favicon-32x32.png' %}">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'favicon/favicon-16x16.png' %}">
|
|
<link rel="manifest" href="{% static 'favicon/site.webmanifest' %}">
|
|
<link rel="mask-icon" href="{% static 'favicon/safari-pinned-tab.svg' %}" color="#5bbad5">
|
|
<meta name="msapplication-TileColor" content="#da532c">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
|
|
<link href="/static/css/widgets.css" type="text/css" media="all" rel="stylesheet">
|
|
<link href="/static/admin/css/vendor/select2/select2.min.css" type="text/css" media="screen" rel="stylesheet">
|
|
<link href="/static/admin/css/autocomplete.css" type="text/css" media="screen" rel="stylesheet">
|
|
<link href="/static/autocomplete_light/select2.css" type="text/css" media="screen" rel="stylesheet">
|
|
|
|
<script src="{% static 'js/crypto-js/core.min.js' %}"></script>
|
|
<script src="{% static 'js/crypto-js/md5.min.js' %}"></script>
|
|
|
|
{% comment %} <script src="https://unpkg.com/alpinejs" defer></script> {% endcomment %}
|
|
<script src="{% static 'js/_hyperscript.min.js' %}"></script>
|
|
<script src="{% static 'js/htmx.min.js' %}"></script>
|
|
{% django_htmx_script %}
|
|
<script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
|
|
<script src="{% static 'admin/js/core.js' %}"></script>
|
|
<script src="{% static 'admin/js/SelectBox.js' %}"></script>
|
|
<script src="{% static 'admin/js/SelectFilter2.js' %}"></script>
|
|
<script src="{% static 'jsi18n.js' %}"></script>
|
|
<script src="{% static 'admin/js/vendor/select2/select2.full.js' %}"></script>
|
|
<script src="{% static 'autocomplete_light/autocomplete_light.min.js' %}"></script>
|
|
<script src="{% static 'tesseract.min.js' %}"></script>
|
|
<script src="{% static 'autocomplete_light/select2.min.js' %}"></script>
|
|
<script src="{% static 'autocomplete_light/i18n/en.js' %}"></script>
|
|
{% comment %} mathjax {% endcomment %}
|
|
<script src="{% static 'js/tex-mml-chtml.js' %}"></script>
|
|
<script src="{% static 'js/dexie.js' %}"></script>
|
|
<script src="{% static 'js/html5sortable.min.js' %}"></script>
|
|
{% comment %} <script src="{% static 'tesseract.min.js' %}"></script> {% endcomment %}
|
|
<script src='https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js'></script>
|
|
<script src="{% static 'js/toastr.min.js' %}"></script>
|
|
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
|
|
<script src="{% static 'js/sorttable.js' %}"></script>
|
|
|
|
<script src="{% static 'js/cornerstone/hammer.js' %}"></script>
|
|
<script src="{% static 'js/cornerstone/cornerstone.min.js' %}"></script>
|
|
<script src="{% static 'js/cornerstone/dicomParser.min.js' %}"></script>
|
|
<script src="{% static 'js/cornerstone/cornerstoneMath.min.js' %}"></script>
|
|
<script src="{% static 'js/cornerstone/cornerstoneTools.min.js' %}"></script>
|
|
<script src="{% static 'js/cornerstone/cornerstoneWebImageLoader.min.js' %}"></script>
|
|
<script src="{% static 'js/cornerstone/cornerstoneWADOImageLoader.min.js' %}"></script>
|
|
<script src="{% static 'js/cornerstone/cornerstone-base64-image-loader.umd.js' %}"></script>
|
|
<script src="{% static 'js/anatomy.js' %}" defer="defer" type="module"></script>
|
|
<script src="{% static 'dv3d/index.js' %}" type="module" defer="defer" type="module"></script>
|
|
|
|
{% block js %}
|
|
{% endblock %}
|
|
<link rel="stylesheet" href="{% static 'css/anatomy.css' %}">
|
|
<link rel="stylesheet" href="{% static 'css/forms.css' %}">
|
|
<style>
|
|
|
|
.dropdown-menu {
|
|
background-color: rgb(28, 25, 25)
|
|
}
|
|
.dropdown-item {
|
|
color: lightblue;
|
|
}
|
|
/* Allow the correct-answer badge to wrap if the text is long */
|
|
.correct-badge {
|
|
white-space: normal !important;
|
|
display: inline-block;
|
|
word-break: break-word;
|
|
max-width: 100%;
|
|
}
|
|
/* Reduce horizontal page margins on small screens for better use of space */
|
|
@media (max-width: 1210px) {
|
|
/* Narrow the default container padding */
|
|
.container,
|
|
.container-fluid {
|
|
padding-left: .5rem !important;
|
|
padding-right: .5rem !important;
|
|
}
|
|
|
|
/* Also tighten the main content wrapper specifically */
|
|
div.content.container {
|
|
padding-left: .5rem !important;
|
|
padding-right: .5rem !important;
|
|
max-width: 100% !important;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
/* Improve navbar tap targets and mobile dropdown behaviour */
|
|
@media (max-width: 991.98px) {
|
|
/* Make navbar links larger and easier to tap */
|
|
.navbar-nav .nav-link {
|
|
padding: .75rem 1rem;
|
|
font-size: 1.05rem;
|
|
min-height: 44px; /* recommended minimum touch target */
|
|
display: block;
|
|
margin: .25rem 0;
|
|
border-radius: .375rem;
|
|
background-color: var(--bs-primary);
|
|
color: #fff !important;
|
|
text-align: center;
|
|
box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset;
|
|
}
|
|
|
|
/* Make links look like outline buttons for secondary links */
|
|
.navbar-nav .nav-link.btn-outline {
|
|
background-color: transparent;
|
|
color: var(--bs-primary) !important;
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
|
|
/* Make dropdown items full-width and larger */
|
|
.navbar-nav .dropdown-menu .dropdown-item {
|
|
padding: .75rem 1rem;
|
|
font-size: 1.05rem;
|
|
background: transparent;
|
|
color: inherit;
|
|
border-radius: .25rem;
|
|
margin: .125rem 0;
|
|
}
|
|
|
|
/* When the navbar is collapsed, render dropdown menus as static stacked blocks
|
|
so nested items are easy to tap (prevents absolute-position overlap issues). */
|
|
.navbar-collapse .dropdown-menu {
|
|
position: static !important;
|
|
float: none !important;
|
|
display: block !important;
|
|
width: 100% !important;
|
|
margin-top: .25rem;
|
|
}
|
|
|
|
/* Ensure dropdown toggles are full-width when collapsed */
|
|
.navbar-collapse .dropdown > .nav-link {
|
|
width: 100%;
|
|
text-align: left;
|
|
display: block;
|
|
}
|
|
|
|
|
|
html, body {
|
|
/* Slightly increase root font-size so rem-based components scale */
|
|
font-size: 182%;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
/* Slightly larger headings for clear hierarchy */
|
|
h1 { font-size: 1.8rem; }
|
|
h2 { font-size: 1.4rem; }
|
|
h3 { font-size: 1.15rem; }
|
|
|
|
/* Improve spacing for paragraphs and lists */
|
|
p, li { font-size: 1rem; }
|
|
|
|
/* Make form controls and buttons a bit larger for touch */
|
|
.form-control, .btn { font-size: 1rem; padding: .6rem .75rem; }
|
|
|
|
}
|
|
|
|
</style>
|
|
{% block css %}
|
|
{% endblock %}
|
|
</head>
|
|
|
|
|
|
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
|
|
<nav class="navbar navbar-expand-lg bg-body-tertiary py-0">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand pt-0" href="/">Home</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"><i class="bi bi-text-indent-right"></i></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="navbar-nav ms-auto ">
|
|
{% if request.user.is_authenticated %}
|
|
<li id="atlas-link" class="nav-item">
|
|
<a class="nav-link active" href="{% url 'atlas:index' %}">Atlas</a>
|
|
</li>
|
|
<li class="nav-item dropdown pt-0">
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
FRCR
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<a class="dropdown-item" href="{% url 'rapids:index' %}">Rapids</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="{% url 'shorts:index' %}">Shorts</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="{% url 'longs:index' %}">Longs</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="{% url 'anatomy:index' %}">Anatomy</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="{% url 'physics:index' %}">Physics</a>
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item" href="{% url 'sbas:index' %}">SBAs</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
{% if request.user|has_group:"cid_user_manager" %}
|
|
<li id="candidate-link" class="nav-item">
|
|
<a class="nav-link active" href="{% url 'people' %}">People</a>
|
|
</li>
|
|
{% endif %}
|
|
<li id="profile-link" class=" nav-item">
|
|
<a class="nav-link active" href="{% url 'profile' %}">Profile</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{% if request.user.is_staff %}
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="{% url 'admin:index' %}">Admin</a>
|
|
</li>
|
|
{% endif %}
|
|
{% if request.user.is_authenticated %}
|
|
<li id="logout-link" class="nav-item">
|
|
<form id="logout-form" method="post" action="{% url 'logout' %}">
|
|
{% csrf_token %}
|
|
<button class="nav-link btn btn-link" type="submit">Log out</button>
|
|
</form>
|
|
{% comment %} <a href="{% url 'logout' %}">Logout</a> {% endcomment %}
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
{% comment %} <form class="d-flex" role="search">
|
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
|
<button class="btn btn-outline-success" type="submit">Search</button>
|
|
</form> {% endcomment %}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="content container">
|
|
{% block navigation %}
|
|
{% endblock %}
|
|
<div class="row clear-both">
|
|
<div class="col-md-12">
|
|
<div id="htmx-error"></div>
|
|
|
|
<span
|
|
id="cimar-login-needed"
|
|
hx-get='{% url "cimar_status" %}'
|
|
hx-trigger="cimar-login-needed from:body"
|
|
>
|
|
</span>
|
|
{% block content %}
|
|
{% endblock %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
|
|
<div class="col-md-4 d-flex align-items-center">
|
|
<a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
|
|
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"></use></svg>
|
|
</a>
|
|
<span class="text-muted">PenraCourses</span>
|
|
</div>
|
|
|
|
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
|
|
<li class="ms-3"><a class="text-muted" href="{% url 'privacy' %}">Privacy</a></li>
|
|
<li class="ms-3"><a class="text-muted" href="{% url 'cookie_consent_cookie_group_list' %}">Cookies</a></li>
|
|
<li class="ms-3"><a class="text-muted" href="{% url 'about' %}">About</a></li>
|
|
</ul>
|
|
</footer>
|
|
<!-- Close review modal after HTMX reviewSaved trigger -->
|
|
<script>
|
|
document.body.addEventListener('reviewSaved', function () {
|
|
try {
|
|
var modalEl = document.getElementById('reviewModal');
|
|
if (!modalEl) return;
|
|
var modal = bootstrap.Modal.getInstance(modalEl);
|
|
if (modal) {
|
|
modal.hide();
|
|
} else {
|
|
// If no instance exists, create one and hide it
|
|
var m = new bootstrap.Modal(modalEl);
|
|
m.hide();
|
|
}
|
|
} catch (err) {
|
|
console.error('Error hiding review modal', err);
|
|
}
|
|
});
|
|
|
|
</script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const toggleBtn = document.getElementById('toggle-row-selection');
|
|
const selectionControls = document.getElementById('selection-controls');
|
|
const selectAllBtn = document.getElementById('select-all');
|
|
const clearBtn = document.getElementById('clear-selection');
|
|
const selectedCountSpan = document.getElementById('selected-count');
|
|
const table = document.querySelector('.table-responsive table');
|
|
let selectionEnabled = false;
|
|
|
|
function findRowCheckboxes() {
|
|
if (!table) return [];
|
|
return Array.from(table.querySelectorAll('input[type="checkbox"]'));
|
|
}
|
|
|
|
function updateSelectedCount() {
|
|
const checks = findRowCheckboxes();
|
|
const count = checks.filter(c => c.checked).length;
|
|
selectedCountSpan.textContent = count;
|
|
// update row highlight based on checkbox state
|
|
checks.forEach(cb => {
|
|
const tr = cb.closest('tr');
|
|
if (tr) tr.classList.toggle('table-active', cb.checked);
|
|
});
|
|
}
|
|
|
|
function setCheckboxesDisabled(disabled) {
|
|
findRowCheckboxes().forEach(cb => {
|
|
cb.disabled = disabled;
|
|
});
|
|
}
|
|
|
|
function hideSelectionColumn() {
|
|
if (!table) return;
|
|
// hide any th/td that contains the selection checkbox
|
|
table.querySelectorAll('th, td').forEach(function(cell) {
|
|
if (cell.querySelector && cell.querySelector('input[type="checkbox"]')) {
|
|
cell.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
function showSelectionColumn() {
|
|
if (!table) return;
|
|
table.querySelectorAll('th, td').forEach(function(cell) {
|
|
if (cell.querySelector && cell.querySelector('input[type="checkbox"]')) {
|
|
cell.style.display = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
// disable checkboxes by default and hide the selection column
|
|
setCheckboxesDisabled(true);
|
|
hideSelectionColumn();
|
|
|
|
// row click toggling
|
|
document.addEventListener('click', function(e) {
|
|
if (!selectionEnabled) return;
|
|
// ignore clicks on inputs, anchors, buttons
|
|
const tag = e.target.tagName.toLowerCase();
|
|
if (['input','a','button','select','textarea','label'].includes(tag)) return;
|
|
const tr = e.target.closest('tr');
|
|
if (!tr || !table || !table.contains(tr)) return;
|
|
const cb = tr.querySelector('input[type="checkbox"]');
|
|
if (cb && !cb.disabled) {
|
|
cb.checked = !cb.checked;
|
|
// reflect highlight immediately
|
|
tr.classList.toggle('table-active', cb.checked);
|
|
updateSelectedCount();
|
|
}
|
|
});
|
|
|
|
if (toggleBtn) {
|
|
toggleBtn.addEventListener('click', function() {
|
|
selectionEnabled = !selectionEnabled;
|
|
if (selectionEnabled) {
|
|
toggleBtn.textContent = 'Disable row selection';
|
|
selectionControls.style.display = '';
|
|
setCheckboxesDisabled(false);
|
|
showSelectionColumn();
|
|
} else {
|
|
toggleBtn.textContent = 'Enable row selection';
|
|
selectionControls.style.display = 'none';
|
|
setCheckboxesDisabled(true);
|
|
hideSelectionColumn();
|
|
// clear any selected checkboxes
|
|
findRowCheckboxes().forEach(cb => cb.checked = false);
|
|
updateSelectedCount();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (selectAllBtn) {
|
|
selectAllBtn.addEventListener('click', function() {
|
|
findRowCheckboxes().forEach(cb => { if (!cb.disabled) cb.checked = true; });
|
|
updateSelectedCount();
|
|
});
|
|
}
|
|
|
|
if (clearBtn) {
|
|
clearBtn.addEventListener('click', function() {
|
|
findRowCheckboxes().forEach(cb => { if (!cb.disabled) cb.checked = false; });
|
|
updateSelectedCount();
|
|
});
|
|
}
|
|
|
|
// Keep count updated if checkboxes are toggled directly
|
|
document.addEventListener('change', function(e) {
|
|
if (e.target && e.target.matches('input[type="checkbox"]')) updateSelectedCount();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
|
|
|
|
</html> |