Feature UI

src/App.vue

@@ -11,7 +11,7 @@ watch(record, (newValue) => {
   } else {
     router.push({ name: 'Start' });
   }
-})
+});
 </script>
 
 <template>

src/components/Layout.vue

@@ -14,9 +14,9 @@ window.addEventListener('scroll', () => {
 
 <template>
   <div v-if="record">
-    <div class="dash-layout grid grid-rows-[auto_min-content] sm:grid-rows-none sm:grid-flow-col sm:grid-cols-[min-content_auto] min-h-screen sm:min-h-0">
+    <div class="dash-layout grid grid-rows-[auto_min-content] sm:grid-rows-none sm:grid-flow-col sm:grid-cols-[min-content_auto] sm:min-h-0">
       <header
-        class="main-header sticky grid grid-flow-col sm:grid-rows-[min-content_auto_min-content] gap-2 sm:gap-4 overflow-scroll sm:overflow-visible sm:min-h-[calc(100vh-2rem)] items-center sm:items-start sm:justify-normal order-last sm:order-none self-end sm:self-start p-4 py-2 sm:py-6 bottom-6 md:bottom-auto mb-4 sm:mb-auto mr-4 sm:mr-0 ml-4 mt-4 top-4 rounded-3xl bg-gray-900 text-white z-20">
+        class="main-header fixed sm:sticky grid grid-flow-col sm:grid-rows-[min-content_auto_min-content] gap-2 sm:gap-4 overflow-scroll sm:overflow-visible sm:min-h-[calc(100vh-2rem)] items-center sm:items-start sm:justify-normal order-last sm:order-none self-end sm:self-start p-4 py-2 sm:py-6 bottom-4 md:bottom-auto mb-4 sm:mb-auto mr-4 sm:mr-0 ml-4 mt-4 sm:top-4 right-0 left-0 rounded-3xl bg-gray-900 text-white z-20">
         <h2 class="app-title grid grid-flow-col items-center sm:block self-start font-bold text-xl lg:mb-3 transition-all">
           <RouterLink
             class="grid grid-flow-col items-center sm:justify-start gap-1 sm:gap-4 p-2 sm:p-0 sm:px-3"
@@ -78,7 +78,7 @@ window.addEventListener('scroll', () => {
         </nav>
       </header>
       <main>
-        <RouterView name="main" />
+        <RouterView name="main"  class="mb-28 sm:mb-0"/>
       </main>
     </div>
   </div>

src/components/Measurements/Form.vue

@@ -11,7 +11,7 @@ const props = defineProps(['value', 'date', 'personId', 'vitalId', 'deletable'])
 const emit  = defineEmits(['submit', 'delete']);
 
 const value     = ref(props.value || '');
-const date      = ref(dayjs(props.date).format('YYYY-MM-DD') || '');
+const date      = ref(dayjs(props.date).format('YYYY-MM-DDThh:mm') || '');
 const personId  = ref(props.personId || route.params.personId || '');
 const vitalId   = ref(props.vitalId || route.params.vitalId || '');
 

src/components/Measurements/MeasurementListItem.vue

@@ -62,7 +62,7 @@ const updateRoute = () => {
 
 <template>
   <div
-    class="grid bg-gray-50 p-3 gap-2 md:gap-10 rounded-xl shadow-sm hover:shadow hover:bg-white cursor-pointer"
+    class="grid bg-gray-50 p-3 gap-2 md:gap-10 rounded-xl shadow-sm hover:shadow-md hover:bg-white cursor-pointer transition-all"
     @click="$router.push(updateRoute())"
   >
     <div>

src/components/Person/Person.vue

@@ -85,14 +85,14 @@ const vitalMeasurements = (vitalId) => {
           <div
             v-for="vital in sortedVitals.slice(0,4)"
             :key="vital.id"
-            class="group bg-gray-50 p-3 rounded-xl cursor-pointer shadow-sm hover:shadow-md hover:bg-white transition-all"
+            class="group bg-gray-50 rounded-xl cursor-pointer shadow-sm hover:shadow-md hover:bg-white transition-all overflow-hidden"
             @click="$router.push({ name: 'PersonVital', params: { vitalId: vital.id } })"
           >
-            <header class="grid grid-cols-[auto_min-content]">
+            <header class="grid grid-cols-[auto_min-content] p-3 pb-0">
               <h3 class="font-semibold mb-1">{{ vital.name }}</h3>
               <ChevronRightIcon class="h-5 w-5 self-start text-gray-400 group-hover:text-black transition-all" />
             </header>
-            <VitalChart class="mt-3 cursor-pointer" :vital="vital" :measurements="vitalMeasurements(vital.id)" :small="true"/>
+            <VitalChart class="cursor-pointer scale-105 origin-bottom -mb-1" :vital="vital" :measurements="vitalMeasurements(vital.id)" :small="true"/>
           </div>
         </div>
         <div class="pt-9 grid gap-3">

src/components/Person/Vital.vue

@@ -9,10 +9,12 @@ import MeasurementListItem from '../Measurements/MeasurementListItem.vue';
 import { PencilIcon, ChevronLeftIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/20/solid';
 import Insight from '../Vitals/Insight.vue';
-import { scrolled } from '../../store/ui';
+import { previousRoute, scrolled } from '../../store/ui';
 
-const vitalId   = useRoute().params.vitalId;
-const personId  = useRoute().params.personId;
+const route = useRoute();
+
+const vitalId   = route.params.vitalId;
+const personId  = route.params.personId;
 
 /** @type {import('vue').Ref<import('../../typedefs').VitalChartRange>} */
 const vitalRange = ref('all');
@@ -38,6 +40,28 @@ const vitalMeasurements = computed(() => {
     return measurement.personId === personId && measurement.vitalId === vitalId;
   }).toSpliced(0,-1).toSorted((a, b) => b.date - a.date );
 });
+
+const backText = computed(() => {
+  switch (previousRoute.value.name) {
+    case 'Person':
+    case undefined:
+      return person.value.firstName;
+    case 'PersonVitals':
+      return 'Vitals';
+  }
+});
+
+const backRoute = computed(() => {
+  switch (previousRoute.value.name) {
+    case 'Person':
+    case undefined:
+      return { name: 'Person', params: { personId }};
+    case 'PersonVitals':
+      return { name: 'PersonVitals', params: { personId }};
+    default:
+      return { name: 'Person', params: { personId }};
+  }
+});
 </script>
 
 <template>
@@ -47,8 +71,8 @@ const vitalMeasurements = computed(() => {
       :class="{'!border-gray-300': scrolled }"
     >
       <hgroup class="grid grid-cols-[1fr_1fr_1fr] items-center">
-        <RouterLink class="text-indigo-500 justify-self-start" :to="{ name: 'Person', params: { personId }}">
-          <ChevronLeftIcon class="w-6 h-6 inline align-top" /> {{ person.firstName }}
+        <RouterLink class="text-indigo-500 justify-self-start" :to="backRoute">
+          <ChevronLeftIcon class="w-6 h-6 inline align-top" /> {{ backText }}
         </RouterLink>
         <h2 class="text-xl font-bold text-center">{{ vital.name }}</h2>
         <div class="grid grid-flow-col gap-3 justify-self-end">

src/components/Person/VitalChart.vue

@@ -100,7 +100,16 @@ const data = computed(() => {
 
 /** @type {import('chart.js').ChartOptions<"line">} */
 const options = {
+  layout: {
+    padding: {
+      left: props.small ? -9 : 0,
+      bottom: props.small ? -9 : 0
+    }
+  },
   onHover: (event, elements, chart) => {
+    if (props.small) {
+      return chart.canvas.style.cursor = 'pointer';
+    }
     if ( elements.length === 0 || !(elements[0].element instanceof PointElement)) {
       return chart.canvas.style.cursor = 'default';
     };
@@ -147,7 +156,7 @@ const options = {
       ticks: {
         display: false,
         autoSkipPadding: 30,
-        color: '#aaa'
+        color: '#aaa',
       },
     },
     y: {
@@ -195,7 +204,7 @@ if (props.vital.low && !props.small) {
     borderColor: '#FED7AA',
     borderDash: [5, 3],
     borderWidth: 1,
-    init: true,
+    drawTime: 'beforeDatasetsDraw'
   }
 
   /** @type {import('chartjs-plugin-annotation').AnnotationOptions} */
@@ -217,7 +226,7 @@ if (props.vital.low && !props.small) {
         weight: 'normal',
         size: 11
       }
-    }
+    },
   }
 
   options.plugins.annotation.annotations = Object.assign(options.plugins.annotation.annotations, { lowLine, lowBox })
@@ -233,8 +242,7 @@ if (props.vital.high && !props.small) {
     borderColor: '#FED7AA',
     borderDash: [5,3],
     borderWidth: 1,
-    init: true,
-    z:0
+    drawTime: 'beforeDatasetsDraw'
   }
 
   /** @type {import('chartjs-plugin-annotation').AnnotationOptions} */
@@ -255,7 +263,7 @@ if (props.vital.high && !props.small) {
         weight: 'normal',
         size: 11
       }
-    }
+    },
   }
 
   options.plugins.annotation.annotations = Object.assign(options.plugins.annotation.annotations, { highLine, highBox })

src/components/Person/Vitals.vue

@@ -85,14 +85,14 @@ const vitalMeasurements = (vitalId) => {
           <div
             v-for="vital in sortedVitals"
             :key="vital.id"
-            class="group bg-gray-50 p-3 rounded-xl cursor-pointer shadow-sm hover:shadow-md hover:bg-white transition-all"
+            class="group bg-gray-50 rounded-xl cursor-pointer shadow-sm hover:shadow-md hover:bg-white transition-all overflow-hidden"
             @click="$router.push({ name: 'PersonVital', params: { vitalId: vital.id } })"
           >
-            <header class="grid grid-cols-[auto_min-content]">
+            <header class="grid grid-cols-[auto_min-content] p-3">
               <h3 class="font-semibold mb-1">{{ vital.name }}</h3>
               <ChevronRightIcon class="h-5 w-5 self-start text-gray-400 group-hover:text-black transition-all" />
             </header>
-            <VitalChart class="mt-3 cursor-pointer" :vital="vital" :measurements="vitalMeasurements(vital.id)" :small="true"/>
+            <VitalChart class="cursor-pointer scale-105 origin-bottom -mb-1" :vital="vital" :measurements="vitalMeasurements(vital.id)" :small="true"/>
           </div>
         </div>
       </div>

src/components/Vitals/VitalListItem.vue

@@ -10,7 +10,7 @@ const props = defineProps({
 
 <template>
   <div
-    class="grid min-h-[10em] bg-gray-50 shadow-sm hover:shadow hover:bg-white cursor-pointer p-3 rounded-xl"
+    class="grid min-h-[10em] bg-gray-50 shadow-sm hover:shadow-md hover:bg-white cursor-pointer p-3 rounded-xl transition-all"
     @click="$router.push({ name: 'VitalUpdate', params: { vitalId: vital.id }});"
   >
     <div class="grid order-2 content-end">

src/router/index.js

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { previousRoute } from '../store/ui';
 
 const Start = () => import(/* webpackChunkName: "group-start" */ '../components/Start/Start.vue');
 const StartNew = () => import(/* webpackChunkName: "group-start" */ '../components/Start/New.vue');
@@ -94,10 +95,38 @@ const routes = [
       },
       {
         path: ':personId/vitals',
-        name: 'PersonVitals',
-        components: {
-          main: PersonVitals
-        }
+        children: [
+          {
+            name: 'PersonVitals',
+            path: '',
+            components: {
+              main: PersonVitals
+            },
+          },
+          {
+            path: ':vitalId',
+            name: 'PersonVital',
+            components: {
+              main: PersonVital
+            },
+            children: [
+              {
+                path: 'measurement/create',
+                name: 'PersonVitalMeasurementCreate',
+                components: {
+                  modal: MeasurementCreate
+                }
+              },
+              {
+                path: 'measurement/:measurementId/update',
+                name: 'PersonVitalMeasurementUpdate',
+                components: {
+                  modal: MeasurementUpdate
+                }
+              },
+            ]
+          }
+        ]
       },
       {
         path: ':personId/measurements',
@@ -106,29 +135,6 @@ const routes = [
           main: PersonMeasurements
         }
       },
-      {
-        path: ':personId/vitals/:vitalId',
-        name: 'PersonVital',
-        components: {
-          main: PersonVital
-        },
-        children: [
-          {
-            path: 'measurement/create',
-            name: 'PersonVitalMeasurementCreate',
-            components: {
-              modal: MeasurementCreate
-            }
-          },
-          {
-            path: 'measurement/:measurementId/update',
-            name: 'PersonVitalMeasurementUpdate',
-            components: {
-              modal: MeasurementUpdate
-            }
-          },
-        ]
-      }
     ]
   },
   {
@@ -271,14 +277,19 @@ const router = createRouter({
       }
     }
   }
-})
+});
 
 router.beforeEach((to) => {
   if (to.meta.requiresAuth && !localStorage.getItem('isActive')) {
     return {
       name: 'Start'
     }
   }
-})
+});
+
+
+router.beforeEach((to, from) => {
+  previousRoute.value = from;
+});
 
-export default router
+export default router;

src/store/ui.js

@@ -1,3 +1,6 @@
 import { ref } from 'vue';
 
 export const scrolled = ref(false);
+
+/** @type {import('vue').Ref<import('vue-router').RouteLocationNormalized>} */
+export const previousRoute = ref();