Fix a11y + comment style on work log payroll page

- Active breadcrumb item now has aria-current="page" so screen
  readers correctly announce the current page (Bootstrap 5 convention).
- Template section comments changed from {# --- #} to {# === #} to
  match the CLAUDE.md Python convention used elsewhere in the project.

No logic or rendering changes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Konrad du Plessis 2026-04-22 15:51:38 +02:00
parent 9276e588a0
commit 9ae75b45ad

View File

@ -10,11 +10,11 @@
{% block content %}
<div class="container py-4" style="max-width: 960px;">
{# --- Breadcrumb --- #}
{# === Breadcrumb === #}
<nav aria-label="breadcrumb" class="mb-3">
<ol class="breadcrumb small mb-0">
<li class="breadcrumb-item"><a href="{% url 'work_history' %}" class="text-decoration-none">History</a></li>
<li class="breadcrumb-item active">
<li class="breadcrumb-item active" aria-current="page">
{{ log.date|date:"d M Y" }}
{% if log.project %} · <a href="{% url 'project_detail' log.project.id %}" class="text-decoration-none">{{ log.project.name }}</a>{% endif %}
{% if log.team %} · <a href="{% url 'team_detail' log.team.id %}" class="text-decoration-none">{{ log.team.name }}</a>{% endif %}
@ -22,7 +22,7 @@
</ol>
</nav>
{# --- Page header --- #}
{# === Page header === #}
<div class="d-flex align-items-start justify-content-between mb-4">
<div>
<h3 class="mb-1"><i class="fas fa-calendar-day me-2"></i>Work Log Payroll</h3>
@ -33,7 +33,7 @@
</a>
</div>
{# --- Attendance card --- #}
{# === Attendance card === #}
<div class="card mb-3">
<div class="card-body">
<h6 class="fw-semibold small text-uppercase text-muted mb-3">Attendance</h6>
@ -59,7 +59,7 @@
</div>
</div>
{# --- Unpriced OT banner --- #}
{# === Unpriced OT banner === #}
{% if overtime_needs_pricing %}
<div class="alert alert-warning py-2 px-3 mb-3 small">
<i class="fas fa-triangle-exclamation me-1"></i>
@ -68,7 +68,7 @@
</div>
{% endif %}
{# --- Workers table --- #}
{# === Workers table === #}
<div class="card mb-3">
<div class="card-body">
<h6 class="fw-semibold small text-uppercase text-muted mb-3">Workers on this log</h6>
@ -117,7 +117,7 @@
</div>
</div>
{# --- Adjustments card (only when present) --- #}
{# === Adjustments card (only when present) === #}
{% if adjustments %}
<div class="card mb-3">
<div class="card-body">
@ -145,7 +145,7 @@
</div>
{% endif %}
{# --- Totals footer --- #}
{# === Totals footer === #}
<div class="d-flex gap-4 pt-2 small">
<div><span class="text-muted">Total earned:</span> <strong>R {{ total_earned|money }}</strong></div>
<div><span class="text-muted">Paid:</span> <strong>R {{ total_paid|money }}</strong></div>