Make margins act as next / back button

AndBible · Dec 31, 2024 · c56ab2c · c56ab2c
1 parent ba93548
commit c56ab2c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 28 deletions.
diff --git a/app/bibleview-js/src/components/BibleView.vue b/app/bibleview-js/src/components/BibleView.vue
@@ -40,14 +40,8 @@
       <div style="position: absolute; top: -5000px;" v-if="documents.length === 0">Invisible element to make fonts load properly</div>
       <DocumentBroker v-for="document in documents" :key="document.id" :document="document"/>
     </div>
-    <div v-if="noAnimation">
-      <div class="next-page-button" @click.stop="scrollUpDown()">
-        <FontAwesomeIcon icon="chevron-right" />
-      </div>
-      <div class="prev-page-button">
-        <FontAwesomeIcon icon="chevron-left" @click.stop="scrollUpDown(true)"/>
-      </div>
-    </div>
+    <div class="prev-page-button" @click.stop="scrollUpDown(true)" :style="{width: `${calculatedConfig.marginLeft}px`}"/>
+    <div class="next-page-button" @click.stop="scrollUpDown()" :style="{width: `${calculatedConfig.marginRight}px`}" />
     <div
         v-if="appSettings.isBottomWindow"
         @touchmove.stop.prevent
@@ -563,29 +557,18 @@ a {
 
 .next-page-button {
   position: fixed;
-  right: 4mm;
-  top: 50vh;
-  width: 12mm;
-  height: 12mm;
-  border-radius: 50%;
-  border-color: transparent; //rgba(0, 0, 0, 0.2);
-  .night & {
-    border-color: rgba(255, 255, 255, 0.2);
-    color: rgba(255, 255, 255, 0.2);
-  }
-  border-width: 2px;
-  border-style: solid;
-  & > svg {
-    transform: translateX(-50%) translateY(-50%) translateX(6mm) translateY(6mm) scale(150%);
-  }
-  color: rgba(0, 0, 0, 0.2);
+  right: 0;
+  bottom: 0;
+  top: 0;
+  width: 0;
 }
 
 .prev-page-button {
   @extend .next-page-button;
-  left: 4mm;
+  left: 0;
   right: unset;
 }
+
 .bottom-touch-block {
   position: fixed;
   bottom: 0;

diff --git a/app/bibleview-js/src/composables/config.ts b/app/bibleview-js/src/composables/config.ts
@@ -16,10 +16,10 @@
  */
 
 
-import {computed, nextTick, reactive, Ref} from "vue";
+import {computed, nextTick, reactive, Ref, shallowRef, triggerRef} from "vue";
 import {emit, setupEventBusListener} from "@/eventbus";
 import {isEqual} from "lodash";
-import {Deferred} from "@/utils";
+import {Deferred, setupWindowEventListener} from "@/utils";
 import {BibleViewDocumentType} from "@/types/documents";
 
 export type StrongsMode = 0 | 1 | 2 | 3
@@ -206,15 +206,29 @@ export function useConfig(documentType: Ref<BibleViewDocumentType>) {
     const mmInPx = calcMmInPx();
 
     const isBible = computed(() => documentType.value === "bible");
+    const resizeTrigger = shallowRef();
+    setupWindowEventListener("resize", () => triggerRef(resizeTrigger));
 
     const calculatedConfig = computed(() => {
+        resizeTrigger.value;
         let topOffset = appSettings.topOffset;
         let topMargin = 0;
         if (isBible.value) {
             topMargin = config.topMargin * mmInPx;
             topOffset += topMargin;
         }
-        return {topOffset, topMargin};
+        const windowWidth = window.innerWidth;
+        const maxWidth = config.marginSize.maxWidth * mmInPx;
+        const leftPadding = config.marginSize.marginLeft * mmInPx;
+        const rightPadding = config.marginSize.marginRight * mmInPx;
+
+        const elementWidth = Math.min(maxWidth, windowWidth - leftPadding - rightPadding);
+        const margin = (windowWidth - elementWidth) / 2;
+
+        const marginLeft = margin + (leftPadding - rightPadding)/2;
+        const marginRight = margin + (rightPadding - leftPadding)/2;
+
+        return {topOffset, topMargin, marginLeft, marginRight};
     });
 
     window.bibleViewDebug.config = config;