From ddd30a1a9834ada519f14ebf2724b81913014575 Mon Sep 17 00:00:00 2001
From: Roy <roy@roymckenzie.me>
Date: Sun, 22 Oct 2023 21:35:54 -0500
Subject: [PATCH] - Low/High Bade for Vital Measurement - Mobile nav bar fills
 screen with labels - VitalSummaryChart shows low/high for measurement - Note
 view with edit button

---
 package.json                                  |   4 +
 src/components/Layout.vue                     |  70 +++++---
 src/components/Measurements/LowHighBadge.vue  |  29 ++++
 src/components/Notes/View.vue                 |  45 +++++
 .../Person/Logbook/MeasurementLogItem.vue     |   8 +-
 src/components/Person/Logbook/NoteLogItem.vue |   2 +-
 src/components/Person/Person.vue              |   2 +-
 src/components/Person/Vital.vue               |   2 +-
 src/components/Person/VitalChartSummary.vue   | 163 ++++++++++++------
 src/components/Person/Vitals.vue              |   2 +-
 src/router/index.js                           |  21 ++-
 src/style.css                                 |  48 +++---
 12 files changed, 284 insertions(+), 112 deletions(-)
 create mode 100644 src/components/Measurements/LowHighBadge.vue
 create mode 100644 src/components/Notes/View.vue

diff --git a/package.json b/package.json
index 480c031..289f6d6 100644
--- a/package.json
+++ b/package.json
@@ -41,5 +41,9 @@
     "postcss": "^8.4.29",
     "tailwindcss": "^3.3.3",
     "vite": "^4.4.5"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "printWidth": 100
   }
 }
diff --git a/src/components/Layout.vue b/src/components/Layout.vue
index 08610a3..6b4e55c 100644
--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@@ -1,5 +1,11 @@
 <script setup>
-import { SquaresPlusIcon, Cog8ToothIcon, ListBulletIcon, HeartIcon, UserIcon } from '@heroicons/vue/20/solid';
+import {
+  SquaresPlusIcon,
+  Cog8ToothIcon,
+  ListBulletIcon,
+  HeartIcon,
+  UserIcon,
+} from '@heroicons/vue/20/solid';
 import { record } from '../store/record';
 import { peers, webrtcConnected } from '../providers/webrtc';
 import pluralize from 'pluralize';
@@ -9,27 +15,31 @@ import { selectedPersonId } from '../store/person';
 window.addEventListener('scroll', () => {
   scrolled.value = window.scrollY > 0;
 });
-
 </script>
 
 <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] 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 fixed sm:sticky grid grid-flow-col grid-cols-[min-content_min-content_auto] sm:grid-cols-none 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-0 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">
+        class="main-header fixed sm:sticky grid grid-flow-col grid-cols-[auto_min-content] sm:grid-cols-none 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-0 md:bottom-auto sm:mb-auto sm:mr-0 sm:ml-4 sm:top-4 right-0 left-0 sm:rounded-3xl bg-gray-900 text-white z-20"
+      >
+        <h2
+          class="app-title hidden sm:grid sm:grid-flow-col items-center 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"
+            class="grid grid-flow-col items-center justify-center lg:justify-start gap-1 sm:gap-4 p-2 sm:p-0 sm:px-3"
             :to="{ name: 'Dashboard' }"
             aria-label="Dashboard"
           >
-            <SquaresPlusIcon class="h-6 w-6"/> <span class="hidden lg:inline">HealthRecord</span>
+            <SquaresPlusIcon class="h-6 w-6" /> <span class="hidden lg:inline">HealthRecord</span>
           </RouterLink>
         </h2>
-        <nav class="main-nav justify-self-start sm:justify-self-auto">
-          <ul v-if="selectedPersonId" class="grid gap-2 sm:gap-4 grid-flow-col sm:grid-flow-row">
+        <nav class="main-nav sm:justify-self-auto">
+          <ul v-if="selectedPersonId" class="grid gap-4 grid-flow-col sm:grid-flow-row">
             <li>
-              <RouterLink 
+              <RouterLink
                 :to="{ name: 'Person', params: { personId: selectedPersonId } }"
                 aria-label="Person"
               >
@@ -37,7 +47,7 @@ window.addEventListener('scroll', () => {
               </RouterLink>
             </li>
             <li>
-              <RouterLink 
+              <RouterLink
                 :to="{ name: 'PersonVitals', params: { personId: selectedPersonId } }"
                 aria-label="Vitals"
               >
@@ -45,7 +55,7 @@ window.addEventListener('scroll', () => {
               </RouterLink>
             </li>
             <li>
-              <RouterLink 
+              <RouterLink
                 :to="{ name: 'PersonLogbook', params: { personId: selectedPersonId } }"
                 aria-label="Logbook"
               >
@@ -57,28 +67,32 @@ window.addEventListener('scroll', () => {
         <nav class="main-nav place-self-end sm:place-self-auto">
           <ul>
             <li>
-              <RouterLink 
-              class="group"
-                :to="{ name: 'Settings' }"
-                aria-label="Settings"
-              >
-                  <span>
-                    <span 
-                      v-if="record.user.preferences && record.user.preferences.webRTC.enabled && webrtcConnected"
-                      class="h-3 w-3 inline-block bg-orange-300 rounded-full absolute border-2 border-gray-900 group-hover:border-gray-800"
-                      :class="{ '!bg-green-500' : peers > 0 }"
-                      :title="peers > 0 ? pluralize('peer', peers, true) + ' connected' : 'Waiting for peers...'"
-                    ></span>
-                    <Cog8ToothIcon class="h-6 w-6" />
-                  </span>
-                  <span class="hidden md:inline">Settings</span>
+              <RouterLink class="group" :to="{ name: 'Settings' }" aria-label="Settings">
+                <span>
+                  <span
+                    v-if="
+                      record.user.preferences &&
+                      record.user.preferences.webRTC.enabled &&
+                      webrtcConnected
+                    "
+                    class="h-3 w-3 inline-block bg-orange-300 rounded-full absolute border-2 border-gray-900 group-hover:border-gray-800"
+                    :class="{ '!bg-green-500': peers > 0 }"
+                    :title="
+                      peers > 0
+                        ? pluralize('peer', peers, true) + ' connected'
+                        : 'Waiting for peers...'
+                    "
+                  ></span>
+                  <Cog8ToothIcon class="h-6 w-6" />
+                </span>
+                <span>Settings</span>
               </RouterLink>
             </li>
           </ul>
         </nav>
       </header>
       <main>
-        <RouterView name="main"  class="mb-28 sm:mb-0"/>
+        <RouterView name="main" class="mb-28 sm:mb-0" />
       </main>
     </div>
   </div>
diff --git a/src/components/Measurements/LowHighBadge.vue b/src/components/Measurements/LowHighBadge.vue
new file mode 100644
index 0000000..856bea6
--- /dev/null
+++ b/src/components/Measurements/LowHighBadge.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { ArrowSmallDownIcon, ArrowSmallUpIcon } from '@heroicons/vue/20/solid';
+
+const props = defineProps({
+  vital: {
+    /** @type {import('vue').PropType<import('../../typedefs').Vital>} */
+    type: Object,
+    required: true,
+  },
+  measurement: {
+    /** @type {import('vue').PropType<import('../../typedefs').Measurement>} */
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <span
+    v-if="vital.high && measurement.value >= Number(vital.high)"
+    class="border border-amber-200 p-1 py-0 pl-0 pr-1.5 rounded-lg text-amber-500 bg-amber-100 text-xs font-normal cursor-default whitespace-nowrap"
+    ><ArrowSmallUpIcon class="inline w-4 h-4 -mt-1" />High</span
+  >
+  <span
+    v-else-if="vital.low && measurement.value <= Number(vital.low)"
+    class="border border-amber-200 p-1 py-0 pl-0 pr-1.5 rounded-lg text-amber-500 bg-amber-100 text-xs font-normal cursor-default whitespace-nowrap"
+    ><ArrowSmallDownIcon class="inline w-4 h-4 -mt-0.5" />Low</span
+  >
+</template>
diff --git a/src/components/Notes/View.vue b/src/components/Notes/View.vue
new file mode 100644
index 0000000..3fa6055
--- /dev/null
+++ b/src/components/Notes/View.vue
@@ -0,0 +1,45 @@
+<script setup>
+import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
+import { computed, ref } from "vue";
+import { useRoute } from "vue-router";
+import { notes } from "../../store/notes";
+
+const route = useRoute();
+
+const note = computed(() => {
+  const note = notes.value.find((note) => note.id === noteId.value);
+
+  if (!note)
+    throw Error(`Could not find Note with ID: ${route.params.noteId}.`);
+
+  return note;
+});
+
+const noteId = ref(String(route.params.noteId));
+</script>
+
+<template>
+  <Dialog :open="true" @close="$router.back()" class="relative z-50">
+    <div class="fixed inset-0 bg-black/30 backdrop-blur-sm" />
+    <div
+      class="fixed flex w-screen h-screen top-0 items-start justify-center overflow-y-auto"
+    >
+      <DialogPanel
+        class="bg-white w-full sm:max-w-xs rounded-2xl shadow-lg m-2 sm:mt-10"
+      >
+        <DialogTitle as="h3" class="text-lg font-semibold border-b p-6 py-3"
+          >Note</DialogTitle
+        >
+        <p class="p-6 pb-0 py-3">{{ note.text }}</p>
+        <div class="grid grid-flow-col justify-end items-center gap-5 mt-4 p-6">
+          <a
+            @click="$router.push({ name: 'VitalMeasurementNoteUpdate', params: { noteId: note.id } })"
+            class="text-sm text-gray-500 font-light cursor-pointer"
+            >Edit</a
+          >
+          <button class="btn" @click="$router.back()">Done</button>
+        </div>
+      </DialogPanel>
+    </div>
+  </Dialog>
+</template>
diff --git a/src/components/Person/Logbook/MeasurementLogItem.vue b/src/components/Person/Logbook/MeasurementLogItem.vue
index 7e39261..ba9c8c1 100644
--- a/src/components/Person/Logbook/MeasurementLogItem.vue
+++ b/src/components/Person/Logbook/MeasurementLogItem.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { ArrowSmallDownIcon, ArrowSmallUpIcon } from '@heroicons/vue/20/solid';
-import { useRoute } from 'vue-router';
+import LowHighBadge from '../../Measurements/LowHighBadge.vue';
 
 const props = defineProps({
   measurement: {
@@ -26,10 +25,7 @@ const props = defineProps({
       <h3 class="font-semibold">
         {{ Number(measurement.value).toLocaleString() }}
         <span class="text-xs text-gray-500 font-light mr-3">{{ vital.unit }}</span>
-        <span v-if="vital.high && measurement.value >= Number(vital.high)"
-          class="border border-amber-200 p-1 py-0 pl-0 pr-1.5 rounded-lg text-amber-500 bg-amber-100 text-xs font-normal cursor-default whitespace-nowrap"><ArrowSmallUpIcon class="inline w-4 h-4 -mt-1" />High</span>
-        <span v-if="vital.low && measurement.value <= Number(vital.low)"
-          class="border border-amber-200 p-1 py-0 pl-0 pr-1.5 rounded-lg text-amber-500 bg-amber-100 text-xs font-normal cursor-default whitespace-nowrap"><ArrowSmallDownIcon class="inline w-4 h-4 -mt-0.5" />Low</span>
+        <LowHighBadge :vital="vital" :measurement="measurement" />
       </h3>
     </div>
   </div>
diff --git a/src/components/Person/Logbook/NoteLogItem.vue b/src/components/Person/Logbook/NoteLogItem.vue
index 5ef6dee..dca8501 100644
--- a/src/components/Person/Logbook/NoteLogItem.vue
+++ b/src/components/Person/Logbook/NoteLogItem.vue
@@ -11,7 +11,7 @@ const props = defineProps({
 <template>
   <p
     class="bg-gray-200 text-gray-800 p-3 px-4 rounded-md mt-3 leading-tight hover:shadow hover:bg-gray-100 cursor-pointer"
-    @click.stop="$router.push({ name: 'PersonNoteUpdate', params: { noteId: note.id}})">
+    @click.stop="$router.push({ name: 'PersonLogbookNoteView', params: { noteId: note.id}})">
       {{ note.text }}
   </p>
 </template>
diff --git a/src/components/Person/Person.vue b/src/components/Person/Person.vue
index 97418bc..fedef88 100644
--- a/src/components/Person/Person.vue
+++ b/src/components/Person/Person.vue
@@ -74,7 +74,7 @@ const vitalMeasurements = (vitalId) => {
           </div>
         </div>
         <h3 class="grid grid-flow-col text-xl font-bold mb-4 cursor-pointer" @click="$router.push({ name: 'PersonLogbook' })">
-          Logs
+          Logbook
           <span class="font-normal text-base text-indigo-500 justify-self-end whitespace-nowrap">
             View all {{ sortedPersonLogEntries.length }} <ChevronRightIcon class="w-6 h-6 inline align-top" />
           </span>
diff --git a/src/components/Person/Vital.vue b/src/components/Person/Vital.vue
index 17e0556..e0a1e09 100644
--- a/src/components/Person/Vital.vue
+++ b/src/components/Person/Vital.vue
@@ -73,7 +73,7 @@ const backRoute = computed(() => {
       </div>
       <div class="pt-9 grid gap-3">
         <h3 class="text-xl font-bold pb-3">
-          Logs
+          Logbook
           <span class="text-xs font-normal text-gray-500 align-middle">({{ vitalMeasurements.length }})</span>
         </h3>
         <div class="grid gap-3">
diff --git a/src/components/Person/VitalChartSummary.vue b/src/components/Person/VitalChartSummary.vue
index d2d4280..6dc01c6 100644
--- a/src/components/Person/VitalChartSummary.vue
+++ b/src/components/Person/VitalChartSummary.vue
@@ -1,11 +1,11 @@
 <script setup>
 import { computed, ref } from 'vue';
-import { DocumentTextIcon } from '@heroicons/vue/20/solid';
+import { DocumentTextIcon, PencilSquareIcon } from '@heroicons/vue/20/solid';
 import VitalChart from './VitalChart.vue';
 import dayjs from 'dayjs';
 import isBetween from 'dayjs/plugin/isBetween';
 import { useRoute } from 'vue-router';
-import router from '../../router';
+import LowHighBadge from '../Measurements/LowHighBadge.vue';
 
 const route = useRoute();
 
@@ -15,43 +15,47 @@ const props = defineProps({
   vital: {
     /** @type {import('vue').PropType<import("../../typedefs").Vital>} */
     type: Object,
-    required: true
+    required: true,
   },
   measurements: {
     /** @type {import('vue').PropType<import("../../typedefs").Measurement[]>} */
     type: Array,
-    required: true
-  }
+    required: true,
+  },
 });
 
 const selectedMeasurement = computed(() => {
-  return props.measurements.find(measurement => measurement.id === route.query.measurementId);
+  return props.measurements.find((measurement) => measurement.id === route.query.measurementId);
 });
 
 /** @type {import('vue').Ref<import('../../typedefs').VitalChartRange>} */
-const selectedRange = ref({length: 100, unit: 'year'});
+const selectedRange = ref({ length: 100, unit: 'year' });
 
 const minDate = computed(() => {
   if (selectedRange.value.length === 100) {
-    return Math.min(...props.measurements.map(measurement => measurement.date));
+    return Math.min(...props.measurements.map((measurement) => measurement.date));
   }
   return dayjs().subtract(selectedRange.value.length, selectedRange.value.unit).valueOf();
 });
 
 const dateRangeStart = computed(() => {
-  return Math.min(...filteredMeasurements.value.map(measurement => measurement.date));
+  return Math.min(...filteredMeasurements.value.map((measurement) => measurement.date));
 });
 
 const dateRangeEnd = computed(() => {
-  return Math.max(...props.measurements.map(measurement => measurement.date));
+  return Math.max(...props.measurements.map((measurement) => measurement.date));
 });
 
 const filteredMeasurements = computed(() => {
-  return props.measurements.filter(measurement => measurement.date >= minDate.value);
+  return props.measurements.filter((measurement) => measurement.date >= minDate.value);
 });
 
 const averageMeasurement = computed(() => {
-  return filteredMeasurements.value.map(measurement => measurement.value).reduce((previous, current) => previous + current, 0) / filteredMeasurements.value.length;
+  return (
+    filteredMeasurements.value
+      .map((measurement) => measurement.value)
+      .reduce((previous, current) => previous + current, 0) / filteredMeasurements.value.length
+  );
 });
 
 const ranges = computed(() => {
@@ -61,55 +65,63 @@ const ranges = computed(() => {
       unit: 'days',
       length: 7,
       abbreviation: 'W',
-      title: 'Week'
+      title: 'Week',
     },
     {
       unit: 'month',
       length: 1,
       abbreviation: 'M',
-      title: 'Month'
+      title: 'Month',
     },
     {
       unit: 'months',
       length: 3,
       abbreviation: '3M',
-      title: 'Three months'
+      title: 'Three months',
     },
     {
       unit: 'year',
       length: 1,
       abbreviation: 'Y',
-      title: 'Year'
+      title: 'Year',
     },
     {
       unit: 'years',
       length: 5,
       abbreviation: '5Y',
-      title: 'Five years'
+      title: 'Five years',
     },
     {
       unit: 'years',
       length: 10,
       abbreviation: '10Y',
-      title: 'Ten years'
+      title: 'Ten years',
     },
     {
       unit: 'years',
       length: 15,
       abbreviation: '15Y',
-      title: 'Fifteen years'
+      title: 'Fifteen years',
     },
-  ]
+  ];
   ranges.forEach((range, index) => {
-    range.quantity = props.measurements.filter(measurement => {
+    range.quantity = props.measurements.filter((measurement) => {
       if (index === 0) {
-        return dayjs(measurement.date).isBetween(dayjs(),dayjs().subtract(range.length, range.unit),null, '[]');
-      }else {
-        return dayjs(measurement.date).isBetween(dayjs().subtract(ranges[index-1].length, ranges[index-1].unit),dayjs().subtract(range.length, range.unit));
+        return dayjs(measurement.date).isBetween(
+          dayjs(),
+          dayjs().subtract(range.length, range.unit),
+          null,
+          '[]'
+        );
+      } else {
+        return dayjs(measurement.date).isBetween(
+          dayjs().subtract(ranges[index - 1].length, ranges[index - 1].unit),
+          dayjs().subtract(range.length, range.unit)
+        );
       }
-    }).length
+    }).length;
   });
-  return ranges.filter(range => range.quantity > 0).reverse();
+  return ranges.filter((range) => range.quantity > 0).reverse();
 });
 
 const dateRangeText = computed(() => {
@@ -117,52 +129,99 @@ const dateRangeText = computed(() => {
   if (dayjs(dateRangeStart.value).isSame(dateRangeEnd.value, 'year')) {
     dateFormat = 'MMM D';
   } else {
-    dateFormat = 'MMM \'YY';
+    dateFormat = "MMM 'YY";
   }
-  return dayjs(dateRangeStart.value).format(dateFormat) + ' - ' + dayjs(dateRangeEnd.value).format(dateFormat);
+  return (
+    dayjs(dateRangeStart.value).format(dateFormat) +
+    ' - ' +
+    dayjs(dateRangeEnd.value).format(dateFormat)
+  );
 });
 
 const lowMeasurements = computed(() => {
   if (!props.vital.low) return [];
-  return filteredMeasurements.value.filter(measurement => measurement.value < props.vital.low)
+  return filteredMeasurements.value.filter((measurement) => measurement.value < props.vital.low);
 });
 
 const highMeasurements = computed(() => {
   if (!props.vital.high) return [];
-  return filteredMeasurements.value.filter(measurement => measurement.value > props.vital.high)
+  return filteredMeasurements.value.filter((measurement) => measurement.value > props.vital.high);
 });
 
 const language = navigator.language;
-
 </script>
 
 <template>
   <div class="grid sm:grid-cols-[auto_200px]">
     <div>
-      <div v-if="selectedMeasurement" class="grid grid-cols-[auto_min-content] bg-indigo-500 text-white rounded-xl mx-2 mt-2">
-        <div class="grid grid-flow-col justify-start divide-x divide-indigo-400">
-          <div class="p-2 px-4">
-            <p class="font-bold">{{ Intl.NumberFormat(language).format(selectedMeasurement.value) }}</p>
+      <div
+        v-if="selectedMeasurement"
+        class="grid grid-cols-[auto_min-content] bg-indigo-500 text-white rounded-xl mx-2 mt-2"
+      >
+        <div class="grid grid-flow-col sm:justify-start divide-x divide-indigo-400">
+          <div class="p-2 sm:px-4">
+            <p class="font-bold whitespace-nowrap">
+              {{ Intl.NumberFormat(language, { notation: 'compact' }).format(selectedMeasurement.value) }}
+              <LowHighBadge :vital="vital" :measurement="selectedMeasurement" class="inline-block ml-2 align-text-top" />
+            </p>
             <h5 class="uppercase text-xs text-indigo-200">{{ vital.unit }}</h5>
           </div>
-          <div class="p-2 px-4">
+          <div class="p-2 sm:px-4">
             <h5 class="uppercase text-xs text-indigo-200">Date</h5>
-            <p class="font-bold">{{ dayjs(selectedMeasurement.date).format('MMM D, YYYY') }}</p>
+            <p class="font-bold leading-tight sm:text-base">
+              {{ dayjs(selectedMeasurement.date).format('MMM D, YYYY') }}
+            </p>
           </div>
-          <div v-if="selectedMeasurement.noteId" class="p-2 px-4">
+          <div v-if="selectedMeasurement.noteId" class="p-2 sm:px-4">
             <h5 class="uppercase text-xs text-indigo-200">Note</h5>
-            <DocumentTextIcon class="w-6 h-6 cursor-pointer" @click="$router.push({ name: 'VitalMeasurementNoteUpdate', params: { noteId: selectedMeasurement.noteId }})" />
+            <DocumentTextIcon
+              class="w-6 h-6 cursor-pointer"
+              @click="
+                $router.push({
+                  name: 'VitalMeasurementNoteView',
+                  params: { noteId: selectedMeasurement.noteId },
+                })
+              "
+            />
+          </div>
+          <div class="p-2 sm:px-4">
+            <h5 class="uppercase text-xs text-indigo-200">Edit</h5>
+            <PencilSquareIcon
+              class="w-6 h-6 cursor-pointer"
+              @click="
+                $router.push({
+                  name: 'PersonVitalMeasurementUpdate',
+                  params: { measurementId: selectedMeasurement.id },
+                })
+              "
+            />
           </div>
         </div>
-        <button @click="$router.push({ name: 'PersonVital', params: { vitalId: vital.id }})" class="text-indigo-200 hover:text-white text-3xl font-thin self-start justify-self-end mr-3">&times;</button>
+        <button
+          @click="$router.push({ name: 'PersonVital', params: { vitalId: vital.id } })"
+          class="text-indigo-200 hover:text-white text-3xl font-thin self-start justify-self-end mr-3"
+        >
+          &times;
+        </button>
       </div>
-      <VitalChart :vital="vital" :measurements="measurements" :min-date="dateRangeStart" :max-date="dateRangeEnd" class="ml-2" />
+      <VitalChart
+        :vital="vital"
+        :measurements="measurements"
+        :min-date="dateRangeStart"
+        :max-date="dateRangeEnd"
+        class="ml-2"
+      />
       <div class="grid p-2">
-        <div class="grid grid-flow-col gap-2 place-content-between bg-gray-100 rounded-full p-1 mt-2 shadow-inner mx-auto">
+        <div
+          class="grid grid-flow-col gap-2 place-content-between bg-gray-100 rounded-full p-1 mt-2 shadow-inner mx-auto"
+        >
           <button
             class="rounded-full p-0.5 px-3 text-sm hover:bg-gray-200 transition-all disabled:text-gray-300 disabled:hover:bg-transparent"
-            :class="{'!bg-indigo-500 text-white shadow': selectedRange.length === 100 && selectedRange.unit === 'year'}"
-            @click="selectedRange = {length: 100, unit: 'year'};"
+            :class="{
+              '!bg-indigo-500 text-white shadow':
+                selectedRange.length === 100 && selectedRange.unit === 'year',
+            }"
+            @click="selectedRange = { length: 100, unit: 'year' }"
             title="All data"
           >
             All
@@ -170,7 +229,10 @@ const language = navigator.language;
           <button
             v-for="range in ranges"
             class="rounded-full p-0.5 px-3 text-sm hover:bg-gray-200 transition-all disabled:text-gray-300 disabled:hover:bg-transparent"
-            :class="{'!bg-indigo-500 text-white shadow': (selectedRange.length === range.length && selectedRange.unit === range.unit)}"
+            :class="{
+              '!bg-indigo-500 text-white shadow':
+                selectedRange.length === range.length && selectedRange.unit === range.unit,
+            }"
             @click="selectedRange = range"
             :title="range.title"
           >
@@ -180,7 +242,9 @@ const language = navigator.language;
       </div>
     </div>
 
-    <div class="grid grid-cols-2 sm:border-l sm:grid-cols-none sm:items-start sm:content-start divide-x sm:divide-x-0 divide-y mt-2 sm:mt-0">
+    <div
+      class="grid grid-cols-2 sm:border-l sm:grid-cols-none sm:items-start sm:content-start divide-x sm:divide-x-0 divide-y mt-2 sm:mt-0"
+    >
       <span class="grid p-3 sm:py-5 border-t sm:border-t-0">
         <span class="text-xs uppercase text-gray-500">Unit</span>
         <span class="font-bold">{{ vital.unit }}</span>
@@ -191,7 +255,10 @@ const language = navigator.language;
       </span>
       <span class="grid p-3 sm:py-5 border-l-transparent sm:border-l-none">
         <span class="text-xs uppercase text-gray-500">Average</span>
-        <span class="font-bold">{{ Intl.NumberFormat(language, {notation: 'compact'}).format(averageMeasurement) }} <span class="font-normal text-xs text-gray-500">{{ vital.unit }}</span></span>
+        <span class="font-bold"
+          >{{ Intl.NumberFormat(language, { notation: 'compact' }).format(averageMeasurement) }}
+          <span class="font-normal text-xs text-gray-500">{{ vital.unit }}</span></span
+        >
       </span>
       <span class="grid p-3 sm:py-5 sm:!border-b">
         <span class="text-xs uppercase text-gray-500">Measurements</span>
@@ -199,4 +266,4 @@ const language = navigator.language;
       </span>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/Person/Vitals.vue b/src/components/Person/Vitals.vue
index e84ece7..ebdcaf1 100644
--- a/src/components/Person/Vitals.vue
+++ b/src/components/Person/Vitals.vue
@@ -45,7 +45,7 @@ const vitalMeasurements = (vitalId) => {
       subtitle="Track Vitals and record new Measurements."
     >
       <template #right>
-        <RouterLink class="grid rounded-full bg-gray-300 hover:bg-gray-100 h-9 w-9 sm:h-10 sm:w-10 items-center justify-items-center" :to="{ name: 'PersonVitalsMeasurementCreate' }">
+        <RouterLink class="grid rounded-full bg-gray-300 hover:bg-gray-100 h-9 w-9 sm:h-10 sm:w-10 items-center justify-items-center" :to="{ name: 'PersonVitalCreate' }">
           <PlusIcon class="h-6 w-6" />
         </RouterLink>
       </template>
diff --git a/src/router/index.js b/src/router/index.js
index 2ada57f..e97747d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,6 +12,7 @@ const VitalCreate = () => import(/* webpackChunkName: "group-vitals" */ '../comp
 const VitalUpdate = () => import(/* webpackChunkName: "group-vitals" */ '../components/Vitals/Update.vue');
 const MeasurementCreate = () => import(/* webpackChunkName: "group-measurements" */ '../components/Measurements/Create.vue');
 const MeasurementUpdate = () => import(/* webpackChunkName: "group-measurements" */ '../components/Measurements/Update.vue');
+const NoteView = () => import(/* webpackChunkName: "group-notes" */ '../components/Notes/View.vue');
 const NoteCreate = () => import(/* webpackChunkName: "group-notes" */ '../components/Notes/Create.vue');
 const NoteUpdate = () => import(/* webpackChunkName: "group-notes" */ '../components/Notes/Update.vue');
 const Person = () => import(/* webpackChunkName: "group-person" */ '../components/Person/Person.vue');
@@ -106,10 +107,10 @@ const routes = [
             },
             children: [
               {
-                path: 'measurement/create',
-                name: 'PersonVitalsMeasurementCreate',
+                path: 'create',
+                name: 'PersonVitalCreate',
                 components: {
-                  modal: MeasurementCreate
+                  modal: VitalCreate
                 }
               }
             ]
@@ -144,6 +145,13 @@ const routes = [
                   modal: NoteUpdate
                 }
               },
+              {
+                path: 'note/:noteId',
+                name: 'VitalMeasurementNoteView',
+                components: {
+                  modal: NoteView
+                }
+              },
             ]
           }
         ]
@@ -169,6 +177,13 @@ const routes = [
               modal: NoteUpdate
             }
           },
+          {
+            path: 'note/:noteId',
+            name: 'PersonLogbookNoteView',
+            components: {
+              modal: NoteView
+            }
+          },
           {
             path: 'measurement/:measurementId/update',
             name: 'PersonLogbookMeasurementUpdate',
diff --git a/src/style.css b/src/style.css
index 2903525..94d24e4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -4,7 +4,11 @@
 
 @media (hover: none) and (display-mode: standalone) {
   .main-header {
-    @apply bottom-[env(safe-area-inset-bottom)] md:bottom-auto mb-0;
+    @apply pb-[env(safe-area-inset-bottom)] md:bottom-auto mb-0;
+
+    .main-nav a {
+      @apply !pb-0;
+    }
   }
 }
 
@@ -20,10 +24,10 @@ body {
 
 .main-nav {
   li > a {
-    @apply grid grid-flow-col gap-4 p-2 px-3 justify-start items-center rounded-md text-gray-500 hover:bg-gray-800 hover:text-gray-400;
+    @apply grid lg:grid-flow-col lg:gap-4 p-2 px-3 justify-center lg:justify-start place-items-center lg:place-items-start rounded-md text-gray-500 hover:bg-gray-800 hover:text-gray-400;
 
     span:last-child {
-      @apply hidden lg:inline;
+      @apply text-xs md:text-sm lg:text-base;
     }
 
     &.router-link-exact-active,
@@ -87,7 +91,7 @@ body {
   .menu-button {
     @apply block rounded-full text-gray-400 hover:text-black hover:bg-gray-200 focus:outline-none transition-all;
 
-    &[aria-expanded=true] {
+    &[aria-expanded='true'] {
       @apply bg-gray-200 text-black;
     }
 
@@ -110,15 +114,15 @@ body {
 }
 
 button {
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-input[type=text],
-input[type=email],
-input[type=date],
-input[type=datetime-local],
-input[type=password],
-input[type=url],
+input[type='text'],
+input[type='email'],
+input[type='date'],
+input[type='datetime-local'],
+input[type='password'],
+input[type='url'],
 textarea,
 select {
   @apply border-gray-200 rounded py-2 px-3 text-gray-700;
@@ -128,33 +132,31 @@ select {
   }
 
   &:invalid::-webkit-datetime-edit {
-    @apply text-gray-300
+    @apply text-gray-300;
   }
 
   &::placeholder {
-    @apply text-gray-300 font-light text-sm
+    @apply text-gray-300 font-light text-sm;
   }
 }
 
-
 form {
-
   label {
     @apply block text-gray-500 text-sm font-light mb-2 cursor-pointer;
   }
 
-  input[type=text],
-  input[type=email],
-  input[type=date],
-  input[type=datetime-local],
-  input[type=password],
-  input[type=url],
+  input[type='text'],
+  input[type='email'],
+  input[type='date'],
+  input[type='datetime-local'],
+  input[type='password'],
+  input[type='url'],
   textarea,
   select {
     @apply shadow-sm mb-3 w-full;
   }
 
-  input[type=radio] {
+  input[type='radio'] {
     @apply border-gray-300 text-indigo-500 cursor-pointer align-text-top;
 
     &:hover,
@@ -216,4 +218,4 @@ form {
 .list-leave-active {
   position: absolute;
   width: 100%;
-}
\ No newline at end of file
+}