ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor case display layout for improved organization and responsiveness

Browse Source
This commit is contained in:
Ross
2025-10-31 20:56:33 +00:00
parent 6bc43135b9
commit 55371a9d0b
1 changed files with 39 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atlas/templates/atlas/case_display_block.html
+39 -8
View File
@@ -140,11 +140,32 @@
</ul> </ul>
</p> </p>
<p class="pre-whitespace"><b>History:</b> {{ case.history |linebreaks}}</p> <div class="row g-3 mb-3">
<div class="col-12 col-md-4">
<p class="pre-whitespace"><b>Discussion:</b> {{ case.discussion |linebreaks}}</p> <div class="card h-100">
<div class="card-header">History</div>
<p class="pre-whitespace"><b>Report:</b> {{ case.report |linebreaks}}</p> <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 %} <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> <a href='{% url "atlas:resource_detail" caseresource.resource.pk %}'>{{caseresource.resource.name}}</a>
{% if caseresource.pre_review %} {% if caseresource.pre_review %}
@@ -157,7 +178,9 @@
<div class="pre-whitespace multi-image-block"><b>Series:</b> <div class="pre-whitespace multi-image-block"><b>Series:</b>
<form> <form>
{% partial case-series %} <div class="d-flex flex-wrap gap-2 align-items-start" id="case-series-row">
{% partial case-series %}
</div>
</form> </form>
<span> <span>
<button type="button" <button type="button"
@@ -227,7 +250,7 @@
href="{% url 'atlas:case_scrap' pk=case.pk %}">(toggle)</a> {% endcomment %} href="{% url 'atlas:case_scrap' pk=case.pk %}">(toggle)</a> {% endcomment %}
<div class="atlas-answer"> <div class="atlas-answer">
<p class="pre-whitespace"> <div class="pre-whitespace">
Condition: Condition:
<ul> <ul>
{% for con in case.condition.all %} {% for con in case.condition.all %}
@@ -373,7 +396,7 @@
</ul> </ul>
</details> </details>
</div> </div>
</p> </div>
</div> </div>
Subspecialty: Subspecialty:
<ul> <ul>
@@ -728,6 +751,14 @@
background-color: blue; background-color: blue;
transition: background-color 0.3s ease, border 0.3s ease; 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 { #series-reorder-list .dragging {
opacity: 0.5; opacity: 0.5;
} }