Many esthetic changes

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -1,64 +1,78 @@
 <template>
   <div>
-    <CalendarHeaderComponent v-model="selectedDate" />
-    <div class="boat-schedule-table-component">
-      <QCalendarDay
-        ref="calendar"
-        class="q-pa-xs"
-        flat
-        animated
-        dense
-        :disabled-before="disabledBefore"
-        interval-height="24"
-        interval-count="18"
-        interval-start="06:00"
-        :short-interval-label="true"
-        v-model="selectedDate"
-        :column-count="boats.length"
-        v-touch-swipe.left.right="handleSwipe"
-      >
-        <template #head-day="{ scope }">
-          <div style="text-align: center; font-weight: 800">
-            {{ getBoatDisplayName(scope) }}
-          </div>
-        </template>
+    <q-card>
+      <q-toolbar>
+        <q-toolbar-title>Select a Boat and Time</q-toolbar-title>
+        <q-btn icon="close" flat round dense v-close-popup />
+      </q-toolbar>
+      <q-separator />
+      <CalendarHeaderComponent v-model="selectedDate" />
+      <div class="boat-schedule-table-component">
+        <QCalendarDay
+          ref="calendar"
+          class="q-pa-xs"
+          flat
+          animated
+          dense
+          :disabled-before="disabledBefore"
+          interval-height="24"
+          interval-count="18"
+          interval-start="06:00"
+          :short-interval-label="true"
+          v-model="selectedDate"
+          :column-count="boats.length"
+          v-touch-swipe.left.right="handleSwipe"
+        >
+          <template #head-day="{ scope }">
+            <div style="text-align: center; font-weight: 800">
+              {{ getBoatDisplayName(scope) }}
+            </div>
+          </template>
 
-        <template #day-body="{ scope }">
-          <div v-for="block in getBoatBlocks(scope)" :key="block.$id">
-            <div
-              class="timeblock"
-              :class="selectedBlock?.$id === block.$id ? 'selected' : ''"
-              :style="
-                blockStyles(block, scope.timeStartPos, scope.timeDurationHeight)
-              "
-              :id="block.id"
-              @click="selectBlock($event, scope, block)"
-            >
-              {{ boats[scope.columnIndex].name }}<br />
-              {{ selectedBlock?.$id === block.$id ? 'Selected' : 'Available' }}
+          <template #day-body="{ scope }">
+            <div v-for="block in getBoatBlocks(scope)" :key="block.$id">
+              <div
+                class="timeblock"
+                :class="selectedBlock?.$id === block.$id ? 'selected' : ''"
+                :style="
+                  blockStyles(
+                    block,
+                    scope.timeStartPos,
+                    scope.timeDurationHeight
+                  )
+                "
+                :id="block.id"
+                @click="selectBlock($event, scope, block)"
+                v-close-popup
+              >
+                {{ boats[scope.columnIndex].name }}<br />
+                {{
+                  selectedBlock?.$id === block.$id ? 'Selected' : 'Available'
+                }}
+              </div>
             </div>
-          </div>
-          <div
-            v-for="reservation in getBoatReservations(scope)"
-            :key="reservation.$id"
-          >
             <div
-              class="reservation"
-              :style="
-                reservationStyles(
-                  reservation,
-                  scope.timeStartPos,
-                  scope.timeDurationHeight
-                )
-              "
+              v-for="reservation in getBoatReservations(scope)"
+              :key="reservation.$id"
             >
-              {{ getUserName(reservation.user) || 'loading...' }}<br />
-              {{ reservation.reason }}
+              <div
+                class="reservation"
+                :style="
+                  reservationStyles(
+                    reservation,
+                    scope.timeStartPos,
+                    scope.timeDurationHeight
+                  )
+                "
+              >
+                {{ getUserName(reservation.user) || 'loading...' }}<br />
+                <q-chip icon="key">{{ reservation.reason }}</q-chip>
+              </div>
             </div>
-          </div>
-        </template>
-      </QCalendarDay>
-    </div>
+          </template>
+        </QCalendarDay>
+      </div></q-card
+    >
   </div>
 </template>