Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2026-05-08 12:35:30 +02:00
Code Issues Projects Releases Wiki Activity

fix(web reader): remove blank space between images in double pages mode

Browse source 
closes #72
This commit is contained in:
Gauthier Roebroeck 2020-01-17 11:02:21 +08:00
parent 759d60f468
commit b65b009e0d
1 changed files with 20 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
komga-webui/src/views/BookReader.vue
View file

@ -33,40 +33,16 @@
:eager="eagerLoad(p)" :eager="eagerLoad(p)"
> >
<div :class="`d-flex flex-row${rtl ? '-reverse' : ''} justify-center`"> <div :class="`d-flex flex-row${rtl ? '-reverse' : ''} justify-center`">
<v-img :src="getPageUrl(p)" <img :src="getPageUrl(p)"
:max-height="maxHeight" :height="maxHeight"
:max-width="$vuetify.breakpoint.width / (doublePages && p !== 1 && p !== pagesCount ? 2 : 1)" :width="maxWidth(p)"
:contain="true" />
:eager="eagerLoad(p)"
>
<template v-slot:placeholder>
<v-row
class="fill-height ma-0"
align="center"
justify="center"
>
<v-progress-circular indeterminate color="grey lighten-5"/>
</v-row>
</template>
</v-img>
<v-img v-if="doublePages && p !== 1 && p !== pagesCount && p+1 !== pagesCount" <img v-if="doublePages && p !== 1 && p !== pagesCount && p+1 !== pagesCount"
:src="getPageUrl(p+1)" :src="getPageUrl(p+1)"
:max-height="maxHeight" :height="maxHeight"
:max-width="$vuetify.breakpoint.width / (doublePages ? 2 : 1)" :width="maxWidth(p+1)"
:contain="true" />
:eager="eagerLoad(p)"
>
<template v-slot:placeholder>
<v-row
class="fill-height ma-0"
align="center"
justify="center"
>
<v-progress-circular indeterminate color="grey lighten-5"/>
</v-row>
</template>
</v-img>
</div> </div>
</v-carousel-item> </v-carousel-item>
</v-carousel> </v-carousel>
@ -426,8 +402,8 @@ export default Vue.extend({
progress (): number { progress (): number {
return this.currentPage / this.pagesCount * 100 return this.currentPage / this.pagesCount * 100
}, },
maxHeight (): number | undefined { maxHeight (): number | string {
return this.fitHeight ? this.$vuetify.breakpoint.height : undefined return this.fitHeight ? this.$vuetify.breakpoint.height : 'auto'
}, },
slidesRange (): number[] { slidesRange (): number[] {
if (!this.doublePages) { if (!this.doublePages) {
@ -588,6 +564,15 @@ export default Vue.extend({
}, },
eagerLoad (p: number): boolean { eagerLoad (p: number): boolean {
return Math.abs(this.currentPage - p) <= 2 return Math.abs(this.currentPage - p) <= 2
},
maxWidth (p: number): number | string {
if (this.fitHeight) {
return 'auto'
}
if (this.doublePages && p !== 1 && p !== this.pagesCount) {
return this.$vuetify.breakpoint.width / 2
}
return this.$vuetify.breakpoint.width
} }
} }
}) })