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 {