Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2025-12-20 23:45:11 +01:00
Code Issues Projects Releases Wiki Activity

add toolbar in BrowseBook.vue

Browse source
This commit is contained in:
Gauthier Roebroeck 2019-12-12 13:46:41 +08:00
parent ebab0850df
commit bd24073433
1 changed files with 69 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,69 +1,73 @@
<template>
<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}}"
>
<v-icon>mdi-arrow-left</v-icon>
</v-btn>
</v-col>
</v-row>
<div>
<v-toolbar flat
color="grey lighten-4"
class="sticky-bar"
:style="barStyle"
>
<v-btn icon
title="Go to series"
:to="{name:'browse-series', params: {seriesId: book.seriesId}}"
>
<v-icon>mdi-arrow-left</v-icon>
</v-btn>
</v-toolbar>
<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-container fluid class="ma-3" v-if="!$_.isEmpty(book)">
<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-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 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>-->
<!-- <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">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>
<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-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>
</v-container>
</div>
</template>
<script lang="ts">
@ -103,11 +107,18 @@ export default Vue.extend({
},
format (): BookFormat {
return getBookFormatFromMediaType(this.book.metadata.mediaType)
},
barStyle (): any {
if (this.$vuetify.breakpoint.name === 'xs') {
return { 'top': '56px' }
} else {
return { 'top': '64px' }
}
}
}
})
</script>
<style scoped>
@import "../assets/css/sticky-bar.css";
</style>