Büchersuche: Layout gefundene Bücher

src/pages/buechersuche.vue

@@ -17,6 +17,7 @@
 
         <br>
 
+
         <!-- Genres -->
         <div class="genre-section-main">
           <div
@@ -74,6 +75,8 @@
       </VCard>
     </VCol>
 
+
+    <!-- Gefundene Bücher -->
     <VCol cols="12" md="12">
       <VCard class="mb-6">
         <!-- Trefferanzahl -->
@@ -83,32 +86,65 @@
         <VDivider class="my-2" />
 
         <VRow>
-          <VCol v-for="book in filteredBooks" :key="book.id" sm="6" cols="12">
+          <VCol v-for="book in filteredBooks" :key="book.id" cols="12" sm="6" md="4">
-            <VCard>
+            <VCard class="pa-2">
-              <div class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row">
+              <VCardText class="d-flex flex-column align-center">
-                <div class="ma-auto pa-5">
+                <!-- Bild -->
-                  <VImg width="200px" height="300px" :src="book.image" />
+                <VImg
+                  :src="book.image"
+                  width="160"
+                  height="240"
+                  class="mb-3 rounded"
+                  cover
+                />
+
+                <!-- Titel -->
+                <div class="text-h6 font-weight-bold text-center">
+                  {{ book.title }}
                 </div>
 
-                <VDivider :vertical="$vuetify.display.mdAndUp" />
+                <!-- Autoren -->
-
+                <div v-if="book.authors?.length" class="text-caption mb-2 text-center">
-                <div>
+                  von {{ book.authors.map(a => a.name).join(', ') }}
-                  <VCardTitle>{{ book.title }}</VCardTitle>
-                  <VCardText>{{ book.description }}</VCardText>
-                  <Fieberkurve
-                    :is-static="true"
-                    :default-values="book.fieberkurve"
-                    :hide-text="true"
-                  />
-                  <VCardActions class="justify-space-between">
-                    <VBtn>
-                      <VIcon icon="tabler-list-details" />
-                      <span class="ms-2">Detail Seite</span>
-                    </VBtn>
-                    <IconBtn color="secondary" icon="tabler-share" />
-                  </VCardActions>
                 </div>
-              </div>
+
+                <!-- Genres -->
+                <div class="d-flex flex-wrap justify-center mb-2">
+                  <VChip
+                    v-for="genre in book.genres"
+                    :key="genre"
+                    color="primary"
+                    size="small"
+                    class="ma-1"
+                  >
+                    {{ genre }}
+                  </VChip>
+                </div>
+
+                <!-- Beschreibung (Blurb) -->
+                <div
+                  class="text-truncate mb-3 text-center"
+                  style="max-width: 90%; max-height: 3em; overflow: hidden;"
+                >
+                  {{ book.blurb }}
+                </div>
+
+                <!-- Fieberkurve -->
+                <Fieberkurve
+                  :is-static="true"
+                  :default-values="book.fieberkurve"
+                  :hide-text="true"
+                />
+
+                <!-- Aktionen -->
+                <VCardActions class="justify-center mt-2">
+                  <VBtn size="small" variant="outlined">
+                    <VIcon icon="tabler-list-details" />
+                    <span class="ms-2">Detail Seite</span>
+                  </VBtn>
+                  <IconBtn color="secondary" icon="tabler-share" />
+                </VCardActions>
+              </VCardText>
             </VCard>
           </VCol>
         </VRow>