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

feat: ajout de la gestion de l'auto-hide du header et amélioration de la réactivité des composants en fonction de la taille de la fenêtre, ainsi que des optimisations CSS pour une meilleure expérience utilisateur sur mobile.

Browse Source
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2025-06-26 22:59:21 +02:00
parent 4848a1736f
commit ebcca466a9
10 changed files with 279 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
assets/vue/app/domain/reader/presentation/pages/ChapterPage.vue
View File

@@ -1,11 +1,28 @@
<template>
<div class="chapter-page">
<div class="chapter-header">
<h1 class="text-2xl font-bold">
{{ currentChapter?.title || 'Chargement...' }}
</h1>
<div class="chapter-info">
<span class="text-gray-400"> Chapitre {{ currentChapter?.number }} </span>
<!-- Bouton de retour -->
<div class="flex items-center gap-4 mb-4">
<button
@click="goBackToManga"
class="flex items-center gap-2 px-3 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-white transition-colors duration-200"
:disabled="!currentChapter?.mangaId"
>
<ArrowLeftIcon class="h-5 w-5" />
<span class="text-sm font-medium">Retour au manga</span>
</button>
</div>
<!-- Titre du chapitre amélioré -->
<div class="chapter-title-section">
<h1 class="text-3xl md:text-4xl font-bold text-white leading-tight">
{{ currentChapter?.title || 'Chargement...' }}
</h1>
<div class="chapter-meta mt-3">
<span class="inline-flex items-center px-3 py-1 bg-blue-600 text-white text-sm font-semibold rounded-full">
Chapitre {{ currentChapter?.number }}
</span>
</div>
</div>
</div>
@@ -16,16 +33,24 @@
</template>
<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useReaderStore } from '../../application/store/readerStore';
import ChapterReader from '../components/ChapterReader.vue';
import { ArrowLeftIcon } from '@heroicons/vue/24/outline';
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useReaderStore } from '../../application/store/readerStore';
import ChapterReader from '../components/ChapterReader.vue';
const route = useRoute();
const router = useRouter();
const store = useReaderStore();
const chapterId = computed(() => route.params.chapterId);
const currentChapter = computed(() => store.currentChapter);
const goBackToManga = () => {
if (currentChapter.value?.mangaId) {
router.push({ name: 'manga-details', params: { id: currentChapter.value.mangaId } });
}
};
</script>
<style lang="postcss" scoped>
@@ -34,11 +59,15 @@
}
.chapter-header {
@apply p-4 bg-gray-800 border-b border-gray-700;
@apply p-6 bg-gradient-to-b from-gray-800 to-gray-900 border-b border-gray-700 shadow-lg;
}
.chapter-info {
@apply mt-2;
.chapter-title-section {
@apply space-y-2;
}
.chapter-meta {
@apply flex flex-wrap items-center gap-3;
}
.reader-container {