Enhance quick-edit button functionality and layout in case metadata display
This commit is contained in:
Ross
@@ -78,20 +78,53 @@
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Generic hover-only quick-edit behaviour for host-wrapped buttons */
|
||||
/* Generic hover-only quick-edit behaviour for host-wrapped buttons.
|
||||
Buttons are positioned absolutely so revealing them does not shift layout. */
|
||||
.quick-edit-wrap { position: relative; display: inline-flex; align-items: center; }
|
||||
.quick-edit-wrap .quick-edit-button {
|
||||
position: absolute;
|
||||
right: 0.25rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.15s ease;
|
||||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||
background: rgba(255,255,255,0.95) !important;
|
||||
border-radius: .25rem;
|
||||
padding: 0 .25rem;
|
||||
color: #0d6efd !important; /* clearer action colour */
|
||||
}
|
||||
.quick-edit-wrap:hover .quick-edit-button,
|
||||
.quick-edit-wrap:focus-within .quick-edit-button {
|
||||
opacity: 0.65;
|
||||
opacity: 0.95;
|
||||
pointer-events: auto;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.quick-edit-wrap .quick-edit-button:hover { opacity: 1; }
|
||||
|
||||
/* Metadata-specific quick-edit: ensure edit button overlays without moving badges */
|
||||
.case-meta-item { position: relative; }
|
||||
.case-meta-item .quick-edit-button {
|
||||
position: absolute;
|
||||
right: 0.25rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 6;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
background: rgba(255,255,255,0.95) !important;
|
||||
padding: 0 .25rem;
|
||||
border-radius: .25rem;
|
||||
color: #0d6efd !important;
|
||||
border: 1px solid rgba(13,110,253,0.08);
|
||||
}
|
||||
.case-meta-item:hover .quick-edit-button,
|
||||
.case-meta-item:focus-within .quick-edit-button {
|
||||
opacity: 0.95;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Normal group visual style */
|
||||
.normal-group { border: 1px solid rgba(13,110,253,0.15); background: #f8fbff; padding: .75rem; border-radius: .375rem; margin-bottom: .75rem; }
|
||||
.normal-group .normal-heading { font-weight: 600; color: #0d6efd; margin-bottom: .5rem; }
|
||||
@@ -104,9 +137,17 @@
|
||||
.section-icon.history { background:#198754; }
|
||||
.section-icon.discussion { background:#fd7e14; }
|
||||
.section-icon.report { background:#dc3545; }
|
||||
.case-metadata { border-left: 1px solid #eee; padding-left: 1rem; }
|
||||
.case-meta-item { margin-bottom: .5rem; }
|
||||
.case-meta-label { font-weight:600; font-size:0.9rem; display:block; }
|
||||
.case-metadata { border-left: 1px solid #eee; padding-left: 1rem; text-align:left; }
|
||||
.case-meta-item { margin-bottom: .5rem; }
|
||||
.case-meta-label { font-weight:600; font-size:0.9rem; display:block; }
|
||||
@media (min-width: 768px) {
|
||||
/* Keep metadata stacked (one per row), but put label and value on same row */
|
||||
.case-metadata { text-align: right; }
|
||||
.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-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; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="atlas {% if case.scrapped %}atlas-scrapped{% endif %}">
|
||||
@@ -346,48 +387,52 @@
|
||||
|
||||
<div class="case-meta-item">
|
||||
<span class="case-meta-label">Subspecialty</span>
|
||||
<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>
|
||||
<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>
|
||||
{% if can_edit %}
|
||||
<div class="mt-1"><button class="btn btn-sm btn-link text-muted p-0 quick-edit-button"
|
||||
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></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="case-meta-item">
|
||||
<span class="case-meta-label">Pathological process</span>
|
||||
<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 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="d-flex align-items-center">
|
||||
<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 %}
|
||||
<div class="ms-2"><button class="btn btn-sm btn-link text-muted p-0 quick-edit-button"
|
||||
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></div>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user