103 lines
4.3 KiB
Vue
103 lines
4.3 KiB
Vue
<template>
|
|
<div class="shadow-lg text-white">
|
|
<div class="relative h-64 sm:h-80 lg: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-col lg:flex-row justify-center p-4 lg:p-6">
|
|
<!-- Image de couverture - cachée sur mobile, visible sur desktop -->
|
|
<div class="hidden lg:block mr-12">
|
|
<img :src="manga.thumbnailUrl" :alt="manga.title" class="max-w-48 lg:max-w-72 max-h-48 lg:max-h-72" />
|
|
</div>
|
|
|
|
<!-- Informations du manga -->
|
|
<div class="flex flex-col space-y-3 lg:space-y-4 flex-1 min-w-0">
|
|
<div class="flex items-start lg:items-center space-x-3">
|
|
<BookmarkIcon class="h-6 w-6 lg:h-8 lg:w-8 text-white flex-shrink-0 mt-1 lg:mt-0" />
|
|
<h1 class="text-xl sm:text-2xl lg:text-3xl font-bold leading-tight">{{ manga.title }}</h1>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-4 text-sm lg:text-base">
|
|
<span>{{ manga.year }}</span>
|
|
<span>Chapitres: {{ manga.totalChapters }}</span>
|
|
</div>
|
|
|
|
<div class="flex items-start lg:items-center space-x-2">
|
|
<FolderIcon class="h-5 w-5 lg:h-6 lg:w-6 text-gray-400 flex-shrink-0 mt-0.5 lg:mt-0" />
|
|
<div class="flex flex-col lg:flex-row lg:items-center lg:space-x-4 min-w-0 flex-1">
|
|
<span class="truncate text-sm lg:text-base">/media/mangas/{{ manga.title }} ({{ manga.year }})</span>
|
|
<span class="bg-green-600 py-1 px-2 rounded text-xs lg:text-sm self-start lg:self-auto">{{ manga.status || 'Terminé' }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-2" v-if="manga.tags?.length">
|
|
<template v-for="(tag, index) in manga.tags.slice(0, isMobile ? 3 : 5)" :key="index">
|
|
<span class="bg-gray-700 py-1 px-2 rounded-sm text-xs lg:text-sm">{{ tag }}</span>
|
|
</template>
|
|
<span v-if="manga.tags.length > (isMobile ? 3 : 5)" class="bg-gray-700 py-1 px-2 rounded-sm text-xs lg:text-sm">...</span>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<div class="flex items-center space-x-2">
|
|
<HeartIcon class="h-5 w-5 lg:h-6 lg:w-6 text-red-500" />
|
|
<span class="text-sm lg:text-base">{{ manga.rating }}</span>
|
|
</div>
|
|
<p class="text-sm lg:text-base line-clamp-3 lg:line-clamp-5">{{ manga.description }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { BookmarkIcon, FolderIcon, HeartIcon } from '@heroicons/vue/24/outline';
|
|
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
|
|
|
defineProps({
|
|
manga: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
// Détection du mobile
|
|
const windowWidth = ref(window.innerWidth);
|
|
const isMobile = computed(() => windowWidth.value < 1024);
|
|
|
|
const updateWindowWidth = () => {
|
|
windowWidth.value = window.innerWidth;
|
|
};
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('resize', updateWindowWidth);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', updateWindowWidth);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Pour s'assurer que line-clamp fonctionne */
|
|
@supports (-webkit-line-clamp: 3) {
|
|
.line-clamp-3 {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
|
|
@supports (-webkit-line-clamp: 5) {
|
|
.line-clamp-5 {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 5;
|
|
line-clamp: 5;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
</style>
|