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

Make weekly/monthly view more responsive

Browse Source
This commit is contained in:
Peter Stockings
2024-12-26 17:20:06 +11:00
parent 0fa3535c96
commit 492e2cf19d
2 changed files with 30 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1111,6 +1111,10 @@ video {
padding: 0.25rem;
}
.p-0 {
padding: 0px;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
@@ -1511,6 +1515,12 @@ video {
text-decoration-line: underline;
}
@media (min-width: 640px) {
.sm\:p-0 {
padding: 0px;
}
}
@media (min-width: 768px) {
.md\:w-auto {
width: auto;
@@ -1523,6 +1533,14 @@ video {
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:p-2 {
padding: 0.5rem;
}
.md\:p-4 {
padding: 1rem;
}
}
@media (min-width: 1024px) {

33
app/templates/dashboard.html
View File

@@ -228,22 +228,22 @@
</div>
<!-- Weekly View -->
<div x-show="activeView === 'weekly'" class="grid grid-cols-7 gap-4 text-center">
<div x-show="activeView === 'weekly'" class="grid grid-cols-7 text-center">
{% set today = date.today() %}
{% for i in range(7) %}
{% set day = today - timedelta(days=today.weekday() - i) %}
<div class="border p-4 rounded-lg bg-gray-50 gap-x-4">
<div class="text-sm font-bold text-gray-800">{{ day.strftime('%A, %b %d') }}</div>
<div class="border p-1 md:p-4 bg-gray-50">
<div class="text-sm font-bold text-gray-800">{{ day.strftime('%a, %b %d') }}</div>
{% if day in readings_by_date %}
{% for reading in readings_by_date[day]|sort(attribute="timestamp", reverse = True) %}
<a href="{{ url_for('main.edit_reading', reading_id=reading.id) }}"
class="block mt-2 p-2 bg-green-100 rounded-lg shadow hover:bg-green-200 transition">
class="block mt-2 p-0 md:p-2 bg-green-100 rounded-lg shadow hover:bg-green-200 transition">
<p class="text-xs font-medium text-green-800">
{{ reading.systolic }}/{{ reading.diastolic }} mmHg
</p>
<p class="text-xs text-gray-600">{{ reading.heart_rate }} bpm</p>
<p class="text-xs text-gray-600 mt-1">{{ reading.heart_rate }} bpm</p>
<!-- Timestamp -->
<div class="text-xs text-gray-500 mt-2">
<div class="text-xs text-gray-500 mt-1">
{{ reading.timestamp.strftime('%I:%M %p') }}
</div>
</a>
@@ -264,7 +264,7 @@
</div>
<!-- Day Headers -->
<div class="grid grid-cols-7 gap-4 text-center">
<div class="grid grid-cols-7 text-center">
<div class="font-semibold text-gray-700">Sun</div>
<div class="font-semibold text-gray-700">Mon</div>
<div class="font-semibold text-gray-700">Tue</div>
@@ -275,7 +275,7 @@
</div>
<!-- Calendar Grid -->
<div class="grid grid-cols-7 gap-4 text-center">
<div class="grid grid-cols-7 text-center">
{% set days_in_month = (current_date.replace(month=current_date.month % 12 + 1, day=1) -
timedelta(days=1)).day %}
{% set first_weekday = current_date.weekday() %}
@@ -288,30 +288,21 @@
<!-- Days of the Month -->
{% for day in range(1, days_in_month + 1) %}
{% set current_day = current_date.replace(day=day) %}
<div class="border p-4 rounded-lg bg-gray-50 relative">
<div class="border p-1 md:p-4 rounded-lg bg-gray-50 relative">
<!-- Day Label -->
<div class="text-sm font-bold text-gray-800 text-left">{{ current_day.day }}</div>
<!-- Red Heart for Days with Readings -->
{% if current_day in readings_by_date %}
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"
class="w-5 h-5 text-red-500 absolute top-2 right-2">
<path
d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
</svg>
{% endif %}
<!-- Readings -->
{% if current_day in readings_by_date %}
{% for reading in readings_by_date[current_day]|sort(attribute="timestamp", reverse = True) %}
<a href="{{ url_for('main.edit_reading', reading_id=reading.id) }}"
class="block mt-2 p-2 bg-green-100 rounded-lg shadow hover:bg-green-200 transition">
class="block mt-2 p-0 md:p-2 bg-green-100 rounded-lg shadow hover:bg-green-200 transition">
<p class="text-xs font-medium text-green-800">
{{ reading.systolic }}/{{ reading.diastolic }} mmHg
</p>
<p class="text-xs text-gray-600">{{ reading.heart_rate }} bpm</p>
<p class="text-xs text-gray-600 mt-1">{{ reading.heart_rate }} bpm</p>
<!-- Timestamp -->
<div class="text-xs text-gray-500 mt-2">
<div class="text-xs text-gray-500 mt-1">
{{ reading.timestamp.strftime('%I:%M %p') }}
</div>
</a>