Enhance case description and presentation styles with dark mode support
This commit is contained in:
Ross
@@ -147,6 +147,32 @@
|
||||
.case-meta-value { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; }
|
||||
.case-meta-item .badge { display: inline-block; margin-left: .25rem; margin-right: 0; }
|
||||
.case-meta-item > .case-meta-value > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
}
|
||||
/* Description & Presentation visual improvements */
|
||||
.case-description { background: #eef3f73d; border: 1px solid rgba(0,0,0,0.08); padding: .75rem; border-radius: .375rem; }
|
||||
.case-description strong { font-size: 1.05rem; margin-right: .5rem; }
|
||||
.case-description .case-inline-field { margin-top: .5rem; }
|
||||
|
||||
.case-presentation ul { list-style: none; padding-left: 0; margin: .25rem 0 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
|
||||
.case-presentation li { background: rgba(13,110,253,0.12); color: #0b5ed7; padding: .25rem .5rem; border-radius: .25rem; font-size: .9rem; }
|
||||
.case-presentation b { margin-right: .5rem; }
|
||||
|
||||
/* Dark mode adjustments */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.case-description {
|
||||
background: #0f1720;
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
color: #e6eef8;
|
||||
}
|
||||
.case-description strong { color: #ffffff; }
|
||||
.case-description .case-inline-field { color: #e6eef8; }
|
||||
.case-presentation li { background: rgba(255,255,255,0.03); color: #9ec5ff; }
|
||||
.quick-edit-wrap .quick-edit-button,
|
||||
.case-meta-item .quick-edit-button {
|
||||
background: rgba(255,255,255,0.04) !important;
|
||||
color: #9ec5ff !important;
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -286,11 +312,83 @@
|
||||
data-named-stacks='{{case.get_case_named_stacks}}'
|
||||
></div>
|
||||
</details>
|
||||
<div class="pre-whitespace multi-image-block"><b>Series:</b>
|
||||
<form>
|
||||
<div class="d-flex flex-wrap gap-2 align-items-start" id="case-series-row">
|
||||
{% partial case-series %}
|
||||
</div>
|
||||
</form>
|
||||
<span>
|
||||
<button type="button"
|
||||
class="btn btn-info"
|
||||
onclick="window.location.href='{% url 'atlas:user_uploads_case' case_id=case.pk %}'">
|
||||
Import new uploads
|
||||
</button><br />
|
||||
<details class="series-actions" id="series-actions">
|
||||
<summary>
|
||||
<button type="button" class="btn btn-primary" title="Click to manage series" onclick="this.closest('details').open = !this.closest('details').open;">
|
||||
Manage Series
|
||||
</button>
|
||||
</summary>
|
||||
<a href="{% url 'atlas:series_id_create' pk=case.pk %}">Create and add new series</a><br />
|
||||
<button hx-get="{% url 'atlas:case_order_dicom' pk=case.pk %}"
|
||||
title="order dicom by slice location"
|
||||
hx-target="#series-action-results"
|
||||
hx-swap="innerHTML"
|
||||
hx-confirm="This will reorder all case series based upon slice location"
|
||||
>
|
||||
Order dicoms by slice location
|
||||
</button>
|
||||
<button hx-post="{% url 'atlas:combine_series' %}"
|
||||
title="merge series"
|
||||
hx-include="[name='series-ids']"
|
||||
hx-target="#series-action-results"
|
||||
hx-swap="innerHTML"
|
||||
hx-confirm="This will merge all selected series into one"
|
||||
>
|
||||
Merge selected series
|
||||
</button>
|
||||
<button hx-post="{% url 'atlas:use_dates_as_descriptions' case.pk %}"
|
||||
title="merge series"
|
||||
hx-include="[name='series-ids']"
|
||||
hx-target="#series-action-results"
|
||||
hx-swap="innerHTML"
|
||||
hx-confirm="This will use the dicom date as the series description"
|
||||
>
|
||||
Use dates as description
|
||||
</button>
|
||||
<button hx-post="{% url 'atlas:remove_selected_series_from_case' case.pk %}"
|
||||
title="remove selected series from this case"
|
||||
hx-include="[name='series-ids']:checked"
|
||||
hx-target="#series-action-results"
|
||||
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."
|
||||
class="btn btn-warning mt-2"
|
||||
type="button"
|
||||
>
|
||||
Remove selected series from case
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-secondary mt-2"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#reorderSeriesModal">
|
||||
Reorder series
|
||||
</button>
|
||||
<br/>
|
||||
<div class="alert alert-info mt-2" id="series-action-alert" style="display:none;">
|
||||
<span id="series-action-results" ></span>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-12 col-md-8">
|
||||
<div class="mb-3">
|
||||
<div class="mb-3 case-description">
|
||||
<div class="d-flex align-items-start justify-content-between quick-edit-wrap">
|
||||
<div class="d-flex align-items-start flex-grow-1">
|
||||
<span class="section-icon description" aria-hidden="true"></span>
|
||||
@@ -309,7 +407,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="mb-3 case-presentation">
|
||||
<p>
|
||||
<span class="section-icon presentation" aria-hidden="true"></span>
|
||||
<b>Presentation:</b>
|
||||
@@ -461,76 +559,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pre-whitespace multi-image-block"><b>Series:</b>
|
||||
<form>
|
||||
<div class="d-flex flex-wrap gap-2 align-items-start" id="case-series-row">
|
||||
{% partial case-series %}
|
||||
</div>
|
||||
</form>
|
||||
<span>
|
||||
<button type="button"
|
||||
class="btn btn-info"
|
||||
onclick="window.location.href='{% url 'atlas:user_uploads_case' case_id=case.pk %}'">
|
||||
Import new uploads
|
||||
</button><br />
|
||||
<details class="series-actions" id="series-actions">
|
||||
<summary>
|
||||
<button type="button" class="btn btn-primary" title="Click to manage series" onclick="this.closest('details').open = !this.closest('details').open;">
|
||||
Manage Series
|
||||
</button>
|
||||
</summary>
|
||||
<a href="{% url 'atlas:series_id_create' pk=case.pk %}">Create and add new series</a><br />
|
||||
<button hx-get="{% url 'atlas:case_order_dicom' pk=case.pk %}"
|
||||
title="order dicom by slice location"
|
||||
hx-target="#series-action-results"
|
||||
hx-swap="innerHTML"
|
||||
hx-confirm="This will reorder all case series based upon slice location"
|
||||
>
|
||||
Order dicoms by slice location
|
||||
</button>
|
||||
<button hx-post="{% url 'atlas:combine_series' %}"
|
||||
title="merge series"
|
||||
hx-include="[name='series-ids']"
|
||||
hx-target="#series-action-results"
|
||||
hx-swap="innerHTML"
|
||||
hx-confirm="This will merge all selected series into one"
|
||||
>
|
||||
Merge selected series
|
||||
</button>
|
||||
<button hx-post="{% url 'atlas:use_dates_as_descriptions' case.pk %}"
|
||||
title="merge series"
|
||||
hx-include="[name='series-ids']"
|
||||
hx-target="#series-action-results"
|
||||
hx-swap="innerHTML"
|
||||
hx-confirm="This will use the dicom date as the series description"
|
||||
>
|
||||
Use dates as description
|
||||
</button>
|
||||
<button hx-post="{% url 'atlas:remove_selected_series_from_case' case.pk %}"
|
||||
title="remove selected series from this case"
|
||||
hx-include="[name='series-ids']:checked"
|
||||
hx-target="#series-action-results"
|
||||
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."
|
||||
class="btn btn-warning mt-2"
|
||||
type="button"
|
||||
>
|
||||
Remove selected series from case
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-secondary mt-2"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#reorderSeriesModal">
|
||||
Reorder series
|
||||
</button>
|
||||
<br/>
|
||||
<div class="alert alert-info mt-2" id="series-action-alert" style="display:none;">
|
||||
<span id="series-action-results" ></span>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
{% comment %} <p><b>Scrapped:</b> {{ case.scrapped }} <a
|
||||
href="{% url 'atlas:case_scrap' pk=case.pk %}">(toggle)</a> {% endcomment %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user