From c2b4c5d144db17ebf2dc9de32ba25cc836831ae2 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 21 Dec 2019 21:15:59 +0100
Subject: viewer: Improved the Gallery type definitions. Basic display of the
 images and thumbnails example: "thumbnails" instead of "thumbs"

---
 viewer/src/views/GalleryDirectory.vue | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

(limited to 'viewer/src/views/GalleryDirectory.vue')

diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue
index bed1664..1dda027 100644
--- a/viewer/src/views/GalleryDirectory.vue
+++ b/viewer/src/views/GalleryDirectory.vue
@@ -1,20 +1,30 @@
 <template>
   <div>
     <strong>Directory: {{directory.path}}</strong>
-    <div v-for="(item, index) in directory.properties.items" :key="item.path">
-      <router-link :to="item.path">Thumbnail: {{index}}-{{item.path}}</router-link>
+    <div class="flex-thumbnails">
+      <div v-for="(item) in directory.properties.items" :key="item.path">
+        <router-link :to="item.path">
+          <gallery-thumbnail :item="item" />
+        </router-link>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
+import GalleryThumbnail from "./GalleryThumbnail.vue";
 
-@Component
+@Component({
+  components: { GalleryThumbnail },
+})
 export default class GalleryDirectory extends Vue {
-  @Prop({ type: Array, required: true }) readonly directory!: Gallery.Directory;
+  @Prop({ required: true }) readonly directory!: Gallery.Directory;
 }
 </script>
 
 <style lang="scss">
+.flex-thumbnails {
+  display: flex;
+}
 </style>
-- 
cgit v1.2.3