From 8949744657c5e707acd2e92df85ccd429bccef58 Mon Sep 17 00:00:00 2001
From: Simon Bruder <simon@sbruder.de>
Date: Thu, 1 Aug 2019 22:25:38 +0000
Subject: [PATCH] Display vertical pages at full width

---
 frontend/src/views/Reader.vue | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/Reader.vue b/frontend/src/views/Reader.vue
index 974868d..9920a09 100644
--- a/frontend/src/views/Reader.vue
+++ b/frontend/src/views/Reader.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="reader" v-shortkey="{left: ['arrowleft'], right: ['arrowright']}" @shortkey="navigation">
     <div class="page-container">
-      <img :style="{ width: pageWidth + '%' }" :src="info.pages[page]" @load="setScroll">
+      <img ref="currentImage" :style="{ width: orientation === 'vertical' ? pageWidth + '%' : '100%' }" :src="info.pages[page]" @load="setScroll(); setOrientation()">
       <!-- prefetching -->
       <img style="display: none;" :src="info.pages[page-1]">
       <img style="display: none;" :src="info.pages[page+1]">
@@ -34,7 +34,8 @@ export default {
       scrollPositions: [],
       pageWidth: 60,
       showSidebar: true,
-      direction: 'rtl'
+      direction: 'rtl',
+      orientation: 'vertical'
     }
   },
   computed: {
@@ -98,6 +99,18 @@ export default {
       } else {
         throw new Error('cannot change reading direction: invalid direction currently set')
       }
+    },
+
+    setOrientation () {
+      let image = this.$refs.currentImage
+
+      if (image.width < image.height) {
+        this.orientation = 'vertical'
+      } else if (image.width > image.height) {
+        this.orientation = 'horizonal'
+      } else if (image.width === image.height) {
+        this.orientation = 'square'
+      }
     }
   }
 }