feat: amélioration de l'interface utilisateur des composants MangaHeader, MangaVolume et MangaVolumeList, avec des ajustements de style pour une meilleure réactivité et une expérience utilisateur optimisée sur mobile. Ajout de la gestion de la taille de la fenêtre pour adapter l'affichage des éléments.
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
parent
d23c82631e
commit
896c57ac34
@@ -1,46 +1,46 @@
|
||||
<template>
|
||||
<div class="shadow-lg text-white">
|
||||
<div class="relative h-96 bg-cover bg-center" :style="{ backgroundImage: `url('${manga.imageUrl}')` }">
|
||||
<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-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 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">
|
||||
<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 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 items-center mb-4">
|
||||
<span class="mr-4">{{ manga.year }}</span>
|
||||
<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-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 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>
|
||||
<p class="line-clamp-5">{{ manga.description }}</p>
|
||||
</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>
|
||||
@@ -50,6 +50,7 @@
|
||||
|
||||
<script setup>
|
||||
import { BookmarkIcon, FolderIcon, HeartIcon } from '@heroicons/vue/24/outline';
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
|
||||
defineProps({
|
||||
manga: {
|
||||
@@ -57,10 +58,37 @@
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user