Refactor case metadata layout and improve quick-edit button integration
This commit is contained in:
Ross
@@ -137,17 +137,17 @@
|
|||||||
.section-icon.history { background:#198754; }
|
.section-icon.history { background:#198754; }
|
||||||
.section-icon.discussion { background:#fd7e14; }
|
.section-icon.discussion { background:#fd7e14; }
|
||||||
.section-icon.report { background:#dc3545; }
|
.section-icon.report { background:#dc3545; }
|
||||||
.case-metadata { border-left: 1px solid #eee; padding-left: 1rem; text-align:left; }
|
.case-metadata { border-left: 1px solid #eee; padding-left: 1rem; text-align:left; }
|
||||||
.case-meta-item { margin-bottom: .5rem; }
|
.case-meta-item { margin-bottom: .5rem; }
|
||||||
.case-meta-label { font-weight:600; font-size:0.9rem; display:block; }
|
.case-meta-label { font-weight:600; font-size:0.9rem; display:block; }
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
/* Keep metadata stacked (one per row), but put label and value on same row */
|
/* Keep metadata stacked (one per row), but put label and value on same row */
|
||||||
.case-metadata { text-align: right; }
|
.case-metadata { text-align: right; }
|
||||||
.case-meta-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
|
.case-meta-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
|
||||||
.case-meta-value { display: flex; align-items: center; gap: .5rem; justify-content: flex-end; }
|
.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 .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; }
|
.case-meta-item > .case-meta-value > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="atlas {% if case.scrapped %}atlas-scrapped{% endif %}">
|
<div class="atlas {% if case.scrapped %}atlas-scrapped{% endif %}">
|
||||||
@@ -287,159 +287,159 @@
|
|||||||
></div>
|
></div>
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row g-3 mb-3">
|
<div class="row g-3 mb-3">
|
||||||
<div class="col-12 col-md-8">
|
<div class="col-12 col-md-8">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<div class="d-flex align-items-start justify-content-between quick-edit-wrap">
|
<div class="d-flex align-items-start justify-content-between quick-edit-wrap">
|
||||||
<div class="d-flex align-items-start flex-grow-1">
|
<div class="d-flex align-items-start flex-grow-1">
|
||||||
<span class="section-icon description" aria-hidden="true"></span>
|
<span class="section-icon description" aria-hidden="true"></span>
|
||||||
<strong>Description:</strong>
|
<strong>Description:</strong>
|
||||||
{% url 'atlas:case_inline_field' case.pk 'description' as desc_url %}
|
{% url 'atlas:case_inline_field' case.pk 'description' as desc_url %}
|
||||||
{% with endpoint_default=desc_url|add:"?show_label=0" endpoint_edit=desc_url|add:"?edit=1&show_label=0" %}
|
{% with endpoint_default=desc_url|add:"?show_label=0" endpoint_edit=desc_url|add:"?edit=1&show_label=0" %}
|
||||||
{% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label="Description" can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-description' field_kind='textarea' value=case.description display_value=case.description field_name='description' error_message='' %}
|
{% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label="Description" can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-description' field_kind='textarea' value=case.description display_value=case.description field_name='description' error_message='' %}
|
||||||
|
{% endwith %}
|
||||||
|
</div>
|
||||||
|
{% if can_edit %}
|
||||||
|
<button class="btn btn-sm btn-link text-muted p-0 ms-2 quick-edit-button"
|
||||||
|
hx-get="{% url 'atlas:case_inline_field' case.pk 'description' %}?edit=1&show_label=0"
|
||||||
|
hx-target="#case-inline-description"
|
||||||
|
hx-swap="outerHTML">quick edit</button>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-3">
|
||||||
|
<p>
|
||||||
|
<span class="section-icon presentation" aria-hidden="true"></span>
|
||||||
|
<b>Presentation:</b>
|
||||||
|
<ul>
|
||||||
|
{% for presentation in case.presentation.all %}
|
||||||
|
<li>{{presentation.get_link}}</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row g-3 mb-3">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="card h-100">
|
||||||
|
<div class="card-header d-flex justify-content-between align-items-center quick-edit-wrap">
|
||||||
|
<span><span class="section-icon history" aria-hidden="true"></span>History</span>
|
||||||
|
{% if can_edit %}
|
||||||
|
<button class="btn btn-sm btn-link text-muted p-0 quick-edit-button"
|
||||||
|
hx-get="{% url 'atlas:case_inline_field' case.pk 'history' %}?edit=1&show_label=0"
|
||||||
|
hx-target="#case-inline-history"
|
||||||
|
hx-swap="outerHTML">quick edit</button>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
{% url 'atlas:case_inline_field' case.pk 'history' as history_url %}
|
||||||
|
{% with endpoint_default=history_url|add:"?show_label=0" endpoint_edit=history_url|add:"?edit=1&show_label=0" %}
|
||||||
|
{% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label='History' can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-history' field_kind='textarea' value=case.history display_value=case.history field_name='history' error_message='' %}
|
||||||
{% endwith %}
|
{% endwith %}
|
||||||
</div>
|
</div>
|
||||||
{% if can_edit %}
|
|
||||||
<button class="btn btn-sm btn-link text-muted p-0 ms-2 quick-edit-button"
|
|
||||||
hx-get="{% url 'atlas:case_inline_field' case.pk 'description' %}?edit=1&show_label=0"
|
|
||||||
hx-target="#case-inline-description"
|
|
||||||
hx-swap="outerHTML">quick edit</button>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
<div class="mb-3">
|
<div class="card h-100">
|
||||||
<p>
|
<div class="card-header d-flex justify-content-between align-items-center quick-edit-wrap">
|
||||||
<span class="section-icon presentation" aria-hidden="true"></span>
|
<span><span class="section-icon discussion" aria-hidden="true"></span>Discussion</span>
|
||||||
<b>Presentation:</b>
|
{% if can_edit %}
|
||||||
<ul>
|
<button class="btn btn-sm btn-link text-muted p-0 quick-edit-button"
|
||||||
{% for presentation in case.presentation.all %}
|
hx-get="{% url 'atlas:case_inline_field' case.pk 'discussion' %}?edit=1&show_label=0"
|
||||||
<li>{{presentation.get_link}}</li>
|
hx-target="#case-inline-discussion"
|
||||||
{% endfor %}
|
hx-swap="outerHTML">quick edit</button>
|
||||||
</ul>
|
{% endif %}
|
||||||
</p>
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
{% url 'atlas:case_inline_field' case.pk 'discussion' as discussion_url %}
|
||||||
|
{% with endpoint_default=discussion_url|add:"?show_label=0" endpoint_edit=discussion_url|add:"?edit=1&show_label=0" %}
|
||||||
|
{% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label='Discussion' can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-discussion' field_kind='textarea' value=case.discussion display_value=case.discussion field_name='discussion' error_message='' %}
|
||||||
|
{% endwith %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
<div class="row g-3 mb-3">
|
<div class="card h-100">
|
||||||
<div class="col-12">
|
<div class="card-header d-flex justify-content-between align-items-center quick-edit-wrap">
|
||||||
<div class="card h-100">
|
<span><span class="section-icon report" aria-hidden="true"></span>Report</span>
|
||||||
<div class="card-header d-flex justify-content-between align-items-center quick-edit-wrap">
|
{% if can_edit %}
|
||||||
<span><span class="section-icon history" aria-hidden="true"></span>History</span>
|
<button class="btn btn-sm btn-link text-muted p-0 quick-edit-button"
|
||||||
{% if can_edit %}
|
hx-get="{% url 'atlas:case_inline_field' case.pk 'report' %}?edit=1&show_label=0"
|
||||||
<button class="btn btn-sm btn-link text-muted p-0 quick-edit-button"
|
hx-target="#case-inline-report"
|
||||||
hx-get="{% url 'atlas:case_inline_field' case.pk 'history' %}?edit=1&show_label=0"
|
hx-swap="outerHTML">quick edit</button>
|
||||||
hx-target="#case-inline-history"
|
{% endif %}
|
||||||
hx-swap="outerHTML">quick edit</button>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
{% url 'atlas:case_inline_field' case.pk 'history' as history_url %}
|
|
||||||
{% with endpoint_default=history_url|add:"?show_label=0" endpoint_edit=history_url|add:"?edit=1&show_label=0" %}
|
|
||||||
{% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label='History' can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-history' field_kind='textarea' value=case.history display_value=case.history field_name='history' error_message='' %}
|
|
||||||
{% endwith %}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="card-body">
|
||||||
<div class="col-12">
|
{% url 'atlas:case_inline_field' case.pk 'report' as report_url %}
|
||||||
<div class="card h-100">
|
{% with endpoint_default=report_url|add:"?show_label=0" endpoint_edit=report_url|add:"?edit=1&show_label=0" %}
|
||||||
<div class="card-header d-flex justify-content-between align-items-center quick-edit-wrap">
|
{% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label='Report' can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-report' field_kind='textarea' value=case.report display_value=case.report field_name='report' error_message='' %}
|
||||||
<span><span class="section-icon discussion" aria-hidden="true"></span>Discussion</span>
|
{% endwith %}
|
||||||
{% if can_edit %}
|
|
||||||
<button class="btn btn-sm btn-link text-muted p-0 quick-edit-button"
|
|
||||||
hx-get="{% url 'atlas:case_inline_field' case.pk 'discussion' %}?edit=1&show_label=0"
|
|
||||||
hx-target="#case-inline-discussion"
|
|
||||||
hx-swap="outerHTML">quick edit</button>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
{% url 'atlas:case_inline_field' case.pk 'discussion' as discussion_url %}
|
|
||||||
{% with endpoint_default=discussion_url|add:"?show_label=0" endpoint_edit=discussion_url|add:"?edit=1&show_label=0" %}
|
|
||||||
{% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label='Discussion' can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-discussion' field_kind='textarea' value=case.discussion display_value=case.discussion field_name='discussion' error_message='' %}
|
|
||||||
{% endwith %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="card h-100">
|
|
||||||
<div class="card-header d-flex justify-content-between align-items-center quick-edit-wrap">
|
|
||||||
<span><span class="section-icon report" aria-hidden="true"></span>Report</span>
|
|
||||||
{% if can_edit %}
|
|
||||||
<button class="btn btn-sm btn-link text-muted p-0 quick-edit-button"
|
|
||||||
hx-get="{% url 'atlas:case_inline_field' case.pk 'report' %}?edit=1&show_label=0"
|
|
||||||
hx-target="#case-inline-report"
|
|
||||||
hx-swap="outerHTML">quick edit</button>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
{% url 'atlas:case_inline_field' case.pk 'report' as report_url %}
|
|
||||||
{% with endpoint_default=report_url|add:"?show_label=0" endpoint_edit=report_url|add:"?edit=1&show_label=0" %}
|
|
||||||
{% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label='Report' can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-report' field_kind='textarea' value=case.report display_value=case.report field_name='report' error_message='' %}
|
|
||||||
{% endwith %}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<aside class="col-12 col-md-4 case-metadata">
|
|
||||||
{# ID/date shown above; removed duplicate here #}
|
|
||||||
|
|
||||||
<div class="case-meta-item">
|
|
||||||
<span class="case-meta-label">Subspecialty</span>
|
|
||||||
<div class="case-meta-value d-flex align-items-center justify-content-end">
|
|
||||||
<div id="case-inline-subspecialty">
|
|
||||||
{% if case.subspecialty.all %}
|
|
||||||
{% for sub in case.subspecialty.all %}
|
|
||||||
<span class="badge bg-secondary ms-1">{{ sub.get_link|safe }}</span>
|
|
||||||
{% endfor %}
|
|
||||||
{% else %}
|
|
||||||
<span class="badge bg-secondary ms-1 text-muted">None</span>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
{% if can_edit %}
|
|
||||||
<button class="btn btn-sm btn-link text-muted p-0 quick-edit-button ms-2"
|
|
||||||
hx-get="{% url 'atlas:case_inline_field' case.pk 'subspecialty' %}?edit=1&show_label=0"
|
|
||||||
hx-target="#case-inline-subspecialty"
|
|
||||||
hx-swap="outerHTML">quick edit</button>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="case-meta-item">
|
|
||||||
<span class="case-meta-label">Pathological process</span>
|
|
||||||
<div class="case-meta-value d-flex align-items-center justify-content-end">
|
|
||||||
<div>
|
|
||||||
{% if case.pathological_process.all %}
|
|
||||||
{% for p in case.pathological_process.all %}
|
|
||||||
<span class="badge bg-secondary ms-1">{{ p.get_link|safe }}</span>
|
|
||||||
{% endfor %}
|
|
||||||
{% else %}
|
|
||||||
<span class="badge bg-secondary ms-1 text-muted">None</span>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="case-meta-item">
|
|
||||||
<span class="case-meta-label">Diagnostic certainty</span>
|
|
||||||
<div class="case-meta-value d-flex align-items-center justify-content-end">
|
|
||||||
{% url 'atlas:case_inline_field' case.pk 'diagnostic_certainty' as diag_url %}
|
|
||||||
{% with endpoint_default=diag_url|add:"?show_label=0" endpoint_edit=diag_url|add:"?edit=1&show_label=0" %}
|
|
||||||
{% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label="Diagnostic certainty" can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-diagnostic_certainty' field_kind='select' value=case.get_diagnostic_certainty_display display_value=case.get_diagnostic_certainty_display field_name='diagnostic_certainty' error_message='' %}
|
|
||||||
{% endwith %}
|
|
||||||
{% if can_edit %}
|
|
||||||
<button class="btn btn-sm btn-link text-muted p-0 quick-edit-button ms-2"
|
|
||||||
hx-get="{% url 'atlas:case_inline_field' case.pk 'diagnostic_certainty' %}?edit=1&show_label=0"
|
|
||||||
hx-target="#case-inline-diagnostic_certainty"
|
|
||||||
hx-swap="outerHTML">quick edit</button>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<aside class="col-12 col-md-4 case-metadata">
|
||||||
|
{# ID/date shown above; removed duplicate here #}
|
||||||
|
|
||||||
|
<div class="case-meta-item">
|
||||||
|
<span class="case-meta-label">Subspecialty</span>
|
||||||
|
<div class="case-meta-value d-flex align-items-center justify-content-end">
|
||||||
|
<div id="case-inline-subspecialty">
|
||||||
|
{% if case.subspecialty.all %}
|
||||||
|
{% for sub in case.subspecialty.all %}
|
||||||
|
<span class="badge bg-secondary ms-1">{{ sub.get_link|safe }}</span>
|
||||||
|
{% endfor %}
|
||||||
|
{% else %}
|
||||||
|
<span class="badge bg-secondary ms-1 text-muted">None</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% if can_edit %}
|
||||||
|
<button class="btn btn-sm btn-link text-muted p-0 quick-edit-button ms-2"
|
||||||
|
hx-get="{% url 'atlas:case_inline_field' case.pk 'subspecialty' %}?edit=1&show_label=0"
|
||||||
|
hx-target="#case-inline-subspecialty"
|
||||||
|
hx-swap="outerHTML">quick edit</button>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="case-meta-item">
|
||||||
|
<span class="case-meta-label">Pathological process</span>
|
||||||
|
<div class="case-meta-value d-flex align-items-center justify-content-end">
|
||||||
|
<div>
|
||||||
|
{% if case.pathological_process.all %}
|
||||||
|
{% for p in case.pathological_process.all %}
|
||||||
|
<span class="badge bg-secondary ms-1">{{ p.get_link|safe }}</span>
|
||||||
|
{% endfor %}
|
||||||
|
{% else %}
|
||||||
|
<span class="badge bg-secondary ms-1 text-muted">None</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="case-meta-item">
|
||||||
|
<span class="case-meta-label">Diagnostic certainty</span>
|
||||||
|
<div class="case-meta-value d-flex align-items-center justify-content-end">
|
||||||
|
{% url 'atlas:case_inline_field' case.pk 'diagnostic_certainty' as diag_url %}
|
||||||
|
{% with endpoint_default=diag_url|add:"?show_label=0" endpoint_edit=diag_url|add:"?edit=1&show_label=0" %}
|
||||||
|
{% include 'atlas/partials/case_inline_field.html' with show_label=0 editing=False field_label="Diagnostic certainty" can_edit=can_edit endpoint_url_default=endpoint_default endpoint_url_edit=endpoint_edit container_id='case-inline-diagnostic_certainty' field_kind='select' value=case.get_diagnostic_certainty_display display_value=case.get_diagnostic_certainty_display field_name='diagnostic_certainty' error_message='' %}
|
||||||
|
{% endwith %}
|
||||||
|
{% if can_edit %}
|
||||||
|
<button class="btn btn-sm btn-link text-muted p-0 quick-edit-button ms-2"
|
||||||
|
hx-get="{% url 'atlas:case_inline_field' case.pk 'diagnostic_certainty' %}?edit=1&show_label=0"
|
||||||
|
hx-target="#case-inline-diagnostic_certainty"
|
||||||
|
hx-swap="outerHTML">quick edit</button>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<h5>Resources</h5>
|
<h5>Resources</h5>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user