diff options
Diffstat (limited to 'viewer/src/components')
-rw-r--r-- | viewer/src/components/LdThumbnail.vue | 24 |
1 files changed, 10 insertions, 14 deletions
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue index d9343dd..d5c0b3c 100644 --- a/viewer/src/components/LdThumbnail.vue +++ b/viewer/src/components/LdThumbnail.vue | |||
@@ -18,12 +18,12 @@ | |||
18 | --> | 18 | --> |
19 | 19 | ||
20 | <template> | 20 | <template> |
21 | <div class="forcedsize" :class="{'preload': loading}"> | 21 | <div :class="{'preload': loading}"> |
22 | <v-lazy-image | 22 | <v-lazy-image |
23 | v-if="item.thumbnail" | 23 | v-if="item.thumbnail" |
24 | class="thumbnail" | ||
25 | :src="pictureSrc()" | 24 | :src="pictureSrc()" |
26 | :title="item.path" | 25 | :style="pictureStyle()" |
26 | :title="item.title" | ||
27 | @intersect="loading=true" | 27 | @intersect="loading=true" |
28 | @load="loading=false" | 28 | @load="loading=false" |
29 | /> | 29 | /> |
@@ -45,7 +45,13 @@ export default class LdThumbnail extends Vue { | |||
45 | loading: boolean = false; | 45 | loading: boolean = false; |
46 | 46 | ||
47 | pictureSrc() { | 47 | pictureSrc() { |
48 | if (this.item.thumbnail) return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail.resource}`; | 48 | const resource = this.item.thumbnail!.resource; |
49 | return `${process.env.VUE_APP_DATA_URL}${resource}`; | ||
50 | } | ||
51 | |||
52 | pictureStyle() { | ||
53 | const resolution = this.item.thumbnail!.resolution; | ||
54 | return { width: `${resolution.width}px`, height: `${resolution.height}px` }; | ||
49 | } | 55 | } |
50 | 56 | ||
51 | getIcon() { | 57 | getIcon() { |
@@ -57,10 +63,6 @@ export default class LdThumbnail extends Vue { | |||
57 | <style lang="scss"> | 63 | <style lang="scss"> |
58 | @import "@/assets/scss/theme.scss"; | 64 | @import "@/assets/scss/theme.scss"; |
59 | 65 | ||
60 | .thumbnail { | ||
61 | max-width: 250px; | ||
62 | max-height: 250px; | ||
63 | } | ||
64 | .preload { | 66 | .preload { |
65 | animation: preloadAnimation 1s infinite ease-in-out alternate; | 67 | animation: preloadAnimation 1s infinite ease-in-out alternate; |
66 | } | 68 | } |
@@ -72,10 +74,4 @@ export default class LdThumbnail extends Vue { | |||
72 | background-color: $loader-color; | 74 | background-color: $loader-color; |
73 | } | 75 | } |
74 | } | 76 | } |
75 | // Temporary size until we get the true thumbnail size | ||
76 | .forcedsize { | ||
77 | width: 250px; | ||
78 | height: 250px; | ||
79 | text-align: center; | ||
80 | } | ||
81 | </style> | 77 | </style> |