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> <template>
<VRow> <VCol
<VCol
v-for="book in books" v-for="book in books"
:key="book.id" :key="book.id"
cols="12" cols="12"
sm="6" sm="6"
md="4" md="4"
> >
<VCard class="pa-2 hover-card"> <RouterLink :to="`/buchdetailseite/${book.id}`" class="buchkarten-router-link">
<div class="buchkarten-grid"> <VCard class="pa-3 hover-card" elevation="2">
<!-- Cover links --> <div class="buchkarten-grid">
<VImg <!-- Cover links, volle Höhe -->
:src="book.image" <VImg
class="buch-cover" :src="book.image"
cover 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"
/> />
<!-- Aktionen --> <!-- Inhalt rechts -->
<VCardActions class="justify-start mt-3"> <div class="buch-details">
<VBtn size="small" variant="outlined"> <div class="titel-und-icon">
<VIcon icon="tabler-list-details" /> <div class="text-subtitle-1 font-weight-bold">
<span class="ms-2">Detail Seite</span> {{ book.title }}
</VBtn> </div>
<IconBtn color="secondary" icon="tabler-share" /> <VIcon icon="tabler-search" class="search-icon" />
</VCardActions> </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>
</div> </VCard>
</VCard> </RouterLink>
</VCol> </VCol>
</VRow>
</template> </template>
<script setup> <script setup>
import Fieberkurve from '@/components/Fieberkurve.vue' import Fieberkurve from '@/components/Fieberkurve.vue'
import { RouterLink } from 'vue-router'
defineProps({ defineProps({
books: Array books: Array
@ -72,6 +63,11 @@ defineProps({
</script> </script>
<style scoped> <style scoped>
.buchkarten-router-link {
text-decoration: none;
color: inherit;
}
.buchkarten-grid { .buchkarten-grid {
display: grid; display: grid;
grid-template-columns: 160px 1fr; grid-template-columns: 160px 1fr;
@ -88,10 +84,30 @@ defineProps({
.buch-details { .buch-details {
display: flex; display: flex;
flex-direction: column; 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 { .hover-card {
transition: transform 0.25s ease, box-shadow 0.25s ease; transition: transform 0.25s ease, box-shadow 0.25s ease;
border-radius: 12px;
} }
.hover-card:hover { .hover-card:hover {
transform: translateY(-4px); transform: translateY(-4px);