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

refactor: amélioration de la structure du composant MangaCard avec des ajustements de style et de mise en page, y compris l'utilisation de thumbnailUrl et l'optimisation des classes CSS

Browse Source
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2025-03-31 16:12:22 +02:00
parent f06e6c1f61
commit a172e224c1
1 changed files with 39 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
assets/vue/app/domain/manga/presentation/components/MangaCard.vue
View File

@@ -1,52 +1,48 @@
<template> <template>
<div <div
class="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105" class="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
@click="navigateToDetails" @click="navigateToDetails">
> <div class="relative pb-[150%]">
<div class="relative pb-[150%]"> <img
<img :src="manga.thumbnailUrl || 'https://via.placeholder.com/300x400'"
:src="manga.imageUrl || 'https://via.placeholder.com/300x400'" :alt="manga.title"
:alt="manga.title" class="absolute inset-0 w-full h-full object-cover bg-gray-100" />
class="absolute inset-0 w-full h-full object-contain bg-gray-100" </div>
/> <div class="p-2">
<h3 class="text-lg font-semibold text-gray-800 mb-1">{{ manga.title }}</h3>
<div class="flex items-center">
<span class="text-sm text-gray-500">{{ manga.publicationYear }}</span>
</div>
<div class="mt-1 text-sm text-gray-500"> Added: {{ formatDate(manga.createdAt) }} </div>
</div>
</div> </div>
<div class="p-2">
<h3 class="text-lg font-semibold text-gray-800 mb-1">{{ manga.title }}</h3>
<div class="flex items-center">
<span class="text-sm text-gray-500">{{ manga.publicationYear }}</span>
</div>
<div class="mt-1 text-sm text-gray-500">
Added: {{ formatDate(manga.createdAt) }}
</div>
</div>
</div>
</template> </template>
<script setup> <script setup>
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
const router = useRouter(); const router = useRouter();
const props = defineProps({ const props = defineProps({
manga: { manga: {
type: Object, type: Object,
required: true required: true
} }
}); });
const navigateToDetails = () => { const navigateToDetails = () => {
router.push({ router.push({
name: 'manga-details', name: 'manga-details',
params: { id: props.manga.id } params: { id: props.manga.id }
}); });
}; };
const formatDate = (dateString) => { const formatDate = dateString => {
const date = new Date(dateString); const date = new Date(dateString);
return date.toLocaleDateString('en-US', { return date.toLocaleDateString('en-US', {
month: 'short', month: 'short',
day: 'numeric', day: 'numeric',
year: 'numeric' year: 'numeric'
}); });
}; };
</script> </script>