9c47c717d0
- 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
59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<template>
|
|
<div class="chapter-page">
|
|
<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 ref="chapterReaderRef" :chapter-id="chapterId" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
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 headerStore = useHeaderStore();
|
|
|
|
const chapterId = computed(() => route.params.chapterId);
|
|
const chapterReaderRef = ref(null);
|
|
</script>
|
|
|
|
<style lang="postcss" scoped>
|
|
.chapter-page {
|
|
@apply w-full h-full flex flex-col;
|
|
}
|
|
|
|
.toolbar-wrapper {
|
|
@apply overflow-hidden;
|
|
max-height: 5rem;
|
|
transition: max-height 300ms ease-in-out;
|
|
}
|
|
|
|
.toolbar-wrapper.toolbar-hidden {
|
|
max-height: 0;
|
|
}
|
|
|
|
.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 min-h-0;
|
|
}
|
|
</style>
|