aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorpacien2020-05-19 21:04:50 +0200
committerNotkea2020-05-22 01:02:18 +0200
commit037db071d42d4a7fdb8ed5cf88bc2c37fba4ae93 (patch)
tree926610765ed94d88f6f0642ec18e548c70808b44
parent226e0beb50061844470bd8a717a74307b975bd96 (diff)
downloadldgallery-037db071d42d4a7fdb8ed5cf88bc2c37fba4ae93.tar.gz
viewer/css/global: factorise util classes
-rw-r--r--viewer/src/assets/scss/global.scss8
-rw-r--r--viewer/src/components/LdPdfViewer.vue10
-rw-r--r--viewer/src/components/LdPlainTextViewer.vue11
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 {
36.nowrap { 36.nowrap {
37 white-space: nowrap; 37 white-space: nowrap;
38} 38}
39.no-scroll {
40 overflow: hidden;
41}
39.no-scroll-x { 42.no-scroll-x {
40 overflow-x: hidden; 43 overflow-x: hidden;
41} 44}
@@ -51,6 +54,11 @@ button svg + span {
51 align-items: center; 54 align-items: center;
52} 55}
53 56
57.fill {
58 width: 100%;
59 height: 100%;
60}
61
54/** 62/**
55 * Class for containers that centers its content vertically and horizontally, 63 * Class for containers that centers its content vertically and horizontally,
56 * preferably sticking to the container start if the container is smaller than the content. 64 * 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 @@
20 20
21<template> 21<template>
22 <!-- intermediate container necessary to eliminate the double scrollbar --> 22 <!-- intermediate container necessary to eliminate the double scrollbar -->
23 <div :class="$style.container"> 23 <div class="fill no-scroll">
24 <!-- prefer native browser PDF viewer if available --> 24 <!-- prefer native browser PDF viewer if available -->
25 <object :class="$style.content" :data="itemResourceUrl()" type="application/pdf"> 25 <object class="fill" :data="itemResourceUrl()" type="application/pdf">
26 <!-- TODO: fallback to PDF.js (https://github.com/pacien/ldgallery/issues/212) --> 26 <!-- TODO: fallback to PDF.js (https://github.com/pacien/ldgallery/issues/212) -->
27 <ld-download :item="pdfItem" /> 27 <ld-download :item="pdfItem" />
28 </object> 28 </object>
@@ -42,9 +42,5 @@ import { Component, Prop, Vue } from "vue-property-decorator";
42</script> 42</script>
43 43
44<style lang="scss" module> 44<style lang="scss" module>
45.container, .content { 45
46 width: 100%;
47 height: 100%;
48 overflow: hidden;
49}
50</style> 46</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 @@
20 20
21<template> 21<template>
22 <!-- Outer div necessary for the resize handle to appear on Firefox. --> 22 <!-- Outer div necessary for the resize handle to appear on Firefox. -->
23 <div :class="$style.content"> 23 <div :class="$style.content" class="fill">
24 <!-- Using an iframe here to let the browser deal with content encoding detection. --> 24 <!-- Using an iframe here to let the browser deal with content encoding detection. -->
25 <iframe :src="itemResourceUrl()" /> 25 <iframe class="fill" :src="itemResourceUrl()" />
26 </div> 26 </div>
27</template> 27</template>
28 28
@@ -41,8 +41,6 @@ import { Component, Prop, Vue } from "vue-property-decorator";
41<style lang="scss" module> 41<style lang="scss" module>
42.content { 42.content {
43 margin: auto; // Old-school horizontal centering. 43 margin: auto; // Old-school horizontal centering.
44 width: 100%;
45 height: 100%;
46 44
47 // Allow the user to adjust the width of the text view for easier column reading. 45 // Allow the user to adjust the width of the text view for easier column reading.
48 resize: horizontal; 46 resize: horizontal;
@@ -52,10 +50,5 @@ import { Component, Prop, Vue } from "vue-property-decorator";
52 50
53 // Re-normalise page colour. 51 // Re-normalise page colour.
54 background-color: white; 52 background-color: white;
55
56 & > iframe {
57 width: 100%;
58 height: 100%;
59 }
60} 53}
61</style> 54</style>