aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZero~Informatique2020-02-02 19:29:12 +0100
committerZero~Informatique2020-02-02 19:29:12 +0100
commit73e2dc5b39a5cd12c52b99ee076c1a1ad86a2ace (patch)
treeeb664b38fefc4a8088ae5c10366f52542e021ff5
parentdb8ebac1fa405bbee7da15d45c7ba6cd736bfa02 (diff)
downloadldgallery-73e2dc5b39a5cd12c52b99ee076c1a1ad86a2ace.tar.gz
viewer: implemented thumbnail size usage
-rw-r--r--viewer/src/assets/scss/global.scss1
-rw-r--r--viewer/src/components/LdThumbnail.vue24
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 {
97// === Effect to apply on lazy-image loading 97// === Effect to apply on lazy-image loading
98 98
99img { 99img {
100 display: block;
100 &.v-lazy-image { 101 &.v-lazy-image {
101 opacity: 0; 102 opacity: 0;
102 transition: opacity 0.4s; 103 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 @@
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>