peterstockings/bloodpressure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make table view responsive

Browse Source
This commit is contained in:
Peter Stockings
2026-03-13 15:28:06 +11:00
parent 910d583966
commit e2d85f0a88
2 changed files with 67 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/static/css/tailwind.css
View File

File diff suppressed because one or more lines are too long

69
app/templates/partials/dashboard_table.html
View File

@@ -19,9 +19,72 @@
</form>
</div>
<!-- Data Table -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
<div class="overflow-x-auto">
<!-- Data Container -->
<div class="bg-transparent md:bg-white md:rounded-2xl md:shadow-sm md:border md:border-gray-100 overflow-hidden">
<!-- Mobile Card View (Hidden on medium screens and up) -->
<div class="md:hidden space-y-4">
{% for reading in readings %}
<div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 flex flex-col gap-3">
<div class="flex justify-between items-center border-b border-gray-50 pb-2">
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<span class="text-sm font-bold text-gray-800">{{ reading.local_timestamp.strftime('%Y-%m-%d')
}}</span>
</div>
<span class="text-sm font-medium text-gray-500">{{ reading.local_timestamp.strftime('%I:%M %p')
}}</span>
</div>
<div class="flex justify-between items-center">
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Blood Pressure</span>
<div class="flex items-baseline gap-1">
<span
class="font-bold text-lg {{ 'text-red-500' if reading.systolic >= 130 else 'text-gray-900' }}">{{
reading.systolic }}</span>
<span class="font-medium text-gray-400">/</span>
<span
class="font-bold text-lg {{ 'text-red-500' if reading.diastolic >= 80 else 'text-gray-900' }}">{{
reading.diastolic }}</span>
<span class="text-xs text-gray-500 font-medium ml-1">mmHg</span>
</div>
</div>
<div class="flex justify-between items-center">
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Heart Rate</span>
<div class="flex items-baseline">
<span class="font-bold text-lg text-gray-900">{{ reading.heart_rate }}</span>
<span class="text-xs text-gray-500 font-medium ml-1">bpm</span>
</div>
</div>
<div class="flex justify-end pt-3 mt-1 border-t border-gray-50">
<a href="{{ url_for('reading.edit_reading', reading_id=reading.id) }}"
class="inline-flex items-center gap-1 text-primary-600 hover:text-primary-800 text-sm font-bold transition-colors">
Edit
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
{% else %}
<div
class="bg-white p-8 text-center rounded-xl shadow-sm border border-gray-100 flex flex-col items-center gap-3">
<svg class="w-12 h-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
</svg>
<span class="text-sm font-medium text-gray-500">No readings found for this date range.</span>
</div>
{% endfor %}
</div>
<!-- Desktop Table View (Hidden on small screens) -->
<div class="hidden md:block overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>