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

refactor(web reader): enhance thumbnail view

Browse source 
use on-the-fly thumbnails
add page number

related to #62
This commit is contained in:
Gauthier Roebroeck 2020-01-10 14:29:42 +08:00
parent 7167f3ea24
commit d50f0db9e5
1 changed files with 27 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -226,27 +226,34 @@
</v-overlay>
<v-dialog v-model="showThumbnailsExplorer">
<v-dialog v-model="showThumbnailsExplorer" scrollable>
<v-card :max-height="$vuetify.breakpoint.height * .9"
dark
>
<v-container fluid>
<v-row>
<v-img v-for="p in pages"
<v-card-text>
<v-container fluid>
<v-row>
<div v-for="p in pages"
:key="p.number"
:src="getPageUrl(p)"
lazy-src="../assets/cover.svg"
aspect-ratio="0.7071"
:contain="true"
max-height="200"
max-width="140"
class="ma-2"
@click="showThumbnailsExplorer = false; goTo(p.number)"
:title="`Page ${p.number}`"
style="cursor: pointer"
/>
</v-row>
</v-container>
style="min-height: 220px; max-width: 140px"
class="mb-2"
>
<v-img
:src="getThumbnailUrl(p)"
lazy-src="../assets/cover.svg"
aspect-ratio="0.7071"
:contain="true"
max-height="200"
max-width="140"
class="ma-2"
@click="showThumbnailsExplorer = false; goTo(p.number)"
style="cursor: pointer"
/>
<div class="white--text text-center font-weight-bold">{{p.number}}</div>
</div>
</v-row>
</v-container>
</v-card-text>
</v-card>
</v-dialog>
@ -386,6 +393,9 @@ export default Vue.extend({
}
return url
},
getThumbnailUrl (page: PageDto): string {
return `${this.baseURL}/api/v1/books/${this.bookId}/pages/${page.number}/thumbnail`
},
prev () {
if (this.canPrev) {
(this.$refs.slick as any).prev()