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

Improve styling of app

Browse Source
This commit is contained in:
Peter Stockings
2026-03-09 21:50:53 +11:00
parent ab23bf6a9e
commit de66dc5fd8
9 changed files with 708 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
app/templates/dashboard.html
View File

@@ -5,13 +5,13 @@
<div class="flex justify-between items-center">
<h1 class="text-2xl font-bold text-gray-800">Dashboard</h1>
<a rel="prefetch" href="{{ url_for('reading.add_reading') }}"
class="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700">
class="bg-primary-600 text-white px-4 py-2 rounded shadow hover:bg-primary-700">
+ Add New Reading
</a>
</div>
<!-- Weekly Summary -->
<div class="bg-gradient-to-r from-blue-500 to-blue-700 text-white p-6 rounded-lg shadow-md">
<div class="bg-gradient-to-r from-primary-500 to-primary-700 text-white p-6 rounded-xl shadow-md">
<h3 class="text-lg font-bold">Weekly Summary</h3>
<div class="flex justify-between mt-4">
<div>
@@ -43,7 +43,7 @@
<div x-data="{ open: {{ 'true' if request.method == 'POST' else 'false' }} }" class="relative">
<!-- Compact Icon -->
<button @click="open = !open"
class="bg-blue-600 text-white p-3 rounded-full shadow-lg focus:outline-none hover:bg-blue-700">
class="bg-primary-600 text-white p-3 rounded-full shadow-lg focus:outline-none hover:bg-primary-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="w-6 h-6">
<path x-show="!open" stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
@@ -53,7 +53,7 @@
<!-- Collapsible Filter Form -->
<div x-show="open" x-transition.duration.300ms
class="w-full md:w-1/3 bg-white p-6 rounded-lg shadow-lg border border-gray-200">
class="w-full md:w-1/3 bg-white p-6 rounded-xl shadow-lg border border-gray-200">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold text-gray-800">Filter Readings</h3>
</div>
@@ -62,20 +62,20 @@
<div>
<label for="start_date" class="block text-sm font-medium text-gray-700">Start Date</label>
<input type="date" name="start_date" id="start_date"
class="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
class="w-full p-3 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500">
</div>
<!-- End Date -->
<div>
<label for="end_date" class="block text-sm font-medium text-gray-700">End Date</label>
<input type="date" name="end_date" id="end_date"
class="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
class="w-full p-3 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500">
</div>
<!-- Apply Button -->
<div>
<button type="submit"
class="w-full bg-blue-600 text-white py-2 rounded-lg font-semibold shadow-md hover:bg-blue-700 focus:outline-none">
class="w-full bg-primary-600 text-white py-2 rounded-xl font-semibold shadow-md hover:bg-primary-700 focus:outline-none">
Apply Filters
</button>
</div>
@@ -87,13 +87,16 @@
<div class="max-w-5xl mx-auto" x-data="{ activeView: 'list' }">
<!-- Tabs -->
<div class="flex border-b mb-4">
<button @click="activeView = 'list'" :class="{'border-blue-600 text-blue-600': activeView === 'list'}"
<button @click="activeView = 'list'" :class="{'border-primary-600 text-primary-600': activeView === 'list'}"
class="px-4 py-2 text-sm font-medium border-b-2">List View</button>
<button @click="activeView = 'weekly'" :class="{'border-blue-600 text-blue-600': activeView === 'weekly'}"
<button @click="activeView = 'weekly'"
:class="{'border-primary-600 text-primary-600': activeView === 'weekly'}"
class="px-4 py-2 text-sm font-medium border-b-2">Weekly View</button>
<button @click="activeView = 'monthly'" :class="{'border-blue-600 text-blue-600': activeView === 'monthly'}"
<button @click="activeView = 'monthly'"
:class="{'border-primary-600 text-primary-600': activeView === 'monthly'}"
class="px-4 py-2 text-sm font-medium border-b-2">Monthly View</button>
<button @click="activeView = 'graph'" :class="{'border-blue-600 text-blue-600': activeView === 'graph'}"
<button @click="activeView = 'graph'"
:class="{'border-primary-600 text-primary-600': activeView === 'graph'}"
class="px-4 py-2 text-sm font-medium border-b-2">Graph View</button>
</div>
@@ -101,7 +104,7 @@
<div x-show="activeView === 'list'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{% for reading in readings %}
<a href="{{ url_for('reading.edit_reading', reading_id=reading.id) }}"
class="bg-white shadow-md rounded-lg p-4 flex flex-col justify-between relative hover:shadow-lg transition-shadow">
class="bg-white shadow-md rounded-xl p-4 flex flex-col justify-between relative hover:shadow-lg transition-shadow">
<!-- Timestamp -->
<div class="absolute top-2 right-2 flex items-center text-gray-400 text-xs">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1" fill="none" viewBox="0 0 24 24"
@@ -117,7 +120,7 @@
<!-- Blood Pressure -->
<div class="text-sm text-gray-600 mb-2">
<span class="block text-lg font-semibold text-gray-800">Blood Pressure</span>
<span class="text-2xl font-bold text-blue-600">{{ reading.systolic }}</span>
<span class="text-2xl font-bold text-primary-600">{{ reading.systolic }}</span>
<span class="text-lg text-gray-500">/</span>
<span class="text-xl font-bold text-red-600">{{ reading.diastolic }}</span>
<span class="text-sm text-gray-500">mmHg</span>
@@ -157,14 +160,14 @@
{% endif %}
{% for page_num in pagination.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
{% if page_num %}
<a href="{{ url_for('main.dashboard', page=page_num) }}"
class="px-3 py-1 rounded text-sm {% if page_num == pagination.page %}bg-blue-600 text-white{% else %}bg-gray-200 hover:bg-gray-300{% endif %}">
{{ page_num }}
</a>
{% else %}
<span class="text-gray-400">…</span>
{% endif %}
{% if page_num %}
<a href="{{ url_for('main.dashboard', page=page_num) }}"
class="px-3 py-1 rounded text-sm {% if page_num == pagination.page %}bg-primary-600 text-white{% else %}bg-gray-200 hover:bg-gray-300{% endif %}">
{{ page_num }}
</a>
{% else %}
<span class="text-gray-400">…</span>
{% endif %}
{% endfor %}
{% if pagination.has_next %}
@@ -182,7 +185,7 @@
{% if day.readings %}
{% for reading in day.readings %}
<a href="{{ url_for('reading.edit_reading', reading_id=reading.id) }}"
class="block mt-2 p-0 md: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-xl shadow hover:bg-green-200 transition">
<p class="text-xs font-medium text-green-800">
{{ reading.systolic }}/{{ reading.diastolic }} mmHg
</p>
@@ -250,7 +253,7 @@
</div>
{% for reading in day.readings %}
<a href="{{ url_for('reading.edit_reading', reading_id=reading.id) }}"
class="block mt-2 p-0 md: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-xl shadow hover:bg-green-200 transition">
<p class="text-xs font-medium text-green-800">
{{ reading.systolic }}/{{ reading.diastolic }} mmHg
</p>