MCMichinator/skoutz-relaunch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Buchkarten: search-icon, hover, Router, sowie Randabstand links/rechts

Browse Source
This commit is contained in:
Michi Tomaschko 2025-04-07 03:04:07 +02:00
parent 3b46f9ad9f
commit 7b2407b614
1 changed files with 68 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/components/Buchkarten.vue
View File

@ -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);