Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2025-12-26 02:15:40 +01:00
Code Issues Projects Releases Wiki Activity

refine Book view

Browse source
This commit is contained in:
Gauthier Roebroeck 2019-12-11 14:47:11 +08:00
parent bd0d6aa67a
commit 9f0ea5a835
1 changed files with 58 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
komga-webui/src/components/BrowseBook.vue
View file

@ -1,31 +1,68 @@
<template>
<v-container fluid class="ma-3">
<v-row v-if="!$_.isEmpty(book)">
<v-col cols="2">
<v-img :src="thumbnailUrl"
lazy-src="../assets/cover.svg"
height="300"
max-width="212"
<v-container fluid class="ma-3" v-if="!$_.isEmpty(book)">
<v-row>
<v-col>
<v-btn icon
title="Go to series"
:to="{name:'browse-series', params: {seriesId: book.seriesId}}"
>
<span class="white--text pa-1 px-2 subtitle-2"
:style="{background: format.color, position: 'absolute', right: 0}"
>
{{ format.type }}
</span>
</v-img>
<v-btn :href="fileUrl" class="mt-2">
<v-icon left>mdi-file-download</v-icon>
Download
<v-icon>mdi-arrow-left</v-icon>
</v-btn>
</v-col>
<v-col cols="10">
<div class="title">#{{ book.number }} - {{ book.name }}</div>
<div class="caption">Filepath: {{ book.url }}</div>
<div>{{ book.size }}</div>
<div>{{ book.metadata.pagesCount }} pages</div>
</v-row>
<v-row>
<v-col cols="4" sm="4" md="auto" lg="auto" xl="auto">
<v-img :src="thumbnailUrl"
lazy-src="../assets/cover.svg"
max-height="300"
max-width="212"
/>
</v-col>
<v-col cols="8" sm="8" md="auto" lg="auto" xl="auto">
<div class="headline">{{ book.name }}</div>
<div>#{{ book.number }}</div>
</v-col>
</v-row>
<v-row align="center">
<v-col cols="1">
<v-btn icon
title="Download file"
class="pb-1"
:href="fileUrl">
<v-icon>mdi-file-download</v-icon>
</v-btn>
</v-col>
<v-col>
<v-icon class="mr-2 pb-1">mdi-book-open-page-variant</v-icon>
<span class="body-2">{{ book.metadata.pagesCount }} pages</span>
</v-col>
</v-row>
<!-- <v-row>-->
<!-- <v-col>-->
<!-- <div class="body-1">Description will go here-->
<!-- </div>-->
<!-- </v-col>-->
<!-- </v-row>-->
<v-row>
<v-col cols="2" md="1" lg="1" xl="1" class="body-2">SIZE</v-col>
<v-col cols="10" class="body-2">{{ book.size }}</v-col>
</v-row>
<v-row>
<v-col cols="2" md="1" lg="1" xl="1" class="body-2">FORMAT</v-col>
<v-col cols="10" class="body-2">{{ format.type }}</v-col>
</v-row>
<v-row align="center">
<v-col cols="2" md="1" lg="1" xl="1" class="body-2">FILE</v-col>
<v-col cols="10" class="body-2">{{ book.url }}</v-col>
</v-row>
</v-container>
</template>