Update Pdf.vue

n1crack · Jun 30, 2024 · e1fb730 · e1fb730
1 parent ab95fdc
commit e1fb730
Showing 1 changed file with 24 additions and 13 deletions.
diff --git a/src/components/previews/Pdf.vue b/src/components/previews/Pdf.vue
@@ -1,24 +1,35 @@
 <template>
-  <h3 class="mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400" id="modal-title"
-         :title="app.modal.data.item.path">{{ app.modal.data.item.basename }}</h3>
-  <div>
-    <object class="h-[60vh]" :data="getPDFUrl()" type="application/pdf" width="100%" height="100%">
-      <iframe
-          class="border-0"
-          :src="getPDFUrl()"
-          width="100%"
-          height="100%"
-        >
+  <div class="vuefinder__pdf-preview">
+    <h3 class="vuefinder__pdf-preview__title" id="modal-title" :title="app.modal.data.item.path">
+      {{ app.modal.data.item.basename }}
+    </h3>
+    <div>
+      <object class="vuefinder__pdf-preview__object" :data="getPDFUrl()" type="application/pdf" width="100%" height="100%">
+        <iframe class="vuefinder__pdf-preview__iframe" :src="getPDFUrl()" width="100%" height="100%">
           <p>
             Your browser does not support PDFs.
-            <a href="https://example.com/test.pdf">Download the PDF</a>
-            .
+            <a href="https://example.com/test.pdf">Download the PDF</a>.
           </p>
         </iframe>
-    </object>
+      </object>
+    </div>
   </div>
 </template>
 
+<style>
+.vuefinder__pdf-preview__title {
+  @apply mb-2 text-lg leading-6 font-medium text-gray-900 dark:text-gray-400;
+}
+
+.vuefinder .vuefinder__pdf-preview__object {
+  @apply h-[60vh];
+}
+
+.vuefinder .vuefinder__pdf-preview__iframe {
+  @apply border-0;
+}
+</style>
+
 <script setup>
 
 import {inject,onMounted} from 'vue';