colgora/Mangarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ajout des composants MangaChapter, MangaChapterList, MangaHeader, MangaVolume, MangaVolumeList et mise à jour de la page MangaDetails pour une meilleure gestion des chapitres et volumes de manga

Browse Source
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2025-03-26 21:41:59 +01:00
parent eeb8447d7a
commit 22cf4eb186
6 changed files with 364 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
assets/vue/app/domain/manga/presentation/components/MangaHeader.vue Normal file
View File

@@ -0,0 +1,60 @@
<template>
<div class="shadow-lg text-white">
<div class="relative h-96 bg-cover bg-center" :style="{ backgroundImage: `url('${manga.imageUrl}')` }">
<div class="absolute inset-0 bg-black opacity-50"></div>
<div class="absolute inset-0 flex flex-row justify-center p-4">
<!-- Image de couverture -->
<div class="hidden mr-12 xl:block 2xl:block">
<img :src="manga.thumbnailUrl" :alt="manga.title" class="max-w-72 max-h-72 ml-4" />
</div>
<!-- Informations du manga -->
<div class="flex flex-col">
<div class="flex items-center mb-4">
<BookmarkIcon class="h-8 w-8 text-white" />
<h1 class="text-3xl font-bold ml-4">{{ manga.title }}</h1>
</div>
<div class="flex items-center mb-4">
<span class="mr-4">{{ manga.year }}</span>
<span>Chapitres: {{ manga.totalChapters }}</span>
</div>
<div class="flex items-center mb-4">
<FolderIcon class="h-6 w-6 text-gray-400 mr-2" />
<span class="truncate">/media/mangas/{{ manga.title }} ({{ manga.year }})</span>
<span class="ml-auto bg-green-600 py-1 px-2 rounded">{{ manga.status || 'Terminé' }}</span>
</div>
<div class="flex items-center mb-4">
<template v-if="manga.tags?.length">
<template v-for="(tag, index) in manga.tags.slice(0, 5)" :key="index">
<span class="bg-gray-700 py-1 px-2 rounded-sm mr-2">{{ tag }}</span>
</template>
<span v-if="manga.tags.length > 5" class="bg-gray-700 py-1 px-2 rounded-sm mr-2">...</span>
</template>
</div>
<div class="mb-4">
<div class="flex items-center mb-2">
<HeartIcon class="h-6 w-6 text-red-500 mr-2" />
<span>{{ manga.rating }}</span>
</div>
<p>{{ manga.description }}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { BookmarkIcon, FolderIcon, HeartIcon } from '@heroicons/vue/24/outline';
defineProps({
manga: {
type: Object,
required: true
}
});
</script>