Redesign BP tracker with lightweight views and unobtrusive save confirmations

2026-09-08 15:07:57 +10:00
parent 25d1774e53
commit 87b60aac9b
40 changed files with 2693 additions and 2553 deletions
@@ -0,0 +1,31 @@
+{% macro field(input, numeric=false, autocomplete='off') %}
+<div class="field">
+    {{ input.label }}
+    {% if numeric %}
+    {{ input(inputmode='numeric', autocomplete=autocomplete, aria_invalid='true' if input.errors else 'false', aria_describedby=input.id ~ '-error' if input.errors else '') }}
+    {% else %}
+    {{ input(autocomplete=autocomplete, aria_invalid='true' if input.errors else 'false', aria_describedby=input.id ~ '-error' if input.errors else '') }}
+    {% endif %}
+    {% if input.errors %}<div class="field-error" id="{{ input.id }}-error">{% for error in input.errors %}<p>{{ error }}</p>{% endfor %}</div>{% endif %}
+</div>
+{% endmacro %}
+
+{% macro reading_rows(readings, sys_threshold, dia_threshold) %}
+{% if readings %}
+<div class="reading-table" role="table" aria-label="Blood pressure readings">
+    <div class="reading-row table-heading" role="row"><span role="columnheader">Date & time</span><span role="columnheader">Blood pressure</span><span role="columnheader">Pulse</span><span role="columnheader">Personal threshold</span><span role="columnheader">Action</span></div>
+    {% for reading in readings %}
+    {% set above = reading.systolic >= sys_threshold or reading.diastolic >= dia_threshold %}
+    <div class="reading-row" role="row">
+        <div role="cell"><time datetime="{{ reading.local_timestamp.isoformat() }}">{{ reading.local_timestamp.strftime('%d %b %Y') }}<small>{{ reading.local_timestamp.strftime('%I:%M %p') }}</small></time></div>
+        <div role="cell" class="reading-value"><span class="mobile-label">Blood pressure</span>{{ reading.systolic }}<span class="slash"> / </span>{{ reading.diastolic }}<small>mmHg</small></div>
+        <div role="cell"><span class="mobile-label">Pulse</span><strong>{{ reading.heart_rate }}</strong> <small class="inline">bpm</small></div>
+        <div role="cell"><span class="status {{ 'status-above' if above else '' }}">{{ 'At / above' if above else 'Below' }} threshold</span></div>
+        <div role="cell"><a class="edit-link" aria-label="Edit reading from {{ reading.local_timestamp.strftime('%d %b %Y at %I:%M %p') }}" href="{{ url_for('reading.edit_reading', reading_id=reading.id) }}">Edit <span aria-hidden="true">↗</span></a></div>
+    </div>
+    {% endfor %}
+</div>
+{% else %}
+<div class="empty-state"><span class="empty-symbol" aria-hidden="true">＋</span><h3>No readings in this period</h3><p>Add a reading or choose another date range.</p><a class="button" href="{{ url_for('reading.add_reading') }}">Add reading</a></div>
+{% endif %}
+{% endmacro %}