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

Auslagen der "gefundenen Bücher" in Buchkarten.vue

Browse Source
This commit is contained in:
Michi Tomaschko 2025-04-07 01:11:35 +02:00
parent 5dcfa8cd96
commit c2ea5f15c1
3 changed files with 103 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@ -26,6 +26,7 @@ declare module 'vue' {
AppStepper: typeof import('./src/@core/components/AppStepper.vue')['default'] AppStepper: typeof import('./src/@core/components/AppStepper.vue')['default']
AppTextarea: typeof import('./src/@core/components/app-form-elements/AppTextarea.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'] 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'] Buecherdatenbank: typeof import('./src/pages/buecherdatenbank.vue')['default']
BuyNow: typeof import('./src/@core/components/BuyNow.vue')['default'] BuyNow: typeof import('./src/@core/components/BuyNow.vue')['default']
CardAddEditDialog: typeof import('./src/components/dialogs/CardAddEditDialog.vue')['default'] CardAddEditDialog: typeof import('./src/components/dialogs/CardAddEditDialog.vue')['default']

100
src/components/Buchkarten.vue Normal file
View 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>

75
src/pages/buechersuche.vue
View File

@ -77,85 +77,14 @@
<!-- Gefundene Bücher --> <!-- Gefundene Bücher -->
<VCol cols="12" md="12"> <Buchkarten :books="filteredBooks" />
<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>
</VRow> </VRow>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from "vue"; import { ref, computed } from "vue";
import Fieberkurve from "@/components/Fieberkurve.vue"; import Fieberkurve from "@/components/Fieberkurve.vue";
import Buchkarten from '@/components/Buchkarten.vue';
import { books } from "@/components/buecherdatenbank"; import { books } from "@/components/buecherdatenbank";
import { genres } from "@/components/genredatenbank"; import { genres } from "@/components/genredatenbank";