diff options
Diffstat (limited to 'viewer/src/components/LdGallery.vue')
-rw-r--r-- | viewer/src/components/LdGallery.vue | 16 |
1 files changed, 9 insertions, 7 deletions
diff --git a/viewer/src/components/LdGallery.vue b/viewer/src/components/LdGallery.vue index 29c18b9..edd479c 100644 --- a/viewer/src/components/LdGallery.vue +++ b/viewer/src/components/LdGallery.vue | |||
@@ -18,11 +18,11 @@ | |||
18 | --> | 18 | --> |
19 | 19 | ||
20 | <template> | 20 | <template> |
21 | <div class="thumbnail-tiles"> | 21 | <ld-error v-if="hasNoResults" icon="search" :message="noresult" /> |
22 | <router-link v-for="item in items" :key="item.path" :to="item.path"> | 22 | <div v-else class="thumbnail-tiles"> |
23 | <router-link v-for="item in sortedItems" :key="item.path" :to="item.path"> | ||
23 | <ld-thumbnail :item="item" /> | 24 | <ld-thumbnail :item="item" /> |
24 | </router-link> | 25 | </router-link> |
25 | <div v-if="hasNoResults()" class="noresult">{{noresult}}</div> | ||
26 | </div> | 26 | </div> |
27 | </template> | 27 | </template> |
28 | 28 | ||
@@ -35,7 +35,11 @@ export default class LdPicture extends Vue { | |||
35 | @Prop({ type: Array, required: true }) readonly items!: Gallery.Item[]; | 35 | @Prop({ type: Array, required: true }) readonly items!: Gallery.Item[]; |
36 | @Prop(String) readonly noresult?: string; | 36 | @Prop(String) readonly noresult?: string; |
37 | 37 | ||
38 | hasNoResults(): boolean { | 38 | get sortedItems() { |
39 | return this.items.sort(this.$uiStore.sort.fn); | ||
40 | } | ||
41 | |||
42 | get hasNoResults(): boolean { | ||
39 | return Boolean(this.noresult) && this.items.length === 0; | 43 | return Boolean(this.noresult) && this.items.length === 0; |
40 | } | 44 | } |
41 | } | 45 | } |
@@ -47,11 +51,9 @@ export default class LdPicture extends Vue { | |||
47 | flex-wrap: wrap; | 51 | flex-wrap: wrap; |
48 | align-items: center; | 52 | align-items: center; |
49 | justify-content: space-evenly; | 53 | justify-content: space-evenly; |
54 | |||
50 | & > a { | 55 | & > a { |
51 | margin: 2px; | 56 | margin: 2px; |
52 | } | 57 | } |
53 | & .noresult { | ||
54 | margin-top: 40px; | ||
55 | } | ||
56 | } | 58 | } |
57 | </style> | 59 | </style> |