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

style(reader): améliorer la toolbar et l'UI du mode scroll

Browse Source 
- Corriger la troncature de la toolbar (max-height 4rem → 5rem)
- Animer la toolbar en translateY pour un effet "bloc uni" avec le header
- Corriger le bug d'auto-hide du header après switch simple → scroll
- Augmenter la taille du titre de chapitre dans la toolbar (text-sm font-medium)
- Harmoniser le bouton scroll-to-top avec le style des ToolbarButtons
- Ajouter support de prop `class` sur les labels de ToolbarSection
This commit is contained in:
ext.jeremy.guillot@maxicoffee.domains
2026-03-15 16:50:02 +01:00
parent cc702cff19
commit 9c47c717d0
18 changed files with 396 additions and 562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,56 +1,31 @@
<template>
<div class="chapter-page">
<div class="chapter-header">
<!-- 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
class="toolbar-wrapper"
:class="{ 'toolbar-hidden': !headerStore.shouldShowReaderToolbar }"
>
<div class="toolbar-slide">
<ReaderToolbar :chapter-reader-ref="chapterReaderRef" />
</div>
</div>
<div class="reader-container">
<ChapterReader :chapter-id="chapterId" />
<ChapterReader ref="chapterReaderRef" :chapter-id="chapterId" />
</div>
</div>
</template>
<script setup>
import { ArrowLeftIcon } from '@heroicons/vue/24/outline';
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useReaderStore } from '../../application/store/readerStore';
import { computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useHeaderStore } from '../../../../shared/stores/headerStore';
import ChapterReader from '../components/ChapterReader.vue';
import ReaderToolbar from '../components/ReaderToolbar.vue';
const route = useRoute();
const router = useRouter();
const store = useReaderStore();
const headerStore = useHeaderStore();
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 } });
}
};
const chapterReaderRef = ref(null);
</script>
<style lang="postcss" scoped>
@@ -58,19 +33,26 @@ import ChapterReader from '../components/ChapterReader.vue';
@apply w-full h-full flex flex-col;
}
.chapter-header {
@apply p-6 bg-gradient-to-b from-gray-800 to-gray-900 border-b border-gray-700 shadow-lg;
.toolbar-wrapper {
@apply overflow-hidden;
max-height: 5rem;
transition: max-height 300ms ease-in-out;
}
.chapter-title-section {
@apply space-y-2;
.toolbar-wrapper.toolbar-hidden {
max-height: 0;
}
.chapter-meta {
@apply flex flex-wrap items-center gap-3;
.toolbar-slide {
transform: translateY(0);
transition: transform 300ms ease-in-out;
}
.toolbar-hidden .toolbar-slide {
transform: translateY(-100%);
}
.reader-container {
@apply flex-1 overflow-hidden;
@apply flex-1 overflow-hidden min-h-0;
}
</style>