viewer: implemented thumbnail size usage

2 files changed, 11 insertions, 14 deletions

diff --git a/viewer/src/assets/scss/global.scss b/viewer/src/assets/scss/global.scss
index 5de5946..1a5761e 100644
--- a/viewer/src/assets/scss/global.scss
+++ b/viewer/src/assets/scss/global.scss
@@ -97,6 +97,7 @@ img {
 // === Effect to apply on lazy-image loading
 
 img {
+  display: block;
   &.v-lazy-image {
     opacity: 0;
     transition: opacity 0.4s;
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 @@
 -->
 
 <template>
-  <div class="forcedsize" :class="{'preload': loading}">
+  <div :class="{'preload': loading}">
     <v-lazy-image
       v-if="item.thumbnail"
-      class="thumbnail"
       :src="pictureSrc()"
-      :title="item.path"
+      :style="pictureStyle()"
+      :title="item.title"
       @intersect="loading=true"
       @load="loading=false"
     />
@@ -45,7 +45,13 @@ export default class LdThumbnail extends Vue {
   loading: boolean = false;
 
   pictureSrc() {
-    if (this.item.thumbnail) return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail.resource}`;
+    const resource = this.item.thumbnail!.resource;
+    return `${process.env.VUE_APP_DATA_URL}${resource}`;
+  }
+
+  pictureStyle() {
+    const resolution = this.item.thumbnail!.resolution;
+    return { width: `${resolution.width}px`, height: `${resolution.height}px` };
   }
 
   getIcon() {
@@ -57,10 +63,6 @@ export default class LdThumbnail extends Vue {
 <style lang="scss">
 @import "@/assets/scss/theme.scss";
 
-.thumbnail {
-  max-width: 250px;
-  max-height: 250px;
-}
 .preload {
   animation: preloadAnimation 1s infinite ease-in-out alternate;
 }
@@ -72,10 +74,4 @@ export default class LdThumbnail extends Vue {
     background-color: $loader-color;
   }
 }
-// Temporary size until we get the true thumbnail size
-.forcedsize {
-  width: 250px;
-  height: 250px;
-  text-align: center;
-}
 </style>