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

feat(series): Enhance series block with interactive features and improved styling

Browse Source
This commit is contained in:
Ross
2026-05-18 10:50:53 +01:00
parent 4d1423134a
commit 867d92bff9
1 changed files with 196 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atlas/templates/atlas/case_display_block.html
+196 -197
View File
@@ -204,34 +204,34 @@
border: 1px solid rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.06);
text-align: left; text-align: left;
} }
/* Enhanced series block with interactive features */ /* Enhanced series block with interactive features */
.series-block-interactive { .series-block-interactive {
transition: all 0.2s ease; transition: all 0.2s ease;
cursor: pointer; cursor: pointer;
} }
.series-block-interactive:hover { .series-block-interactive:hover {
box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15); box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15);
border-color: rgba(13, 110, 253, 0.3); border-color: rgba(13, 110, 253, 0.3);
} }
.series-block-actions { .series-block-actions {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.25rem; gap: 0.25rem;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.series-block-actions .btn { .series-block-actions .btn {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
font-size: 0.75rem; font-size: 0.75rem;
} }
.series-block-actions .btn-xs { .series-block-actions .btn-xs {
min-width: auto; min-width: auto;
} }
/* Also support dark theme when site sets a theme attribute/class */ /* Also support dark theme when site sets a theme attribute/class */
.atlas[data-bs-theme="dark"] .series-block, .atlas[data-bs-theme="dark"] .series-block,
[data-bs-theme="dark"] .series-block, [data-bs-theme="dark"] .series-block,
@@ -244,7 +244,7 @@
border-color: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.03) !important;
color: #e6eef8 !important; color: #e6eef8 !important;
} }
.atlas[data-bs-theme="dark"] .series-block-interactive:hover, .atlas[data-bs-theme="dark"] .series-block-interactive:hover,
[data-bs-theme="dark"] .series-block-interactive:hover, [data-bs-theme="dark"] .series-block-interactive:hover,
body[data-bs-theme="dark"] .series-block-interactive:hover, body[data-bs-theme="dark"] .series-block-interactive:hover,
@@ -522,144 +522,144 @@
<span class="btn btn-outline-secondary btn-sm series-toolbar-btn">Manage series</span> <span class="btn btn-outline-secondary btn-sm series-toolbar-btn">Manage series</span>
</summary> </summary>
<div class="series-actions-body"> <div class="series-actions-body">
<a class="btn btn-sm btn-outline-secondary text-start" href="{% url 'atlas:series_id_create' pk=case.pk %}">Create and add new series</a> <a class="btn btn-sm btn-outline-secondary text-start" href="{% url 'atlas:series_id_create' pk=case.pk %}">Create and add new series</a>
<div class="series-selection-toolbar d-flex flex-wrap gap-2"> <div class="series-selection-toolbar d-flex flex-wrap gap-2">
<button type="button" class="btn btn-sm btn-outline-primary" id="series-select-all-btn">Select all</button> <button type="button" class="btn btn-sm btn-outline-primary" id="series-select-all-btn">Select all</button>
<button type="button" class="btn btn-sm btn-outline-secondary" id="series-deselect-all-btn">Deselect all</button> <button type="button" class="btn btn-sm btn-outline-secondary" id="series-deselect-all-btn">Deselect all</button>
</div> </div>
<div class="series-actions-grid d-flex flex-column gap-2"> <div class="series-actions-grid d-flex flex-column gap-2">
<button class="btn btn-sm btn-outline-secondary text-start" hx-get="{% url 'atlas:case_order_dicom' pk=case.pk %}" <button class="btn btn-sm btn-outline-secondary text-start" hx-get="{% url 'atlas:case_order_dicom' pk=case.pk %}"
title="order dicom by slice location" title="order dicom by slice location"
hx-target="#series-action-results" hx-target="#series-action-results"
hx-swap="innerHTML" hx-swap="innerHTML"
hx-confirm="This will reorder all case series based upon slice location" hx-confirm="This will reorder all case series based upon slice location"
> >
Order dicoms by slice location Order dicoms by slice location
</button> </button>
<button class="btn btn-sm btn-outline-primary text-start" hx-post="{% url 'atlas:combine_series' %}" <button class="btn btn-sm btn-outline-primary text-start" hx-post="{% url 'atlas:combine_series' %}"
title="merge series" title="merge series"
hx-include="[name='series-ids']" hx-include="[name='series-ids']"
hx-target="#series-action-results" hx-target="#series-action-results"
hx-swap="innerHTML" hx-swap="innerHTML"
hx-confirm="This will merge all selected series into one" hx-confirm="This will merge all selected series into one"
> >
Merge selected series Merge selected series
</button> </button>
<button class="btn btn-sm btn-outline-secondary text-start" hx-post="{% url 'atlas:use_dates_as_descriptions' case.pk %}" <button class="btn btn-sm btn-outline-secondary text-start" hx-post="{% url 'atlas:use_dates_as_descriptions' case.pk %}"
title="use dicom dates as series descriptions" title="use dicom dates as series descriptions"
hx-include="[name='series-ids']" hx-include="[name='series-ids']"
hx-target="#series-action-results" hx-target="#series-action-results"
hx-swap="innerHTML" hx-swap="innerHTML"
hx-confirm="This will use the dicom date as the series description" hx-confirm="This will use the dicom date as the series description"
> >
Use dates as description Use dates as description
</button> </button>
<button hx-post="{% url 'atlas:remove_selected_series_from_case' case.pk %}" <button hx-post="{% url 'atlas:remove_selected_series_from_case' case.pk %}"
title="remove selected series from this case" title="remove selected series from this case"
hx-include="[name='series-ids']:checked" hx-include="[name='series-ids']:checked"
hx-target="#series-action-results" hx-target="#series-action-results"
hx-swap="innerHTML" hx-swap="innerHTML"
hx-confirm="Are you sure you want to remove the selected series from this case? They will not be deleted from the database." hx-confirm="Are you sure you want to remove the selected series from this case? They will not be deleted from the database."
class="btn btn-sm btn-warning text-start" class="btn btn-sm btn-warning text-start"
type="button" type="button"
> >
Remove selected series from case Remove selected series from case
</button> </button>
<button hx-post="{% url 'atlas:series_bulk_delete' %}" <button hx-post="{% url 'atlas:series_bulk_delete' %}"
title="delete selected series" title="delete selected series"
hx-include="[name='series-ids']:checked" hx-include="[name='series-ids']:checked"
hx-target="#series-action-results" hx-target="#series-action-results"
hx-swap="innerHTML" hx-swap="innerHTML"
hx-confirm="Delete the selected series from the database? This cannot be undone." hx-confirm="Delete the selected series from the database? This cannot be undone."
class="btn btn-sm btn-danger text-start" class="btn btn-sm btn-danger text-start"
type="button"> type="button">
Delete selected series Delete selected series
</button> </button>
<button type="button" <button type="button"
class="btn btn-sm btn-secondary text-start" class="btn btn-sm btn-secondary text-start"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#reorderSeriesModal"> data-bs-target="#reorderSeriesModal">
Reorder series Reorder series
</button> </button>
</div> </div>
<details class="series-move-panel border rounded p-2"> <details class="series-move-panel border rounded p-2">
<summary class="small fw-semibold">Move selected series to another case</summary> <summary class="small fw-semibold">Move selected series to another case</summary>
{% if move_series_form %} {% if move_series_form %}
<form id="move-selected-series-form" class="d-flex flex-column gap-2 mt-2"> <form id="move-selected-series-form" class="d-flex flex-column gap-2 mt-2">
{{ move_series_form.destination_case }} {{ move_series_form.destination_case }}
<div class="small text-muted">Click any case row below to select the destination case.</div> <div class="small text-muted">Click any case row below to select the destination case.</div>
<div id="selected-move-case" class="small text-muted">No destination case selected.</div> <div id="selected-move-case" class="small text-muted">No destination case selected.</div>
{% case_search_widget collection=None input_id='move-series-case-search-input' target_id='move-series-case-search-results' show_select_button=True %} {% case_search_widget collection=None input_id='move-series-case-search-input' target_id='move-series-case-search-results' show_select_button=True %}
<button type="button" <button type="button"
id="move-selected-series-submit" id="move-selected-series-submit"
class="btn btn-sm btn-outline-primary text-start" class="btn btn-sm btn-outline-primary text-start"
disabled disabled
hx-post="{% url 'atlas:move_selected_series_to_case' case.pk %}" hx-post="{% url 'atlas:move_selected_series_to_case' case.pk %}"
hx-include="[name='series-ids']:checked, #move-selected-series-form [name='destination_case']" hx-include="[name='series-ids']:checked, #move-selected-series-form [name='destination_case']"
hx-target="#series-action-results" hx-target="#series-action-results"
hx-swap="innerHTML" hx-swap="innerHTML"
hx-confirm="Move selected series to the chosen destination case?"> hx-confirm="Move selected series to the chosen destination case?">
Move selected series Move selected series
</button> </button>
</form> </form>
<script> <script>
(function () { (function () {
if (window.__moveSeriesCaseSelectionBound) return; if (window.__moveSeriesCaseSelectionBound) return;
window.__moveSeriesCaseSelectionBound = true; window.__moveSeriesCaseSelectionBound = true;
function applyMoveCaseSelection(casePk, caseTitle) { function applyMoveCaseSelection(casePk, caseTitle) {
if (!casePk) return; if (!casePk) return;
const form = document.getElementById('move-selected-series-form'); const form = document.getElementById('move-selected-series-form');
const hiddenInput = form ? form.querySelector("[name='destination_case']") : null; const hiddenInput = form ? form.querySelector("[name='destination_case']") : null;
const label = document.getElementById('selected-move-case'); const label = document.getElementById('selected-move-case');
const results = document.getElementById('move-series-case-search-results'); const results = document.getElementById('move-series-case-search-results');
if (!hiddenInput) return; if (!hiddenInput) return;
hiddenInput.value = casePk; hiddenInput.value = casePk;
if (label) { if (label) {
label.innerHTML = 'Selected destination: <strong>' + caseTitle + ' (' + casePk + ')</strong>'; label.innerHTML = 'Selected destination: <strong>' + caseTitle + ' (' + casePk + ')</strong>';
label.classList.remove('text-muted'); label.classList.remove('text-muted');
}
if (results) {
results.querySelectorAll('.list-group-item[data-case-pk]').forEach(function (item) {
item.classList.toggle('active', String(item.getAttribute('data-case-pk')) === String(casePk));
});
}
syncMoveSeriesSubmitState();
} }
if (results) { function syncMoveSeriesSubmitState() {
results.querySelectorAll('.list-group-item[data-case-pk]').forEach(function (item) { const form = document.getElementById('move-selected-series-form');
item.classList.toggle('active', String(item.getAttribute('data-case-pk')) === String(casePk)); const hiddenInput = form ? form.querySelector("[name='destination_case']") : null;
}); const submitBtn = document.getElementById('move-selected-series-submit');
if (!hiddenInput || !submitBtn) return;
submitBtn.disabled = !hiddenInput.value;
} }
document.body.addEventListener('case:selected', function (e) {
try {
const detail = e.detail || {};
const casePk = detail.casePk;
const caseTitle = detail.caseTitle || ('Case #' + casePk);
applyMoveCaseSelection(casePk, caseTitle);
} catch (err) {
console.error('Move series case:selected handler error', err);
}
});
syncMoveSeriesSubmitState(); syncMoveSeriesSubmitState();
} })();
</script>
function syncMoveSeriesSubmitState() { {% else %}
const form = document.getElementById('move-selected-series-form'); <div class="text-muted small mt-2">Case move options are unavailable in this view.</div>
const hiddenInput = form ? form.querySelector("[name='destination_case']") : null; {% endif %}
const submitBtn = document.getElementById('move-selected-series-submit'); </details>
if (!hiddenInput || !submitBtn) return;
submitBtn.disabled = !hiddenInput.value;
}
document.body.addEventListener('case:selected', function (e) {
try {
const detail = e.detail || {};
const casePk = detail.casePk;
const caseTitle = detail.caseTitle || ('Case #' + casePk);
applyMoveCaseSelection(casePk, caseTitle);
} catch (err) {
console.error('Move series case:selected handler error', err);
}
});
syncMoveSeriesSubmitState();
})();
</script>
{% else %}
<div class="text-muted small mt-2">Case move options are unavailable in this view.</div>
{% endif %}
</details>
</div> </div>
<div class="alert alert-info mt-2" id="series-action-alert" style="display:none;"> <div class="alert alert-info mt-2" id="series-action-alert" style="display:none;">
<span id="series-action-results" ></span> <span id="series-action-results" ></span>
@@ -1780,119 +1780,118 @@
padding: 0 1.1rem 1.1rem; padding: 0 1.1rem 1.1rem;
} }
.series-toolbar { .series-toolbar {
display: grid; display: flex;
grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr); flex-wrap: wrap;
gap: .75rem; gap: .75rem;
align-items: start;
} }
.series-toolbar-btn { .series-toolbar-btn {
width: 100%; min-width: 160px;
justify-content: center;
} }
.series-card-grid { .series-card-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: .85rem; gap: 1rem;
align-items: stretch;
} }
.series-block { .series-block {
min-width: 0; display: contents;
} }
.series-card-shell { .series-card-shell {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: .65rem; gap: .5rem;
height: 100%; padding: 1rem;
padding: .85rem; border: 1px solid rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.08); border-radius: .75rem;
border-radius: .9rem; background: rgba(15,23,42,0.3);
background: rgba(15,23,42,0.22);
box-shadow: 0 10px 24px rgba(0,0,0,0.08);
} }
.series-card-main { .series-card-main {
display: grid; display: flex;
grid-template-columns: 84px minmax(0, 1fr); align-items: flex-start;
gap: .85rem; gap: .75rem;
width: 100%; width: 100%;
border: 0; border: 0;
background: transparent; background: transparent;
padding: 0; padding: 0;
text-align: left; text-align: left;
color: inherit; color: inherit;
cursor: pointer;
flex-shrink: 0;
} }
.series-card-main:hover .series-card-description, .series-card-main:hover .series-card-description,
.series-card-main:focus-visible .series-card-description { .series-card-main:focus-visible .series-card-description {
color: var(--bs-emphasis-color, #fff); color: #fff;
} }
.series-card-main:focus-visible { .series-card-main:focus-visible {
outline: 2px solid rgba(13,110,253,0.55); outline: 2px solid rgba(13,110,253,0.6);
outline-offset: 4px; outline-offset: 2px;
border-radius: .6rem;
} }
.series-card-thumb-wrap { .series-card-thumb-wrap {
width: 84px; flex-shrink: 0;
width: 72px;
height: 72px;
} }
.series-card-thumb { .series-card-thumb {
width: 84px; width: 100%;
height: 84px; height: 100%;
object-fit: cover; object-fit: cover;
border-radius: .75rem; border-radius: .5rem;
border: 1px solid rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.1);
display: block; display: block;
background: rgba(255,255,255,0.04);
} }
.series-card-thumb-placeholder { .series-card-thumb-placeholder {
width: 100%;
height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--bs-secondary-color, #6c757d); color: var(--bs-secondary-color, #6c757d);
font-size: 1.35rem; font-size: 1.25rem;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: .5rem;
} }
.series-card-content { .series-card-content {
flex: 1;
min-width: 0; min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: .35rem; gap: .2rem;
} }
.series-card-heading { .series-card-heading {
display: flex; font-size: .95rem;
flex-wrap: wrap; font-weight: 600;
align-items: center; line-height: 1.2;
gap: .45rem .6rem;
} }
.series-card-series-number { .series-card-series-number {
font-weight: 700; font-weight: 700;
} }
.series-card-image-count { .series-card-image-count {
font-size: .8rem; font-size: .8rem;
color: var(--bs-secondary-color, #6c757d); color: #adb5bd;
} }
.series-card-description { .series-card-description {
font-size: .95rem; font-size: .85rem;
line-height: 1.35; line-height: 1.3;
color: rgba(255,255,255,0.88); color: #d4d8dd;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis;
min-height: 2.55em;
} }
.series-card-controls { .series-card-controls {
display: flex; display: flex;
flex-wrap: wrap;
gap: .5rem; gap: .5rem;
align-items: center;
justify-content: space-between;
} }
.series-card-controls .btn { .series-card-controls .btn {
flex: 1 1 auto; flex: 1;
min-width: 0;
padding: .35rem .5rem;
font-size: .8rem;
} }
.series-block.highlight-series .series-card-shell, .series-block.highlight-series .series-card-shell,
.series-block:hover .series-card-shell { .series-block:hover .series-card-shell {
border-color: rgba(13,110,253,0.45); border-color: rgba(13,110,253,0.5);
box-shadow: 0 14px 28px rgba(13,110,253,0.12); background: rgba(13,110,253,0.08);
transform: translateY(-1px);
} }
.series-actions[open] { .series-actions[open] {
border: 2px solid #0d6efd; border: 2px solid #0d6efd;
@@ -1939,28 +1938,28 @@
} }
@media (max-width: 991.98px) { @media (max-width: 991.98px) {
.series-toolbar { .series-toolbar {
grid-template-columns: 1fr; flex-direction: column;
}
.series-toolbar-btn {
width: 100%;
}
.series-card-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
} }
} }
@media (max-width: 575.98px) { @media (max-width: 575.98px) {
.series-panel-summary { .series-card-grid {
flex-direction: column; grid-template-columns: 1fr;
align-items: flex-start;
} }
.series-panel-badge { .series-card-thumb-wrap {
min-width: 0; width: 60px;
} height: 60px;
.series-card-main {
grid-template-columns: 72px minmax(0, 1fr);
}
.series-card-thumb-wrap,
.series-card-thumb {
width: 72px;
height: 72px;
} }
.series-card-controls { .series-card-controls {
flex-direction: column; flex-direction: column;
align-items: stretch; }
.series-card-controls .btn {
width: 100%;
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {