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

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

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