Enhance case view layout and styling for improved readability and user experience
This commit is contained in:
Ross
@@ -2,43 +2,48 @@
|
||||
{% load crispy_forms_tags %}
|
||||
|
||||
{% block content %}
|
||||
<span class="collection-name-blend">Collection: {{collection}}</span>
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<h2 class="mb-0">Case {{case_number|add:1}}
|
||||
<div class="mb-2"><small class="text-muted">Collection: <strong>{{collection}}</strong></small></div>
|
||||
|
||||
{% if show_title %}
|
||||
: {{case.title}}
|
||||
{% endif %}
|
||||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||
<div>
|
||||
<h2 class="h4 mb-0">Case {{case_number|add:1}}
|
||||
|
||||
{% if show_title %}
|
||||
: {{case.title}}
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if question_completed %}
|
||||
<span class="stamp-white">REVIEW</span>
|
||||
{% endif %}
|
||||
{% if question_completed %}
|
||||
<span class="badge bg-warning text-dark ms-2 small">REVIEW</span>
|
||||
{% endif %}
|
||||
|
||||
</h2>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Case jump dropdown (loads via HTMX) - placed to the right of the header -->
|
||||
<div class="dropdown ms-3">
|
||||
<a class="btn btn-outline-secondary btn-sm dropdown-toggle" href="#" role="button" id="caseJump" data-bs-toggle="dropdown" aria-expanded="false"
|
||||
hx-get="{% url 'atlas:collection_case_jump_partial' pk=collection.pk %}?current={{case_number}}{% if cid %}&cid={{cid}}&passcode={{passcode}}{% endif %}"
|
||||
hx-target="#case-jump-menu"
|
||||
hx-swap="innerHTML"
|
||||
hx-trigger="click">
|
||||
Jump
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end" id="case-jump-menu">
|
||||
<div class="px-3 py-2 text-muted">Loading...</div>
|
||||
<div class="d-flex align-items-center ms-3">
|
||||
<div class="dropdown">
|
||||
<a class="btn btn-outline-secondary btn-sm dropdown-toggle" href="#" role="button" id="caseJump" data-bs-toggle="dropdown" aria-expanded="false"
|
||||
hx-get="{% url 'atlas:collection_case_jump_partial' pk=collection.pk %}?current={{case_number}}{% if cid %}&cid={{cid}}&passcode={{passcode}}{% endif %}"
|
||||
hx-target="#case-jump-menu"
|
||||
hx-swap="innerHTML"
|
||||
hx-trigger="click">
|
||||
Jump
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end" id="case-jump-menu">
|
||||
<div class="px-3 py-2 text-muted">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if not question_completed and collection.question_time_limit is not None %}
|
||||
<div id="question-timer-block" style="margin-top:8px; margin-bottom:8px;" title="This question has a time limit of {{ collection.question_time_limit }} seconds. The timer will start when the page loads.">
|
||||
<strong>Time remaining:</strong>
|
||||
<span id="question-timer" aria-live="polite"> </span>
|
||||
<div id="question-timer-progress" style="display:inline-block; vertical-align: middle; width: 200px; margin-left:12px;">
|
||||
<div id="question-timer-progress-outer" style="background:#e9ecef; border-radius:6px; height:10px; overflow:hidden;">
|
||||
<div id="question-timer-progress-inner" style="width:100%; height:100%; background:var(--timer-color, #28a745);"></div>
|
||||
<div id="question-timer-block" class="mb-3" title="This question has a time limit of {{ collection.question_time_limit }} seconds. The timer will start when the page loads.">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div><strong>Time remaining:</strong> <span id="question-timer" aria-live="polite"> </span></div>
|
||||
<div style="flex:1; max-width:320px;">
|
||||
<div class="progress" style="height:10px;">
|
||||
<div id="question-timer-progress-inner" class="progress-bar" role="progressbar" style="width:100%; background:var(--timer-color, #28a745);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="timer-htmx-target" style="display:none;"></div>
|
||||
@@ -53,12 +58,10 @@
|
||||
|
||||
{% if not question_completed %}
|
||||
{% if resources %}
|
||||
<h5>Resources</h4>
|
||||
<ul class="no-list-style">
|
||||
<h5 class="mt-3">Resources</h5>
|
||||
<ul class="list-group list-group-flush mb-3">
|
||||
{% for caseresource in resources %}
|
||||
<li>
|
||||
{{caseresource.resource.get_display}}
|
||||
</li>
|
||||
<li class="list-group-item py-1 small">{{caseresource.resource.get_display}}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
@@ -66,21 +69,21 @@
|
||||
|
||||
|
||||
{% if show_description and case.description %}
|
||||
<div>
|
||||
Description: {{case.description}}
|
||||
<div class="mb-3">
|
||||
<h6 class="mb-1">Description</h6>
|
||||
<p class="mb-0">{{case.description}}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if show_history %}
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
History: {{casedetail.get_history_pre|linebreaks}}
|
||||
<div class="card mb-3">
|
||||
<div class="card-body p-2 d-flex justify-content-between align-items-start">
|
||||
<div class="me-3 small text-muted">History: {{casedetail.get_history_pre|linebreaks}}</div>
|
||||
{% if has_priors %}
|
||||
<div class="ms-2">
|
||||
<span title="This case has priors available for comparison" class="badge bg-secondary text-white rounded-pill small">Priors{% if prior_count %} ({{ prior_count }}){% endif %}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if has_priors %}
|
||||
<div class="ms-2">
|
||||
<span title="This case has priors available for comparison" class="badge bg-info text-dark small">Priors{% if prior_count %} ({{ prior_count }}){% endif %}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -268,25 +271,28 @@
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
{% if previous %}
|
||||
<button type="submit" name="previous" class="save btn btn-default">Previous</button>
|
||||
{% endif %}
|
||||
{% if next %}
|
||||
<button type="submit" name="next" class="save btn btn-default">Next</button>
|
||||
{% elif collection.collection_type == "REP" %}
|
||||
{% if not exam.publish_results %}
|
||||
<button type="submit" name="save" class="save btn btn-default">Save</button>
|
||||
<div class="mb-2">
|
||||
{% if previous %}
|
||||
<button type="submit" name="previous" class="btn btn-outline-secondary btn-sm me-2">Previous</button>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if next %}
|
||||
<button type="submit" name="next" class="btn btn-primary btn-sm me-2">Next</button>
|
||||
{% elif collection.collection_type == "REP" %}
|
||||
{% if not exam.publish_results %}
|
||||
<button type="submit" name="save" class="btn btn-primary btn-sm me-2">Save</button>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if collection.self_review and not collection.feedback_once_collection_complete and not question_completed %}
|
||||
<button type="submit" name="complete_case" class="save btn btn-default">Finish Case</button>
|
||||
<button type="submit" name="complete_case" class="btn btn-success btn-sm">Finish Case</button>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<br />
|
||||
<button type="submit" name="finish" class="save btn btn-default">Overview</button>
|
||||
<button type="submit" id="goto-button" value="test" name="goto" class="hide">goto</button>
|
||||
<div class="mt-3">
|
||||
<button type="submit" name="finish" class="btn btn-outline-secondary btn-sm">Overview</button>
|
||||
<button type="submit" id="goto-button" value="test" name="goto" class="hide">goto</button>
|
||||
</div>
|
||||
</form>
|
||||
<style>
|
||||
label {
|
||||
|
||||
Reference in New Issue
Block a user