Fix embed-pdf short code not rendering pdf file (#844)

Signed-off-by: hossainemruz <[email protected]>
hugo-toha · Dec 8, 2023 · d5fb8e5 · d5fb8e5
1 parent bb9fec2
commit d5fb8e5
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/assets/scripts/features/embedpdf/index.js b/assets/scripts/features/embedpdf/index.js
@@ -38,7 +38,7 @@ class PDFViewer {
     this.loadingWrapper = el.getElementsByClassName('loading-wrapper')[0]
     this.next = el.getElementsByClassName('next')[0]
     this.prev = el.getElementsByClassName('prev')[0]
-    this.pageNum = el.getElementsByClassName('page-num')[0]
+    this.curPage = el.getElementsByClassName('page-num')[0]
     this.pageCount = el.getElementsByClassName('page-count')[0]
 
     // context
@@ -121,7 +121,7 @@ class PDFViewer {
       this.pageNumPending = null
     }
     // Update page counters
-    this.pageNum.textContent = num
+    this.curPage.textContent = num
   }
 
   /**

diff --git a/assets/styles/sections/pdf-viewer.scss b/assets/styles/sections/pdf-viewer.scss
@@ -8,9 +8,16 @@
   }
 
   .paginator {
-    display: none;
+    display: flex!important;
+    width: 100% !important;
     text-align: center;
-    margin-bottom: 10px;
+    margin-bottom: 0.2rem !important;
+    justify-content: space-between;
+
+    .page-number-indicator {
+      margin-left: auto;
+      margin-right: auto;
+    }
   }
 
   .loading-wrapper {

diff --git a/layouts/shortcodes/embed-pdf.html b/layouts/shortcodes/embed-pdf.html
@@ -11,9 +11,13 @@
   data-page-num="{{ $pageNum }}"
 >
   <div class="paginator">
-    <button class="prev">Previous</button>
-    <button class="next">Next</button>
-    <span>Page: <span class="page-num"></span> / <span class="page-count"></span></span>
+    <div class="page-number-indicator">
+      <span>Page: <span class="page-num"></span> / <span class="page-count"></span></span>
+    </div>
+    <div class="next-prev-btn">
+      <button class="prev btn btn-sm btn-info">Previous</button>
+      <button class="next btn btn-sm btn-info">Next</button>
+    </div>
   </div>
 
   <div class="embed-pdf-container">