ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Implement responsive design enhancements with new utility classes and improved layout for various components

Browse Source
This commit is contained in:
Ross
2026-05-11 13:31:25 +01:00
parent d2a4ee9f70
commit 59956670df
15 changed files with 236 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atlas/templates/atlas/case_display_block.html
+11
View File
@@ -104,6 +104,17 @@
}
.quick-edit-wrap .quick-edit-button:hover { opacity: 1; }
@media (max-width: 767.98px) {
.quick-edit-wrap .quick-edit-button,
.case-meta-item .quick-edit-button,
.case-inline-field .quick-edit-compact {
opacity: 0.95;
pointer-events: auto;
padding: 0.15rem 0.35rem;
font-size: 0.9rem;
}
}
/* Metadata-specific quick-edit: ensure edit button overlays without moving badges */
.case-meta-item { position: relative; }
.case-meta-item .quick-edit-button {
atlas/templates/atlas/collection_case_displaysetup.html
+1 -2
View File
@@ -6,8 +6,7 @@
{% include 'atlas/partials/_viewing_case_as_part_of_collection.html' with nav_link_view="atlas:collection_case_displaysetup" %}
<h2>Setup default display for case</h2>
<div id="root" class="dicom-viewer-root" data-images="{{casedetail.case.get_series_images_nested}}"
style="box-sizing: border-box; background: #222; width: 100vw; height: 800px; max-width: 1600px;"
<div id="root" class="dicom-viewer-root viewer-frame-setup" data-images="{{casedetail.case.get_series_images_nested}}"
data-auto-cache-stack="true"
{% if casedetail.default_viewerstate %}
data-viewerstate={{ casedetail.default_viewerstate }}
atlas/templates/atlas/collection_case_view_take.html
+5 -6
View File
@@ -40,8 +40,8 @@
<div id="question-timer-block" class="mb-3" title="This case has a view time limit of {{ effective_question_time_limit }} seconds.">
<div class="d-flex align-items-center gap-3">
<div><strong>Case view:</strong> <span id="question-timer" aria-live="polite">&nbsp;</span></div>
<div style="flex:1; max-width:320px;">
<div class="progress" style="height:10px;">
<div class="flex-max-320">
<div class="progress progress-compact-sm">
<div id="question-timer-progress-inner" class="progress-bar" role="progressbar" style="width:100%; background:var(--timer-color, #28a745);"></div>
</div>
</div>
@@ -105,9 +105,9 @@
<div>
{% if question_completed %}
<iframe id="viewer" style="width: 100%; height: 100%; border: none; padding: 0px; min-height: 700px" src="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% if case_number %}{% url 'atlas:collection_case_dicom_json_review' collection.pk case_number %}{% else %}{% url 'atlas:collection_case_dicom_json_review_legacy' collection.pk case.pk %}{% endif %}"></iframe>
<iframe id="viewer" class="viewer-frame-ohif" src="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% if case_number %}{% url 'atlas:collection_case_dicom_json_review' collection.pk case_number %}{% else %}{% url 'atlas:collection_case_dicom_json_review_legacy' collection.pk case.pk %}{% endif %}"></iframe>
{% else %}
<iframe id="viewer" style="width: 100%; height: 100%; border: none; padding: 0px; min-height: 700px" src="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% if case_number %}{% url 'atlas:collection_case_dicom_json' collection.pk case_number %}{% else %}{% url 'atlas:collection_case_dicom_json_legacy' collection.pk case.pk %}{% endif %}"></iframe>
<iframe id="viewer" class="viewer-frame-ohif" src="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% if case_number %}{% url 'atlas:collection_case_dicom_json' collection.pk case_number %}{% else %}{% url 'atlas:collection_case_dicom_json_legacy' collection.pk case.pk %}{% endif %}"></iframe>
{% endif %}
</div>
@@ -128,8 +128,7 @@
<details id="dicom-viewer-details" open>
<summary>Viewer</summary>
<div id="main_viewer" class="dicom-viewer-root"
style="box-sizing: border-box; background: #222; width: 100%; height: 600px;"
<div id="main_viewer" class="dicom-viewer-root viewer-frame-standard"
data-auto-cache-stack="false"
data-named-stacks='{{casedetail.get_case_named_stacks}}'
></div>
atlas/templates/atlas/collection_feedback_overview.html
+1 -1
View File
@@ -12,7 +12,7 @@
{% endif %}
</div>
</div>
<div class="card border-secondary" style="min-width: 320px;">
<div class="card border-secondary summary-card">
<div class="card-body py-2 px-3">
<div class="small text-muted">Feedback Summary</div>
<div class="fw-semibold">{{ total_outstanding_feedback }} outstanding feedback item{{ total_outstanding_feedback|pluralize }}</div>
atlas/templates/atlas/collection_history_user.html
+2 -2
View File
@@ -6,11 +6,11 @@
<h2 class="h4 mb-1">{{ collection.name }}</h2>
<div class="text-muted small">Learner: <strong>{{ user }}</strong></div>
</div>
<div class="card border-secondary" style="min-width: 320px;">
<div class="card border-secondary summary-card">
<div class="card-body py-2 px-3">
<div class="small text-muted">Attempt Progress</div>
<div class="fw-semibold">{{ answer_count }} / {{ collection_length }} answered</div>
<div class="progress mt-2" style="height: 8px;">
<div class="progress progress-compact mt-2">
<div class="progress-bar" role="progressbar" style="width: {% widthratio answer_count collection_length 100 %}%"></div>
</div>
<div class="mt-2 small">Started: {{ cid_user_exam.start_time }}</div>
atlas/templates/atlas/collection_take_overview.html
+2 -2
View File
@@ -20,12 +20,12 @@
{% endif %}
</div>
</div>
<div class="card border-secondary" style="min-width: 280px;">
<div class="card border-secondary summary-card">
<div class="card-body py-2 px-3">
<div class="small text-muted">Progress</div>
{% if not collection.review_only %}
<div class="fw-semibold">{{ answer_count }} / {{ collection_length }} answered</div>
<div class="progress mt-2" style="height: 8px;">
<div class="progress progress-compact mt-2">
<div class="progress-bar" role="progressbar" style="width: {% widthratio answer_count collection_length 100 %}%"></div>
</div>
{% else %}
atlas/templates/atlas/collection_user_messages.html
+1 -1
View File
@@ -6,7 +6,7 @@
<h2 class="h4 mb-1">{{ collection.name }}</h2>
<div class="text-muted small">Message hub for <strong>{{ target_label }}</strong></div>
</div>
<div class="card border-secondary" style="min-width: 320px;">
<div class="card border-secondary summary-card">
<div class="card-body py-2 px-3">
<div class="small text-muted">Outstanding messages</div>
<div class="fw-semibold {% if total_outstanding_messages %}text-danger{% endif %}">
atlas/templates/atlas/new_uploads.html
+2 -2
View File
@@ -103,8 +103,8 @@
<small id="viewer-context" class="text-muted">No study/series selected</small>
</div>
</div>
<div class="card-body" style="position: relative; min-height: 450px;">
<div id="uploadviewer" class="dicom-viewer-root" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;"></div>
<div class="card-body viewer-preupload-shell">
<div id="uploadviewer" class="dicom-viewer-root viewer-preupload-root"></div>
</div>
</div>
atlas/templates/atlas/series_viewer.html
+3 -4
View File
@@ -30,8 +30,7 @@
<div class="card">
<div class="card-body p-2">
{% with image_url_array_and_count=series.get_image_url_array_and_count %}
<div id="root" class="dicom-viewer-root w-100" data-images="{{ image_url_array_and_count.0 }}"
style="height: 600px; box-sizing: border-box; background: #222;" data-auto-cache-stack=false>
<div id="root" class="dicom-viewer-root w-100 viewer-frame-standard" data-images="{{ image_url_array_and_count.0 }}" data-auto-cache-stack=false>
</div>
{% endwith %}
</div>
@@ -242,13 +241,13 @@
<div id="clone-findings-modal" class="modal modal-blur fade" tabindex="-1">
<div class="modal-dialog modal-dialog-centered related-finding-modal" style="max-width: 700px;">
<div class="modal-dialog modal-dialog-centered related-finding-modal modal-wide-md">
<div class="modal-content"></div>
</div>
</div>
<div id="series-tag-consistency-modal" class="modal modal-blur fade" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-xl" style="max-width: 1200px;">
<div class="modal-dialog modal-dialog-centered modal-xl modal-wide-xl">
<div class="modal-content"></div>
</div>
</div>
atlas/templates/atlas/user_messages_inbox.html
+1 -1
View File
@@ -6,7 +6,7 @@
<h2 class="h4 mb-1">Messages Inbox</h2>
<div class="text-muted small">All accessible conversation threads across collections.</div>
</div>
<div class="card border-secondary" style="min-width: 320px;">
<div class="card border-secondary summary-card">
<div class="card-body py-2 px-3">
<div class="small text-muted">Pending acknowledgements</div>
<div class="fw-semibold {% if total_needs_your_ack %}text-danger{% endif %}">