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

Merge pull request 'fix(reader): corriger le chevauchement des pages en mode scroll avec zoom' (#30) from fix/reader-zoom-overlap-mobile into main
All checks were successful
Deploy / deploy (push) Successful in 1m19s
Details

Browse Source 
Reviewed-on: #30
This commit was merged in pull request #30.
This commit is contained in:
colgora
2026-03-26 15:58:06 +01:00
parent 3963efa986 071e12a06c
commit 507fac5b5e
2 changed files with 5 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/vue/app/domain/reader/presentation/components/InfiniteReader.vue
View File

@@ -94,14 +94,14 @@ import ReaderPage from './ReaderPage.vue';
});
};
// Calcul de la hauteur du placeholder — miroir exact du maxWidth de ReaderPage
// Calcul de la hauteur du placeholder — miroir exact du maxWidth de ReaderPage, zoom inclus
const getPlaceholderHeight = (page) => {
const dims = page?.dimensions;
if (!dims?.width || !dims?.height) return 800;
if (!dims?.width || !dims?.height) return Math.round(800 * props.zoom);
const displayWidth = windowWidth.value < 1200
? Math.min(dims.width, windowWidth.value * 0.95)
: Math.min(dims.width, 1200);
return Math.round((dims.height / dims.width) * displayWidth);
return Math.round((dims.height / dims.width) * displayWidth * props.zoom);
};
const setupObservers = () => {

6
assets/vue/app/domain/reader/presentation/components/ReaderPage.vue
View File

@@ -87,13 +87,9 @@ import { useReaderStore } from '../../application/store/readerStore';
const store = useReaderStore();
// En mode single : zoom via la propriété CSS `zoom` (affecte le layout → scrollbars naturelles)
// En mode infinite : zoom via transform: scale (pas d'impact layout souhaité)
// zoom via la propriété CSS `zoom` dans les deux modes (affecte le layout → pas de chevauchement en mode scroll)
const containerStyle = computed(() => {
if (store.readingMode === 'single') {
return { zoom: props.zoom };
}
return { transform: `scale(${props.zoom})` };
});
const imageRef = ref(null);