From 4795aaa758c24e337677dd584bbb601402e580d8 Mon Sep 17 00:00:00 2001
From: Simon Bruder <simon@sbruder.de>
Date: Thu, 1 Aug 2019 19:08:46 +0000
Subject: [PATCH] Use flexbox for page layout

---
 frontend/src/views/Reader.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/Reader.vue b/frontend/src/views/Reader.vue
index 1816c02..bf9eac8 100644
--- a/frontend/src/views/Reader.vue
+++ b/frontend/src/views/Reader.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="reader" v-shortkey="{left: ['arrowleft'], right: ['arrowright']}" @shortkey="navigation" :style="{ 'grid-template-columns': showSidebar ? 'auto 250px' : 'auto' }">
-    <div>
+  <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">
       <!-- prefetching -->
       <img style="display: none;" :src="info.pages[page-1]">
@@ -105,10 +105,14 @@ export default {
 
 <style scoped>
 .reader {
-  display: grid;
+  display: flex;
   position: relative;
 }
 
+.page-container {
+  flex-grow: 1;
+}
+
 .current-page {
   max-width: 50vw;
 }
@@ -126,6 +130,7 @@ img {
 }
 
 .sidebar {
+  flex: 0 0 250px;
   background-color: #eee;
   height: 100vh;
   position: sticky;