Refactor case display layout for improved organization and responsiveness

This commit is contained in:
Ross
2025-10-31 20:56:33 +00:00
parent 6bc43135b9
commit 55371a9d0b
+38 -7
View File
@@ -140,11 +140,32 @@
</ul>
</p>
<p class="pre-whitespace"><b>History:</b> {{ case.history |linebreaks}}</p>
<p class="pre-whitespace"><b>Discussion:</b> {{ case.discussion |linebreaks}}</p>
<p class="pre-whitespace"><b>Report:</b> {{ case.report |linebreaks}}</p>
<div class="row g-3 mb-3">
<div class="col-12 col-md-4">
<div class="card h-100">
<div class="card-header">History</div>
<div class="card-body">
<div class="pre-whitespace">{{ case.history|linebreaks }}</div>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card h-100">
<div class="card-header">Discussion</div>
<div class="card-body">
<div class="pre-whitespace">{{ case.discussion|linebreaks }}</div>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card h-100">
<div class="card-header">Report</div>
<div class="card-body">
<div class="pre-whitespace">{{ case.report|linebreaks }}</div>
</div>
</div>
</div>
</div>
<p class="pre-whitespace"><b>Resource</b><br/>{% for caseresource in case.caseresource_set.all %}
<a href='{% url "atlas:resource_detail" caseresource.resource.pk %}'>{{caseresource.resource.name}}</a>
{% if caseresource.pre_review %}
@@ -157,7 +178,9 @@
<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"
@@ -227,7 +250,7 @@
href="{% url 'atlas:case_scrap' pk=case.pk %}">(toggle)</a> {% endcomment %}
<div class="atlas-answer">
<p class="pre-whitespace">
<div class="pre-whitespace">
Condition:
<ul>
{% for con in case.condition.all %}
@@ -373,7 +396,7 @@
</ul>
</details>
</div>
</p>
</div>
</div>
Subspecialty:
<ul>
@@ -728,6 +751,14 @@
background-color: blue;
transition: background-color 0.3s ease, border 0.3s ease;
}
/* Make series blocks act as flex items and wrap neatly on small screens */
.series-block {
display: inline-block;
vertical-align: top;
min-width: 180px;
max-width: 320px;
margin-right: 0.5rem;
}
#series-reorder-list .dragging {
opacity: 0.5;
}