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

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.

Browse Source
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2025-06-29 23:59:02 +02:00
parent d23c82631e
commit 896c57ac34
9 changed files with 171 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
View File

@@ -1,47 +1,52 @@
<template>
<div v-if="errorDetails" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
{{ errorDetails.message || 'Une erreur est survenue lors du chargement des détails.' }}
</div>
<div v-else-if="currentManga" class="relative">
<!-- Composant invisible qui écoute les mises à jour Mercure -->
<MercureListener :manga-id="mangaId" />
<Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
<div v-if="isRefreshingDetails" class="absolute top-2 right-2 text-gray-500">
<ArrowPathIcon class="h-5 w-5 animate-spin" />
</div>
<MangaHeader :manga="currentManga" />
<!-- Section Volumes -->
<div class="mt-8">
<div v-if="isLoadingVolumes" class="flex justify-center items-center h-32">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
</div>
<div v-else-if="errorVolumes" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
{{ errorVolumes.message || 'Une erreur est survenue lors du chargement des volumes.' }}
</div>
<MangaVolumeList v-else :volumes="volumes" :manga-slug="currentManga.slug" :manga-id="mangaId" />
<div class="min-h-screen bg-gray-50">
<div v-if="errorDetails" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mx-4 mt-4">
{{ errorDetails.message || 'Une erreur est survenue lors du chargement des détails.' }}
</div>
<!-- Modale des sources préférées -->
<MangaPreferredSourcesModal
:is-open="isPreferredSourcesModalOpen"
:sources="preferredSources"
:is-loading="isLoadingSources"
:error="sourcesError"
:is-saving="isSavingSources"
@close="closePreferredSourcesModal"
@save="savePreferredSources"
/>
</div>
<div v-else-if="currentManga" class="relative">
<!-- Composant invisible qui écoute les mises à jour Mercure -->
<MercureListener :manga-id="mangaId" />
<div v-else-if="isLoadingDetails" class="flex justify-center items-center h-64">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
</div>
<Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
<div v-else class="text-center text-gray-500 py-10"> Aucun manga sélectionné ou trouvé. </div>
<div v-if="isRefreshingDetails" class="absolute top-2 right-2 text-gray-500 z-20">
<ArrowPathIcon class="h-5 w-5 animate-spin" />
</div>
<MangaHeader :manga="currentManga" />
<!-- Section Volumes avec conteneur mobile -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 pb-8">
<div v-if="isLoadingVolumes" class="flex justify-center items-center h-32">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
</div>
<div v-else-if="errorVolumes" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
{{ errorVolumes.message || 'Une erreur est survenue lors du chargement des volumes.' }}
</div>
<MangaVolumeList v-else :volumes="volumes" :manga-slug="currentManga.slug" :manga-id="mangaId" />
</div>
<!-- Modale des sources préférées -->
<MangaPreferredSourcesModal
:is-open="isPreferredSourcesModalOpen"
:sources="preferredSources"
:is-loading="isLoadingSources"
:error="sourcesError"
:is-saving="isSavingSources"
@close="closePreferredSourcesModal"
@save="savePreferredSources"
/>
</div>
<div v-else-if="isLoadingDetails" class="flex justify-center items-center h-64">
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
</div>
<div v-else class="text-center text-gray-500 py-10 px-4">
Aucun manga sélectionné ou trouvé.
</div>
</div>
</template>
<script setup>