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

feat(viewer): Refactor DICOM viewer structure and update responsive styles

Browse Source
This commit is contained in:
Ross
2026-05-15 20:19:12 +01:00
parent c947cba5a7
commit 4f61e43b8c
1 changed files with 16 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atlas/templates/atlas/collection_case_view_take.html
+12 -14
View File
@@ -116,13 +116,10 @@
<div id="viewer-moveable-home"> <div id="viewer-moveable-home">
<div id="viewer-moveable"> <div id="viewer-moveable">
<div id="viewer-container" class="viewer-resizable-container"> <div id="viewer-container" class="viewer-resizable-container">
<details id="dicom-viewer-details" open>
<summary class="py-1 small text-muted">Series</summary>
<div id="main_viewer" class="dicom-viewer-root viewer-frame-standard" <div id="main_viewer" class="dicom-viewer-root viewer-frame-standard"
data-auto-cache-stack="false" data-auto-cache-stack="false"
data-named-stacks='{{casedetail.get_case_named_stacks}}' data-named-stacks='{{casedetail.get_case_named_stacks}}'
></div> ></div>
</details>
</div> </div>
<div id="viewer-resize-handle" class="viewer-resize-handle" title="Drag to resize viewer"> <div id="viewer-resize-handle" class="viewer-resize-handle" title="Drag to resize viewer">
<div class="viewer-resize-grip-inner"></div> <div class="viewer-resize-grip-inner"></div>
@@ -473,8 +470,8 @@
.viewer-resizable-container { .viewer-resizable-container {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
height: min(70vh, 700px); height: clamp(560px, 78vh, 920px);
min-height: 220px; min-height: 320px;
max-height: 85vh; max-height: 85vh;
resize: vertical; resize: vertical;
} }
@@ -483,21 +480,22 @@
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
min-height: 0; min-height: 0;
max-height: none !important;
} }
.viewer-resizable-container #dicom-viewer-details { #viewer-container {
height: 100%; width: 100%;
display: flex;
flex-direction: column;
} }
.viewer-resizable-container #dicom-viewer-details > summary { #viewer-container #main_viewer {
flex: 0 0 auto; box-sizing: border-box;
} }
.viewer-resizable-container #dicom-viewer-details > div { @media (max-width: 991.98px) {
flex: 1 1 auto; .viewer-resizable-container {
min-height: 0; height: clamp(360px, 60vh, 640px);
min-height: 280px;
}
} }
.viewer-resize-handle { .viewer-resize-handle {