From 7b2407b614596ec9eb86426c0c5eca1788aea2b0 Mon Sep 17 00:00:00 2001
From: MCMichinator <michi.tomaschko@gmail.com>
Date: Mon, 7 Apr 2025 03:04:07 +0200
Subject: [PATCH] Buchkarten: search-icon, hover, Router, sowie Randabstand
 links/rechts

---
 src/components/Buchkarten.vue | 120 +++++++++++++++++++---------------
 1 file changed, 68 insertions(+), 52 deletions(-)

diff --git a/src/components/Buchkarten.vue b/src/components/Buchkarten.vue
index 78aae52..f99d589 100644
--- a/src/components/Buchkarten.vue
+++ b/src/components/Buchkarten.vue
@@ -1,70 +1,61 @@
 <template>
-  <VRow>
-    <VCol
+  <VCol
       v-for="book in books"
       :key="book.id"
       cols="12"
       sm="6"
       md="4"
     >
-      <VCard class="pa-2 hover-card">
-        <div class="buchkarten-grid">
-          <!-- Cover links -->
-          <VImg
-            :src="book.image"
-            class="buch-cover"
-            cover
-          />
-
-          <!-- Inhalt rechts -->
-          <div class="buch-details">
-            <!-- Titel -->
-            <div class="text-h6 font-weight-bold">
-              {{ book.title }}
-            </div>
-
-            <!-- Autoren -->
-            <div v-if="book.authors?.length" class="text-caption mb-2">
-              von {{ book.authors.map(a => a.name).join(', ') }}
-            </div>
-
-            <!-- Genres -->
-            <div class="d-flex flex-wrap mb-2">
-              <VChip
-                v-for="genre in book.genres"
-                :key="genre"
-                color="primary"
-                size="small"
-                class="ma-1"
-              >
-                {{ genre }}
-              </VChip>
-            </div>
-
-            <!-- Fieberkurve -->
-            <Fieberkurve
-              :is-static="true"
-              :default-values="book.fieberkurve"
-              :hide-text="true"
+      <RouterLink :to="`/buchdetailseite/${book.id}`" class="buchkarten-router-link">
+        <VCard class="pa-3 hover-card" elevation="2">
+          <div class="buchkarten-grid">
+            <!-- Cover links, volle Höhe -->
+            <VImg
+              :src="book.image"
+              class="buch-cover"
+              cover
             />
 
-            <!-- Aktionen -->
-            <VCardActions class="justify-start mt-3">
-              <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>
+            <!-- Inhalt rechts -->
+            <div class="buch-details">
+              <div class="titel-und-icon">
+                <div class="text-subtitle-1 font-weight-bold">
+                  {{ book.title }}
+                </div>
+                <VIcon icon="tabler-search" class="search-icon" />
+              </div>
+
+              <div v-if="book.authors?.length" class="text-caption text-medium-emphasis mb-2">
+                von {{ book.authors.map(a => a.name).join(', ') }}
+              </div>
+
+              <div class="d-flex flex-wrap mb-2">
+                <VChip
+                  v-for="genre in book.genres"
+                  :key="genre"
+                  color="primary"
+                  size="small"
+                  class="ma-1"
+                >
+                  {{ genre }}
+                </VChip>
+              </div>
+
+              <Fieberkurve
+                :is-static="true"
+                :default-values="book.fieberkurve"
+                :hide-text="true"
+              />
+            </div>
           </div>
-        </div>
-      </VCard>
+        </VCard>
+      </RouterLink>
     </VCol>
-  </VRow>
 </template>
 
 <script setup>
 import Fieberkurve from '@/components/Fieberkurve.vue'
+import { RouterLink } from 'vue-router'
 
 defineProps({
   books: Array
@@ -72,6 +63,11 @@ defineProps({
 </script>
 
 <style scoped>
+.buchkarten-router-link {
+  text-decoration: none;
+  color: inherit;
+}
+
 .buchkarten-grid {
   display: grid;
   grid-template-columns: 160px 1fr;
@@ -88,10 +84,30 @@ defineProps({
 .buch-details {
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
+  min-height: 240px;
+  position: relative;
+}
+
+.titel-und-icon {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+}
+
+.search-icon {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  color: #888;
+}
+
+.hover-card:hover .search-icon {
+  opacity: 1;
 }
 
 .hover-card {
   transition: transform 0.25s ease, box-shadow 0.25s ease;
+  border-radius: 12px;
 }
 .hover-card:hover {
   transform: translateY(-4px);