From 769ce0ade98e4f08d31cce3fd3f3569df06504b7 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Wed, 5 Mar 2025 17:49:20 -0600
Subject: [PATCH] Update comic reader bottom page number bar to only show when
 top bar is showing #1485

---
 components/readers/ComicReader.vue | 17 ++++++++---------
 components/readers/Reader.vue      |  2 +-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/components/readers/ComicReader.vue b/components/readers/ComicReader.vue
index eb237eef..e18885e3 100644
--- a/components/readers/ComicReader.vue
+++ b/components/readers/ComicReader.vue
@@ -23,7 +23,7 @@
       </div>
     </div>
 
-    <div class="fixed left-0 h-8 w-full bg-bg px-4 flex items-center text-fg-muted" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
+    <div class="fixed left-0 h-8 w-full bg-bg px-4 flex items-center text-fg-muted transition-transform" :class="showingToolbar ? 'translate-y-0' : isPlayerOpen ? 'translate-y-[120px]' : 'translate-y-32'" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
       <div class="flex-grow" />
       <p class="text-xs">{{ page }} / {{ numPages }}</p>
     </div>
@@ -49,7 +49,8 @@ export default {
       default: () => {}
     },
     isLocal: Boolean,
-    keepProgress: Boolean
+    keepProgress: Boolean,
+    showingToolbar: Boolean
   },
   data() {
     return {
@@ -372,14 +373,12 @@ export default {
 
 <style scoped>
 #comic-reader {
-  height: calc(100% - 36px);
-  max-height: calc(100% - 36px);
-  padding-top: 36px;
+  height: 100%;
+  max-height: 100%;
 }
 .reader-player-open #comic-reader {
-  height: calc(100% - 156px);
-  max-height: calc(100% - 156px);
-  padding-top: 36px;
+  height: calc(100% - 120px);
+  max-height: calc(100% - 120px);
 }
 
 .comicimg {
@@ -390,4 +389,4 @@ export default {
   width: 100vw;
   height: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/readers/Reader.vue b/components/readers/Reader.vue
index 516d8902..371beab8 100644
--- a/components/readers/Reader.vue
+++ b/components/readers/Reader.vue
@@ -22,7 +22,7 @@
     </div>
 
     <!-- ereader -->
-    <component v-if="readerComponentName" ref="readerComponent" :is="readerComponentName" :url="ebookUrl" :library-item="selectedLibraryItem" :is-local="isLocal" :keep-progress="keepProgress" @touchstart="touchstart" @touchend="touchend" @loaded="readerLoaded" @hook:mounted="readerMounted" />
+    <component v-if="readerComponentName" ref="readerComponent" :is="readerComponentName" :url="ebookUrl" :library-item="selectedLibraryItem" :is-local="isLocal" :keep-progress="keepProgress" :showing-toolbar="showingToolbar" @touchstart="touchstart" @touchend="touchend" @loaded="readerLoaded" @hook:mounted="readerMounted" />
 
     <!-- table of contents modal -->
     <modals-fullscreen-modal v-model="showTOCModal" :theme="ereaderTheme">