From bd24073433aa76c82544d82b234b47f68b926ade Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Thu, 12 Dec 2019 13:46:41 +0800
Subject: [PATCH] add toolbar in BrowseBook.vue

---
 komga-webui/src/components/BrowseBook.vue | 127 ++++++++++++----------
 1 file changed, 69 insertions(+), 58 deletions(-)

diff --git a/komga-webui/src/components/BrowseBook.vue b/komga-webui/src/components/BrowseBook.vue
index 0c10961a5..1ab143ad2 100644
--- a/komga-webui/src/components/BrowseBook.vue
+++ b/komga-webui/src/components/BrowseBook.vue
@@ -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>