Fix for graph view not highlighted when selected and change list card item icon arrow to 3 dots

This commit is contained in:
Peter Stockings
2024-12-26 21:39:36 +11:00
parent 64c1400465
commit 22535c66b7
2 changed files with 17 additions and 5 deletions

View File

@@ -648,6 +648,18 @@ video {
top: 1.25rem;
}
.bottom-0 {
bottom: 0px;
}
.left-0 {
left: 0px;
}
.right-0 {
right: 0px;
}
.z-10 {
z-index: 10;
}

View File

@@ -82,7 +82,7 @@
</form>
</div>
<div class="max-w-5xl mx-auto" x-data="{ activeView: 'weekly' }">
<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'}"
@@ -91,7 +91,7 @@
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'}"
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 === 'monthly'}"
<button @click="activeView = 'graph'" :class="{'border-blue-600 text-blue-600': activeView === 'graph'}"
class="px-4 py-2 text-sm font-medium border-b-2">Graph View</button>
</div>
@@ -122,14 +122,14 @@
</div>
<!-- Heart Rate and Arrow -->
<div class="flex justify-between items-center mt-4">
<div class="flex justify-between items-center mt-4 relative">
<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">
<div class="absolute bottom-0 right-0 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"
@@ -235,7 +235,7 @@
</div>
<!-- Graph Section -->
<div x-show="activeView === 'graph'" x-transition.duration.50ms class="space-y-6">
<div x-show="activeView === 'graph'" class="space-y-6">
<!-- Blood Pressure Graph -->
<div>
<h3 class="text-sm font-semibold text-gray-600 mb-2">Blood Pressure (mmHg)</h3>