Refactor series actions layout and enhance button styles for improved usability

This commit is contained in:
Ross
2026-03-09 12:06:24 +00:00
parent 4788d56dec
commit 6c7a37ca4a
+24 -8
View File
@@ -354,20 +354,22 @@
{% partial case-series %} {% partial case-series %}
</div> </div>
</form> </form>
<span> <div class="d-flex flex-column flex-sm-row gap-2 align-items-start">
<div>
<button type="button" <button type="button"
class="btn btn-info" class="btn btn-outline-primary btn-sm"
onclick="window.location.href='{% url 'atlas:user_uploads_case' case_id=case.pk %}'"> onclick="window.location.href='{% url 'atlas:user_uploads_case' case_id=case.pk %}'">
Import new uploads Import new uploads
</button><br /> </button>
</div>
<details class="series-actions" id="series-actions"> <details class="series-actions" id="series-actions">
<summary> <summary>
<button type="button" class="btn btn-primary" title="Click to manage series" onclick="this.closest('details').open = !this.closest('details').open;"> <button type="button" class="btn btn-outline-secondary btn-sm" title="Click to manage series" onclick="this.closest('details').open = !this.closest('details').open;">
Manage Series Manage Series
</button> </button>
</summary> </summary>
<a href="{% url 'atlas:series_id_create' pk=case.pk %}">Create and add new series</a><br /> <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 %}" <button class="btn btn-sm btn-outline-secondary mb-1" 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"
@@ -375,7 +377,7 @@
> >
Order dicoms by slice location Order dicoms by slice location
</button> </button>
<button hx-post="{% url 'atlas:combine_series' %}" <button class="btn btn-sm btn-outline-primary mb-1" 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"
@@ -384,7 +386,7 @@
> >
Merge selected series Merge selected series
</button> </button>
<button hx-post="{% url 'atlas:use_dates_as_descriptions' case.pk %}" <button class="btn btn-sm btn-outline-secondary mb-1" hx-post="{% url 'atlas:use_dates_as_descriptions' case.pk %}"
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"
@@ -416,7 +418,7 @@
</div> </div>
</details> </details>
</span> </div>
</div> </div>
<div class="container"> <div class="container">
@@ -1151,6 +1153,20 @@
padding: 8px; padding: 8px;
margin-top: 8px; margin-top: 8px;
} }
.series-actions {
display: inline-block;
border: 1px solid rgba(0,0,0,0.06);
border-radius: .375rem;
padding: .5rem;
background: rgba(255,255,255,0.02);
margin-top: .5rem;
}
.series-actions summary { list-style: none; }
.series-actions summary::-webkit-details-marker { display:none; }
.series-actions .btn { vertical-align: middle; }
@media (prefers-color-scheme: dark) {
.series-actions { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.04); }
}
.link-buttons { .link-buttons {
float: right; float: right;
} }