Auslagen der "gefundenen Bücher" in Buchkarten.vue
This commit is contained in:
parent
5dcfa8cd96
commit
c2ea5f15c1
1
components.d.ts
vendored
1
components.d.ts
vendored
@ -26,6 +26,7 @@ declare module 'vue' {
|
||||
AppStepper: typeof import('./src/@core/components/AppStepper.vue')['default']
|
||||
AppTextarea: typeof import('./src/@core/components/app-form-elements/AppTextarea.vue')['default']
|
||||
AppTextField: typeof import('./src/@core/components/app-form-elements/AppTextField.vue')['default']
|
||||
Buchkarten: typeof import('./src/components/Buchkarten.vue')['default']
|
||||
Buecherdatenbank: typeof import('./src/pages/buecherdatenbank.vue')['default']
|
||||
BuyNow: typeof import('./src/@core/components/BuyNow.vue')['default']
|
||||
CardAddEditDialog: typeof import('./src/components/dialogs/CardAddEditDialog.vue')['default']
|
||||
|
||||
100
src/components/Buchkarten.vue
Normal file
100
src/components/Buchkarten.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<VRow>
|
||||
<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"
|
||||
/>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Fieberkurve from '@/components/Fieberkurve.vue'
|
||||
|
||||
defineProps({
|
||||
books: Array
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.buchkarten-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 160px 1fr;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.buch-cover {
|
||||
width: 160px;
|
||||
height: 240px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.buch-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hover-card {
|
||||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||||
}
|
||||
.hover-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
</style>
|
||||
@ -77,85 +77,14 @@
|
||||
|
||||
|
||||
<!-- Gefundene Bücher -->
|
||||
<VCol cols="12" md="12">
|
||||
<VCard class="mb-6">
|
||||
<!-- Trefferanzahl -->
|
||||
<VCardTitle class="text-h5 px-6 pt-4 pb-2">
|
||||
{{ resultCount }} {{ resultCount === 1 ? 'Buch' : 'Bücher' }} gefunden
|
||||
</VCardTitle>
|
||||
<VDivider class="my-2" />
|
||||
|
||||
<VRow>
|
||||
<VCol v-for="book in filteredBooks" :key="book.id" cols="12" sm="6" md="4">
|
||||
<VCard class="pa-2">
|
||||
<VCardText class="d-flex flex-column align-center">
|
||||
<!-- Bild -->
|
||||
<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>
|
||||
|
||||
<!-- Autoren -->
|
||||
<div v-if="book.authors?.length" class="text-caption mb-2 text-center">
|
||||
von {{ book.authors.map(a => a.name).join(', ') }}
|
||||
</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>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<Buchkarten :books="filteredBooks" />
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import Fieberkurve from "@/components/Fieberkurve.vue";
|
||||
import Buchkarten from '@/components/Buchkarten.vue';
|
||||
import { books } from "@/components/buecherdatenbank";
|
||||
import { genres } from "@/components/genredatenbank";
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user