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

48
assets/vue/app/domain/reader/presentation/components/SingleModeReader.vue
View File

@@ -5,10 +5,10 @@
<!-- Zone de navigation gauche (invisible) -->
<div
class="navigation-zone left-zone"
@click.stop="goToPrevious"
@click.stop="onLeftZoneClick"
@mouseenter="showLeftHint"
@mouseleave="hideLeftHint"
title="Page précédente"
:title="isRtl ? 'Page suivante' : 'Page précédente'"
></div>
<!-- Page centrale -->
@@ -24,21 +24,21 @@
<!-- Zone de navigation droite (invisible) -->
<div
class="navigation-zone right-zone"
@click.stop="goToNext"
@click.stop="onRightZoneClick"
@mouseenter="showRightHint"
@mouseleave="hideRightHint"
title="Page suivante"
:title="isRtl ? 'Page précédente' : 'Page suivante'"
></div>
</div>
<!-- Indicateurs visuels de navigation -->
<div class="navigation-hints">
<div class="hint left-hint" v-if="canGoToPrevious && (showNavigationHints || showLeftHintHover)">
<div class="hint left-hint" v-if="canGoLeft && (showNavigationHints || showLeftHintHover)">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</div>
<div class="hint right-hint" v-if="canGoToNext && (showNavigationHints || showRightHintHover)">
<div class="hint right-hint" v-if="canGoRight && (showNavigationHints || showRightHintHover)">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
@@ -81,14 +81,18 @@ const showLeftHintHover = ref(false);
const showRightHintHover = ref(false);
let hintTimeout = null;
// Computed pour vérifier les possibilités de navigation
const canGoToPrevious = computed(() => {
return !store.isFirstPage || store.hasPreviousChapter;
});
const isRtl = computed(() => store.readingDirection === 'rtl');
const canGoToNext = computed(() => {
return !store.isLastPage || store.hasNextChapter;
});
// Computed pour vérifier les possibilités de navigation
const canGoToPrevious = computed(() => !store.isFirstPage || store.hasPreviousChapter);
const canGoToNext = computed(() => !store.isLastPage || store.hasNextChapter);
// En RTL, le côté gauche avance dans l'histoire (page suivante) et le droit recule
const canGoLeft = computed(() => isRtl.value ? canGoToNext.value : canGoToPrevious.value);
const canGoRight = computed(() => isRtl.value ? canGoToPrevious.value : canGoToNext.value);
const onLeftZoneClick = () => isRtl.value ? goToNext() : goToPrevious();
const onRightZoneClick = () => isRtl.value ? goToPrevious() : goToNext();
// Navigation vers la page/chapitre précédent
const goToPrevious = async () => {
@@ -151,22 +155,20 @@ const hideRightHint = () => {
<style lang="postcss" scoped>
.single-mode-reader {
@apply relative w-full h-full flex items-center justify-center;
/* Suppression des marges sur mobile */
@apply p-0 sm:p-2;
/* Ajouter des marges en haut et en bas pour l'espace des contrôles et paramètres */
@apply py-8 sm:py-12;
@apply relative w-full flex-1 flex flex-col min-h-0 overflow-hidden;
@apply py-2;
}
.page-navigation-wrapper {
@apply relative w-full h-full flex items-center justify-center cursor-pointer;
/* overflow-auto : scrollbars quand l'image zoomée déborde */
@apply relative w-full flex-1 min-h-0 overflow-auto cursor-pointer;
}
.page-content {
@apply flex-1 h-full flex items-center justify-center;
pointer-events: none; /* Empêche les clics sur l'image elle-même */
/* Optimisation pour mobile */
@apply p-0;
/* min-h-full : centre l'image quand elle est plus petite que le conteneur */
min-height: 100%;
@apply flex items-center justify-center;
pointer-events: none;
}
.navigation-zone {