viewer/css/global: factorise util classes

3 files changed, 13 insertions, 16 deletions

diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 5d2e6dc..f95a54d 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -36,6 +36,9 @@ button svg + span {
 .nowrap {
   white-space: nowrap;
 }
+.no-scroll {
+  overflow: hidden;
+}
 .no-scroll-x {
   overflow-x: hidden;
 }
@@ -51,6 +54,11 @@ button svg + span {
   align-items: center;
 }
 
+.fill {
+  width: 100%;
+  height: 100%;
+}
+
 /**
  * Class for containers that centers its content vertically and horizontally,
  * preferably sticking to the container start if the container is smaller than the content.
diff --git a/viewer/src/components/LdPdfViewer.vue b/viewer/src/components/LdPdfViewer.vue
index 78ff3d2..20055cc 100644
--- a/viewer/src/components/LdPdfViewer.vue
+++ b/viewer/src/components/LdPdfViewer.vue
@@ -20,9 +20,9 @@
 
 <template>
   <!-- intermediate container necessary to eliminate the double scrollbar -->
-  <div :class="$style.container">
+  <div class="fill no-scroll">
     <!-- prefer native browser PDF viewer if available -->
-    <object :class="$style.content" :data="itemResourceUrl()" type="application/pdf">
+    <object class="fill" :data="itemResourceUrl()" type="application/pdf">
       <!-- TODO: fallback to PDF.js (https://github.com/pacien/ldgallery/issues/212) -->
       <ld-download :item="pdfItem" />
     </object>
@@ -42,9 +42,5 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 </script>
 
 <style lang="scss" module>
-.container, .content {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
+
 </style>
diff --git a/viewer/src/components/LdPlainTextViewer.vue b/viewer/src/components/LdPlainTextViewer.vue
index 1dbd351..101fd4c 100644
--- a/viewer/src/components/LdPlainTextViewer.vue
+++ b/viewer/src/components/LdPlainTextViewer.vue
@@ -20,9 +20,9 @@
 
 <template>
   <!-- Outer div necessary for the resize handle to appear on Firefox. -->
-  <div :class="$style.content">
+  <div :class="$style.content" class="fill">
     <!-- Using an iframe here to let the browser deal with content encoding detection. -->
-    <iframe :src="itemResourceUrl()" />
+    <iframe class="fill" :src="itemResourceUrl()" />
   </div>
 </template>
 
@@ -41,8 +41,6 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 <style lang="scss" module>
 .content {
   margin: auto; // Old-school horizontal centering.
-  width: 100%;
-  height: 100%;
 
   // Allow the user to adjust the width of the text view for easier column reading.
   resize: horizontal;
@@ -52,10 +50,5 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 
   // Re-normalise page colour.
   background-color: white;
-
-  & > iframe {
-    width: 100%;
-    height: 100%;
-  }
 }
 </style>