aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/views')
-rw-r--r--viewer/src/views/GalleryDirectory.vue15
-rw-r--r--viewer/src/views/GallerySearch.vue5
-rw-r--r--viewer/src/views/GalleryThumbnail.vue34
-rw-r--r--viewer/src/views/MainLayout.vue3
4 files changed, 46 insertions, 11 deletions
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
index eb98595..1df0c4d 100644
--- a/viewer/src/views/GalleryDirectory.vue
+++ b/viewer/src/views/GalleryDirectory.vue
@@ -18,13 +18,14 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div> 21 <div class="thumbnail-tiles">
22 <div class="flex"> 22 <div v-for="(item) in directory.properties.items" :key="item.path">
23 <div v-for="(item) in directory.properties.items" :key="item.path"> 23 <router-link :to="item.path">
24 <router-link :to="item.path"> 24 <gallery-thumbnail :item="item" />
25 <gallery-thumbnail :item="item" /> 25 </router-link>
26 </router-link> 26 </div>
27 </div> 27 <div>
28 <!-- Empty item for better flex layout -->
28 </div> 29 </div>
29 </div> 30 </div>
30</template> 31</template>
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue
index 7e61f89..870d3e2 100644
--- a/viewer/src/views/GallerySearch.vue
+++ b/viewer/src/views/GallerySearch.vue
@@ -18,13 +18,16 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div class="flex"> 21 <div class="thumbnail-tiles">
22 <div v-for="(item) in items" :key="item.path"> 22 <div v-for="(item) in items" :key="item.path">
23 <router-link :to="item.path" @click.native="$uiStore.setModeNavigation()"> 23 <router-link :to="item.path" @click.native="$uiStore.setModeNavigation()">
24 <gallery-thumbnail :item="item" /> 24 <gallery-thumbnail :item="item" />
25 </router-link> 25 </router-link>
26 </div> 26 </div>
27 <div v-if="items.length===0">{{$t('search.no-results')}}</div> 27 <div v-if="items.length===0">{{$t('search.no-results')}}</div>
28 <div>
29 <!-- Empty item for better flex layout -->
30 </div>
28 </div> 31 </div>
29</template> 32</template>
30 33
diff --git a/viewer/src/views/GalleryThumbnail.vue b/viewer/src/views/GalleryThumbnail.vue
index 4d8f604..7ceea4f 100644
--- a/viewer/src/views/GalleryThumbnail.vue
+++ b/viewer/src/views/GalleryThumbnail.vue
@@ -18,8 +18,15 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div> 21 <div class="forcedsize" :class="{preload: loading}">
22 <img v-if="item.thumbnail" class="thumbnail" :src="pictureSrc" :title="item.path" /> 22 <v-lazy-image
23 v-if="item.thumbnail"
24 class="thumbnail"
25 :src="pictureSrc"
26 :title="item.path"
27 @intersect="loading=true"
28 @load="loading=false"
29 />
23 <div v-else class="flex-column flex-center"> 30 <div v-else class="flex-column flex-center">
24 <fa-icon icon="folder" class="fa-4x" /> 31 <fa-icon icon="folder" class="fa-4x" />
25 {{item.path}} 32 {{item.path}}
@@ -34,6 +41,8 @@ import { Component, Vue, Prop } from "vue-property-decorator";
34export default class GalleryThumbnail extends Vue { 41export default class GalleryThumbnail extends Vue {
35 @Prop({ required: true }) readonly item!: Gallery.Item; 42 @Prop({ required: true }) readonly item!: Gallery.Item;
36 43
44 loading: boolean = false;
45
37 get pictureSrc() { 46 get pictureSrc() {
38 return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`; 47 return `${process.env.VUE_APP_DATA_URL}${this.item.thumbnail}`;
39 } 48 }
@@ -41,8 +50,29 @@ export default class GalleryThumbnail extends Vue {
41</script> 50</script>
42 51
43<style lang="scss"> 52<style lang="scss">
53@import "@/assets/scss/theme.scss";
54
44.thumbnail { 55.thumbnail {
45 max-width: 250px; 56 max-width: 250px;
46 max-height: 250px; 57 max-height: 250px;
47} 58}
59.preload {
60 background: linear-gradient(to right, rgba(0, 0, 0, 0) 8%, $loader-color 18%, rgba(0, 0, 0, 0) 33%);
61 background-size: 200% 50px;
62 animation: preloadAnimation 2s infinite linear;
63}
64@keyframes preloadAnimation {
65 from {
66 background-position: -200px 0;
67 }
68 to {
69 background-position: 200px 0;
70 }
71}
72// Temporary size until we get the true thumbnail size
73.forcedsize {
74 width: 250px;
75 height: 250px;
76 text-align: center;
77}
48</style> 78</style>
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 5308205..de6f8af 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -21,7 +21,7 @@
21 <div :class="{fullscreen: $uiStore.fullscreen}"> 21 <div :class="{fullscreen: $uiStore.fullscreen}">
22 <panel-top class="layout layout-top" /> 22 <panel-top class="layout layout-top" />
23 <panel-left class="layout layout-left" /> 23 <panel-left class="layout layout-left" />
24 <router-view class="layout layout-content" /> 24 <router-view class="layout layout-content scrollbar" />
25 <ld-button-fullscreen /> 25 <ld-button-fullscreen />
26 <b-loading :active="isLoading" is-full-page /> 26 <b-loading :active="isLoading" is-full-page />
27 </div> 27 </div>
@@ -93,6 +93,7 @@ html {
93 top: var(--layout-top); 93 top: var(--layout-top);
94 left: var(--layout-left); 94 left: var(--layout-left);
95 z-index: 3; 95 z-index: 3;
96 overflow-x: hidden;
96 } 97 }
97} 98}
98.fullscreen { 99.fullscreen {