From 9614567e22c92429ac8aa36cf5d9e3c9f7121b8c Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Thu, 26 Dec 2024 16:37:34 +1100
Subject: [PATCH] Remove background of readings list on dashboard

---
 app/templates/dashboard.html | 96 +++++++++++++++++-------------------
 1 file changed, 44 insertions(+), 52 deletions(-)

diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 602a2a3..643cf44 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -166,63 +166,55 @@
     </div>
 
     <!-- Readings Table -->
-    <div class="bg-white rounded-lg shadow-md overflow-hidden">
-        <div class="overflow-x-auto">
-
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                {% for reading in readings %}
-                <a href="{{ url_for('main.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">
-                    <!-- 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"
-                            stroke="currentColor" stroke-width="1.5">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M12 8v4l3 3m9-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
-                        </svg>
-                        <span title="{{ reading.timestamp.strftime('%d %b %Y, %I:%M %p') }}">
-                            {{ reading.relative_timestamp }}
-                        </span>
-                    </div>
-
-                    <!-- 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-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>
-                    </div>
-
-                    <!-- Heart Rate and Arrow -->
-                    <div class="flex justify-between items-center mt-4">
-                        <div class="text-sm text-gray-600">
-                            <span class="block text-lg font-semibold text-gray-800">Heart Rate</span>
-                            <span class="text-2xl font-bold text-green-600">{{ reading.heart_rate }}</span>
-                            <span class="text-sm text-gray-500">bpm</span>
-                        </div>
-                        <!-- Arrow Icon -->
-                        <div class="text-gray-400 hover:text-gray-600">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                                stroke="currentColor" class="h-5 w-5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                    d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
-                            </svg>
-
-                        </div>
-                    </div>
-                </a>
-                {% else %}
-                <div class="col-span-full text-center text-sm text-gray-500">
-                    No readings found.
-                </div>
-                {% endfor %}
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {% for reading in readings %}
+        <a href="{{ url_for('main.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">
+            <!-- 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"
+                    stroke="currentColor" stroke-width="1.5">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                        d="M12 8v4l3 3m9-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
+                </svg>
+                <span title="{{ reading.timestamp.strftime('%d %b %Y, %I:%M %p') }}">
+                    {{ reading.relative_timestamp }}
+                </span>
             </div>
 
+            <!-- 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-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>
+            </div>
 
+            <!-- Heart Rate and Arrow -->
+            <div class="flex justify-between items-center mt-4">
+                <div class="text-sm text-gray-600">
+                    <span class="block text-lg font-semibold text-gray-800">Heart Rate</span>
+                    <span class="text-2xl font-bold text-green-600">{{ reading.heart_rate }}</span>
+                    <span class="text-sm text-gray-500">bpm</span>
+                </div>
+                <!-- Arrow Icon -->
+                <div class="text-gray-400 hover:text-gray-600">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="h-5 w-5">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+                    </svg>
+
+                </div>
+            </div>
+        </a>
+        {% else %}
+        <div class="col-span-full text-center text-sm text-gray-500">
+            No readings found.
         </div>
+        {% endfor %}
     </div>
 
-
 </div>
 {% endblock %}
\ No newline at end of file