From 9f0ea5a835e15eb466f41dcacf35065dd5691eb4 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Wed, 11 Dec 2019 14:47:11 +0800
Subject: [PATCH] refine Book view

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

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