diff options
author | pacien | 2023-07-26 01:12:17 +0200 |
---|---|---|
committer | pacien | 2023-07-26 01:12:17 +0200 |
commit | 8951f65d116b020bc95ba509c1ecf69b24bec1f0 (patch) | |
tree | 07ec167ecb1589b74fd93418196256edad9a2f0d /viewer/src | |
parent | 46cd42de44e402fbf33522d999fa2649729ffaa8 (diff) | |
parent | f187b6f2653092d4034ec1561280d286f956c36e (diff) | |
download | ldgallery-8951f65d116b020bc95ba509c1ecf69b24bec1f0.tar.gz |
Diffstat (limited to 'viewer/src')
-rw-r--r-- | viewer/src/views/MainLayout.vue | 8 | ||||
-rw-r--r-- | viewer/src/views/item_handlers/PictureViewer.vue | 2 | ||||
-rw-r--r-- | viewer/src/views/item_handlers/PlainTextViewer.vue | 29 |
3 files changed, 17 insertions, 22 deletions
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue index 30bfe97..5cac863 100644 --- a/viewer/src/views/MainLayout.vue +++ b/viewer/src/views/MainLayout.vue | |||
@@ -128,6 +128,14 @@ function validateSpashScreen() { | |||
128 | left: var(--layout-left); | 128 | left: var(--layout-left); |
129 | z-index: 3; | 129 | z-index: 3; |
130 | overflow-x: hidden; | 130 | overflow-x: hidden; |
131 | |||
132 | // Forbid overflow when resizing. | ||
133 | // Necessary for the resize handle to be selectable on qutebrowser. | ||
134 | max-width: calc(100% - var(--layout-left) - $scrollbar-width); | ||
135 | margin: 0 auto; // Center | ||
136 | resize: horizontal; | ||
137 | // --- | ||
138 | |||
131 | &:focus { | 139 | &:focus { |
132 | outline: none; | 140 | outline: none; |
133 | } | 141 | } |
diff --git a/viewer/src/views/item_handlers/PictureViewer.vue b/viewer/src/views/item_handlers/PictureViewer.vue index 74b978f..d091f19 100644 --- a/viewer/src/views/item_handlers/PictureViewer.vue +++ b/viewer/src/views/item_handlers/PictureViewer.vue | |||
@@ -18,12 +18,14 @@ | |||
18 | --> | 18 | --> |
19 | 19 | ||
20 | <template> | 20 | <template> |
21 | <!-- @dragstart.prevent stops Drag 'n Drop of pictures on FireFox --> | ||
21 | <div | 22 | <div |
22 | ref="containerElement" | 23 | ref="containerElement" |
23 | v-dragscroll | 24 | v-dragscroll |
24 | class="scrollbar" | 25 | class="scrollbar" |
25 | :class="$style.pictureContainer" | 26 | :class="$style.pictureContainer" |
26 | @dblclick="uiStore.toggleFullscreen()" | 27 | @dblclick="uiStore.toggleFullscreen()" |
28 | @dragstart.prevent="false" | ||
27 | > | 29 | > |
28 | <img | 30 | <img |
29 | v-if="!error" | 31 | v-if="!error" |
diff --git a/viewer/src/views/item_handlers/PlainTextViewer.vue b/viewer/src/views/item_handlers/PlainTextViewer.vue index 2ab429a..96c4d4c 100644 --- a/viewer/src/views/item_handlers/PlainTextViewer.vue +++ b/viewer/src/views/item_handlers/PlainTextViewer.vue | |||
@@ -19,17 +19,12 @@ | |||
19 | --> | 19 | --> |
20 | 20 | ||
21 | <template> | 21 | <template> |
22 | <!-- Outer div necessary for the resize handle to appear on Firefox. --> | 22 | <pre |
23 | <div | 23 | v-if="isFinished" |
24 | :class="$style.content" | 24 | :class="$style.content" |
25 | class="fill" | 25 | v-text="data" |
26 | > | 26 | /> |
27 | <pre | 27 | <LdLoading v-else /> |
28 | v-if="isFinished" | ||
29 | v-text="data" | ||
30 | /> | ||
31 | <LdLoading v-else /> | ||
32 | </div> | ||
33 | </template> | 28 | </template> |
34 | 29 | ||
35 | <script setup lang="ts"> | 30 | <script setup lang="ts"> |
@@ -51,19 +46,9 @@ const { isFinished, data } = useFetch(itemResourceUrl).text(); | |||
51 | @import "~@/assets/scss/theme"; | 46 | @import "~@/assets/scss/theme"; |
52 | 47 | ||
53 | .content { | 48 | .content { |
54 | display: flex; | 49 | margin: 1em; |
55 | justify-content: center; | ||
56 | background: $viewer-text-background; | 50 | background: $viewer-text-background; |
57 | color: $viewer-text; | 51 | color: $viewer-text; |
58 | 52 | white-space: pre-wrap; | |
59 | > pre { | ||
60 | width: 100%; | ||
61 | max-width: 100%; // Forbid overflow when resizing. | ||
62 | margin: 1em; // Necessary for the resize handle to be selectable on qutebrowser. | ||
63 | border: none; | ||
64 | white-space: pre-wrap; | ||
65 | resize: horizontal; // Allow the user to adjust the width of the text view for easier column reading. | ||
66 | overflow: hidden; // Necessary for the resize handle to be shown in Chromium. | ||
67 | } | ||
68 | } | 53 | } |
69 | </style> | 54 | </style> |