Tweaks to boat index styles

src/components/BoatPreviewComponent.vue

@@ -1,47 +1,21 @@
 <template>
-  <q-card
-    v-for="boat in boats"
-    :key="boat.id"
-    flat
-    bordered
-    class="my-card"
-    :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-2'"
-  >
+  <q-card v-for="boat in boats" :key="boat.id" flat>
     <q-card-section>
-      <div class="row items-center no-wrap">
-        <div class="col">
-          <div class="text-h6">{{ boat.name }}</div>
-          <div class="text-subtitle2">{{ boat.class }}</div>
+      <q-img :src="boat.imgsrc" :fit="'scale-down'">
+        <div class="row absolute-top">
+          <div class="col text-h5 text-left">{{ boat.name }}</div>
+          <div class="col text-right">{{ boat.class }}</div>
         </div>
-
-        <div class="col-auto">
-          <q-btn color="grey-7" round flat icon="more_vert">
-            <q-menu cover auto-close>
-              <q-list>
-                <q-item clickable>
-                  <q-item-section>Favourite</q-item-section>
-                </q-item>
-                <q-item clickable>
-                  <q-item-section>Report Problem</q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-        </div>
-      </div>
-    </q-card-section>
-
-    <q-card-section>
-      <!-- {{ lorem }} -->
+      </q-img>
     </q-card-section>
 
     <q-separator />
 
-    <q-card-actions>
-      <q-btn>Book</q-btn>
-      <q-btn>Info</q-btn>
-      <q-btn>Check-Out</q-btn>
-      <q-btn>Check-In</q-btn>
+    <q-card-actions align="evenly">
+      <q-btn flat>Info</q-btn>
+      <q-btn flat>Book</q-btn>
+      <q-btn flat>Check-Out</q-btn>
+      <q-btn flat>Check-In</q-btn>
     </q-card-actions>
   </q-card>
 </template>
@@ -53,3 +27,9 @@ defineProps({
   boats: Array<Boat>,
 });
 </script>
+
+<style lang="sass" scoped>
+.my-card
+  width: 100%
+  max-width: 400px
+</style>

src/components/models.ts

@@ -3,6 +3,7 @@ export interface Boat {
   name: string;
   class: string;
   year: number;
+  imgsrc: string;
 }
 
 export interface test {

src/pages/BoatPage.vue

@@ -14,18 +14,21 @@ const boats = ref([
     name: 'ProjectX',
     class: 'J/27',
     year: 1981,
+    imgsrc: '/src/assets/j27.png',
   },
   {
     id: 2,
     name: 'Take5',
     class: 'J/27',
     year: 1985,
+    imgsrc: '/src/assets/j27.png',
   },
   {
     id: 3,
     name: 'WeeBeestie',
     class: 'Capri 25',
     year: 1989,
+    imgsrc: '/src/assets/capri25.png',
   },
 ]);
 </script>

src/router/navlinks.ts

@@ -1,4 +1,10 @@
 export const links = [
+  {
+    name: 'Home',
+    to: '/',
+    icon: 'home',
+    front_links: false,
+  },
   {
     name: 'Profile',
     to: 'profile',