Refactor case prior display: enhance layout with Bootstrap cards for improved readability and user interaction
This commit is contained in:
Ross
@@ -4,106 +4,109 @@
|
|||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
<div>
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||||
|
<div>
|
||||||
{% if previous %}
|
{% if previous %}
|
||||||
<a href="{% url 'atlas:collection_case_questions' collection.id previous.id %}">Previous question</a>
|
<a class="btn btn-outline-secondary btn-sm" href="{% url 'atlas:collection_case_priors' collection.id previous.id %}">← Previous</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
Viewing question as part of collection: <a href="{% url 'atlas:collection_detail' collection.id %}">{{collection.name}}</a> [{{case_number|add:1}}/{{collection_length}}]
|
</div>
|
||||||
{% if next %}
|
<div class="text-center">
|
||||||
<a href="{% url 'atlas:collection_case_questions' collection.id next.id %}">Next question</a>
|
<div class="h6 mb-0">Viewing question in collection</div>
|
||||||
{% endif %}
|
<div>
|
||||||
|
<a href="{% url 'atlas:collection_detail' collection.id %}" class="fw-bold">{{collection.name}}</a>
|
||||||
|
<small class="text-muted">[{{case_number|add:1}}/{{collection_length}}]</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{% if next %}
|
||||||
|
<a class="btn btn-outline-secondary btn-sm" href="{% url 'atlas:collection_case_priors' collection.id next.id %}">Next →</a>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2>Case: <a href="{% url 'atlas:case_detail' case_detail.case.pk %}">{{case_detail.case.title}}</a></h2>
|
<h2 class="mb-3">Case: <a href="{% url 'atlas:case_detail' case_detail.case.pk %}" class="text-decoration-none">{{case_detail.case.title}}</a></h2>
|
||||||
|
|
||||||
<p>This page allows you to add series from prior cases to a case in a collection. In order to be available here the cases must be linked on the system.</p>
|
<div class="card mb-4">
|
||||||
<p>It is necessary to give a description of how the cases are related that will be displayed to the user when viewing the case.</p>
|
<div class="card-body">
|
||||||
|
<p class="mb-1">This page allows you to add series from prior cases to a case in a collection. In order to be available here the cases must be linked on the system.</p>
|
||||||
|
<p class="mb-0">It is necessary to give a description of how the cases are related that will be displayed to the user when viewing the case.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h3>Available priors</h3>
|
<h3 class="mb-3">Available priors</h3>
|
||||||
|
|
||||||
<ul>
|
<div class="row g-3">
|
||||||
{% for case, added, relation, visibility in available_priors %}
|
{% for case, added, relation, visibility in available_priors %}
|
||||||
|
<div class="col-12 col-md-6 col-lg-4" data-case="{{case.id}}">
|
||||||
|
<div class="card h-100 shadow-sm {% if added %}border-success{% else %}border-secondary{% endif %}">
|
||||||
|
<div class="card-body d-flex flex-column">
|
||||||
|
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||||
|
<h5 class="card-title mb-0">{{case.title}}</h5>
|
||||||
|
<div>
|
||||||
|
{% if added %}
|
||||||
|
<span class="badge bg-success">Added</span>
|
||||||
|
{% else %}
|
||||||
|
<span class="badge bg-secondary">Available</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<li class='
|
<p class="card-text small text-muted mb-2">Relation: <span class="fw-medium">{{ relation }}</span></p>
|
||||||
{% if added %}
|
|
||||||
added
|
|
||||||
{% else %}
|
|
||||||
not-added
|
|
||||||
{% endif %}
|
|
||||||
' data-case={{case.id}}>
|
|
||||||
{{case.title}} / {{added}} / {{relation}} / <a href="{% url 'atlas:case_detail' case.id %}">View case</a>
|
|
||||||
<br/>{{case.get_series_blocks|safe}}
|
|
||||||
|
|
||||||
<br/>
|
<div class="mb-3 small">{{case.get_series_blocks|safe}}</div>
|
||||||
|
|
||||||
{% if not added %}
|
<div class="mt-auto">
|
||||||
<form hx-post="{% url 'atlas:collection_case_priors' collection.id case_detail.case.pk %}"
|
<div class="d-flex gap-2 mb-2">
|
||||||
hx-target="#htmx-response-{{case.id}}"
|
<a href="{% url 'atlas:case_detail' case.id %}" class="btn btn-sm btn-outline-primary">View case</a>
|
||||||
_="on htmx:afterRequest log 'test' then remove me">
|
</div>
|
||||||
{% csrf_token %}
|
|
||||||
<input type="hidden" name="prior_case_id" value="{{case.id}}" />
|
{% if not added %}
|
||||||
<input type="text" name="relation" value="{{relation}}" placeholder="relation to case" />
|
<form class="row g-2" hx-post="{% url 'atlas:collection_case_priors' collection.id case_detail.case.pk %}"
|
||||||
<br />
|
hx-target="#htmx-response-{{case.id}}">
|
||||||
<label for="prior_visibility_{{case.id}}">Visibility:</label>
|
{% csrf_token %}
|
||||||
<select name="prior_visibility" id="prior_visibility_{{case.id}}">
|
<input type="hidden" name="prior_case_id" value="{{case.id}}" />
|
||||||
<option value="AL"
|
<div class="col-12">
|
||||||
{% if visibility == 'AL' %}
|
<input class="form-control form-control-sm" type="text" name="relation" value="{{relation}}" placeholder="Relation to case" />
|
||||||
selected
|
</div>
|
||||||
{% endif %}
|
<div class="col-8">
|
||||||
>Always</option>
|
<select class="form-select form-select-sm" name="prior_visibility" id="prior_visibility_{{case.id}}">
|
||||||
<option value="RE"
|
<option value="AL" {% if visibility == 'AL' %}selected{% endif %}>Always</option>
|
||||||
{% if visibility == 'RE' %}
|
<option value="RE" {% if visibility == 'RE' %}selected{% endif %}>Review</option>
|
||||||
selected
|
<option value="NO" {% if visibility == 'NO' %}selected{% endif %}>None</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-4 d-grid">
|
||||||
|
<button class="btn btn-sm btn-primary" type="submit">Add</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
{% else %}
|
||||||
|
<form hx-post="{% url 'atlas:collection_case_priors' collection.id case_detail.case.pk %}"
|
||||||
|
hx-target="#htmx-response-{{case.id}}">
|
||||||
|
{% csrf_token %}
|
||||||
|
<input type="hidden" name="remove" value="{{case.id}}" />
|
||||||
|
<div class="mb-2 small text-muted">Current relation: <strong>{{relation}}</strong></div>
|
||||||
|
<div class="d-flex gap-2">
|
||||||
|
<select class="form-select form-select-sm w-50" name="prior_visibility" id="prior_visibility_{{case.id}}" disabled>
|
||||||
|
<option value="AL" {% if visibility == 'AL' %}selected{% endif %}>Always</option>
|
||||||
|
<option value="RE" {% if visibility == 'RE' %}selected{% endif %}>Review</option>
|
||||||
|
<option value="NO" {% if visibility == 'NO' %}selected{% endif %}>None</option>
|
||||||
|
</select>
|
||||||
|
<button class="btn btn-sm btn-danger" type="submit">Remove</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
>Review</option>
|
</div>
|
||||||
<option value="NO"
|
</div>
|
||||||
{% if visibility == 'NO' %}
|
|
||||||
selected
|
|
||||||
{% endif %}
|
|
||||||
>None</option>
|
|
||||||
</select>
|
|
||||||
<br />
|
|
||||||
<button class="btn primary">Add to case</button>
|
|
||||||
</form>
|
|
||||||
{% else %}
|
|
||||||
<form hx-post="{% url 'atlas:collection_case_priors' collection.id case_detail.case.pk %}"
|
|
||||||
hx-target="#htmx-response-{{case.id}}"
|
|
||||||
_="on htmx:afterRequest log 'test' then remove me">
|
|
||||||
Case available: {{relation}}
|
|
||||||
<input type="hidden" name="remove" value="{{case.id}}" />
|
|
||||||
<br />
|
|
||||||
<label for="prior_visibility_{{case.id}}">Visibility:</label>
|
|
||||||
<select name="prior_visibility" id="prior_visibility_{{case.id}}" disabled>
|
|
||||||
<option value="AL"
|
|
||||||
{% if visibility == 'AL' %}
|
|
||||||
selected
|
|
||||||
{% endif %}
|
|
||||||
>Always</option>
|
|
||||||
<option value="RE"
|
|
||||||
{% if visibility == 'RE' %}
|
|
||||||
selected
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
>Review</option>
|
|
||||||
<option value="NO"
|
|
||||||
{% if visibility == 'NO' %}
|
|
||||||
selected
|
|
||||||
{% endif %}
|
|
||||||
>None</option>
|
|
||||||
</select>
|
|
||||||
<br />
|
|
||||||
<button class="btn primary">Remove from case</button>
|
|
||||||
</form>
|
|
||||||
{% endif %}
|
|
||||||
<span id="htmx-response-{{case.id}}"></span>
|
|
||||||
|
|
||||||
</li>
|
|
||||||
|
|
||||||
|
<div class="card-footer bg-transparent">
|
||||||
|
<span id="htmx-response-{{case.id}}" class="small"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user