From 1d224bc01bdbfc9fa43f96431b071f753c1d70cb Mon Sep 17 00:00:00 2001 From: Konrad du Plessis Date: Fri, 15 May 2026 08:23:20 +0200 Subject: [PATCH] fix(templates): convert 8 broken multi-line {# #} comments + clarify cryptic sublines MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit CLAUDE.md gotcha #1 strikes again — the dashboard audit pass added 7 multi-line {# ... #} comment blocks across index.html, report.html, and pdf/report_pdf.html. All rendered as literal text on the live pages (Konrad screenshotted them). Also caught an old one in admin/base_site.html that was technically broken syntax but non-rendering (outside any block). All 8 converted to {% comment %}{% endcomment %}. CLAUDE.md updated: - Bumped the bit-us count (4 → confirmed 4 + 5 + 7 across three features). Added a grep-one-liner sanity check that finds broken multi-line {# blocks across all templates so future passes can spot-check before committing. Cryptic hero-card sublines on /report/ clarified (Konrad asked what they mean): - "as of 08:13" → "Live total at 08:13 today · for " with hover tooltip explaining the snapshot semantics. - "Company Avg / Working Day" / "/ Month" labels renamed to "Avg Labour Cost / Working Day" / "/ Month". Sublines simplified to "Lifetime average across all crews" / "Daily figure × 30.44 days". Both gain hover tooltips that explain the math and the "current pay rates" basis. Pure template + docs change. 173/173 tests still passing (no test changes — these are cosmetic fixes). Co-Authored-By: Claude Opus 4.7 (1M context) --- CLAUDE.md | 2 +- core/templates/admin/base_site.html | 16 +++---- core/templates/core/index.html | 6 ++- core/templates/core/pdf/report_pdf.html | 6 ++- core/templates/core/report.html | 56 +++++++++++++++++-------- 5 files changed, 56 insertions(+), 30 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 55299ff..7ba9937 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -28,7 +28,7 @@ answers — see `docs/plans/parked-work.md`. - Add plain English comments explaining what complex logic does - The project owner is not a programmer — comments should be understandable by a non-technical person - When creating or editing code, maintain the existing comment structure -- **Django template comments `{# ... #}` are SINGLE-LINE only.** Multi-line blocks need `{% comment %}...{% endcomment %}`. A `{#` on line N with no closing `#}` on the same line renders the whole block as literal text onto the page (and silently — no error). This bit us 4× during the Adjustments feature. Also: the literal tokens `{#` and `#}` cannot appear inside a `{% comment %}` block — they'll be parsed as a nested comment marker. Rephrase meta-notes about comment syntax OUTSIDE the block. +- **Django template comments `{# ... #}` are SINGLE-LINE only.** Multi-line blocks need `{% comment %}...{% endcomment %}`. A `{#` on line N with no closing `#}` on the same line renders the whole block as literal text onto the page (and silently — no error). This bit us 4× during the Adjustments feature, 5× during the Absences feature, and 7× during the 15 May dashboard-audit pass. **Sanity check after any template edit:** `grep -rn "^\s*{#" core/templates/ | awk -F: '$0 !~ /#}/ {print}'` — every match is a multi-line broken comment. Also: the literal tokens `{#` and `#}` cannot appear inside a `{% comment %}` block — they'll be parsed as a nested comment marker. Rephrase meta-notes about comment syntax OUTSIDE the block. - **Duplicate `id=""` attributes cause silent bugs.** `document.getElementById()` returns only the FIRST match in DOM order, so adding a second element with an existing id silently steals the handler from the original. Grep the template before assigning any new id (caught `adjSelectAll` collision in Task 6 — header checkbox stole the Add-Adjustment modal's Select-All handler). - **Bootstrap dropdowns inside `.card` elements get clipped by sibling cards.** A `.dropdown-menu` with `z-index: 1050` rendered inside a filter `.card` will STILL appear behind a sibling table `.card` that follows in document order. Bootstrap's `transform: translate(...)` Popper positioning creates a new stacking context — the z-index is measured INSIDE the parent card, not globally. The fix: lift the wrapping element (e.g. the filter `
`) with `style="position: relative; z-index: 10;"` so the entire card sits above its siblings. The dropdown's local z-index then resolves correctly. Bit us on the Absences filter dropdown (May 2026). - **JS reading from `data-worker-id` was unreliable; read from `[value]` directly.** Round A's first absence-form team filter rendered `data-worker-id="{{ worker.choice_value }}"` on the row `
` and read it via `row.dataset.workerId`. On production this hid ALL workers when a team was selected — likely a stale-template / template-render mismatch. The proven pattern (used by `attendance_log.html` for years) is to read `row.querySelector('input[name="workers"]').value`. The form widget's `` is the source of truth; data attributes are an unnecessary indirection. diff --git a/core/templates/admin/base_site.html b/core/templates/admin/base_site.html index 71d3a59..1fd00d8 100644 --- a/core/templates/admin/base_site.html +++ b/core/templates/admin/base_site.html @@ -1,11 +1,13 @@ {% extends "admin/base.html" %} -{# =========================================================== - Minimal override of the default admin/base_site.html. - The sole purpose right now is to inject a small