Update comic reader bottom page number bar to only show when top bar …

…is showing #1485
advplyr · Mar 5, 2025 · 769ce0a · 769ce0a
1 parent 6f01eaf
commit 769ce0a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git 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>
+</style>
diff --git 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">