From 3efe61c605e7f98c300462956b0fddd6709f764a Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 3 Jun 2024 12:41:47 +0300
Subject: [PATCH] Galleria thumbnail demo fixes

---
 doc/galleria/AdvancedDoc.vue  | 8 ++++----
 doc/galleria/ThumbnailDoc.vue | 8 ++++----
 pages/galleria/index.vue      | 5 +++--
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/doc/galleria/AdvancedDoc.vue b/doc/galleria/AdvancedDoc.vue
index 588d22453..49331bb28 100644
--- a/doc/galleria/AdvancedDoc.vue
+++ b/doc/galleria/AdvancedDoc.vue
@@ -31,7 +31,7 @@
                     <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
                 </template>
                 <template #thumbnail="slotProps">
-                    <div class="grid grid-cols-12 gap-4 justify-center">
+                    <div class="grid gap-4 justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </div>
                 </template>
@@ -105,7 +105,7 @@ export default {
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
     </template>
     <template #thumbnail="slotProps">
-        <div class="grid grid-cols-12 gap-4 justify-center">
+        <div class="grid gap-4 justify-center">
             <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
         </div>
     </template>
@@ -154,7 +154,7 @@ export default {
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
             </template>
             <template #thumbnail="slotProps">
-                <div class="grid grid-cols-12 gap-4 justify-center">
+                <div class="grid gap-4 justify-center">
                     <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                 </div>
             </template>
@@ -300,7 +300,7 @@ export default {
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
             </template>
             <template #thumbnail="slotProps">
-                <div class="grid grid-cols-12 gap-4 justify-center">
+                <div class="grid gap-4 justify-center">
                     <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                 </div>
             </template>
diff --git a/doc/galleria/ThumbnailDoc.vue b/doc/galleria/ThumbnailDoc.vue
index 139d19a8e..0dd8d74b0 100644
--- a/doc/galleria/ThumbnailDoc.vue
+++ b/doc/galleria/ThumbnailDoc.vue
@@ -15,7 +15,7 @@
                     <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                 </template>
                 <template #thumbnail="slotProps">
-                    <div class="grid grid-cols-12 gap-4 justify-center">
+                    <div class="grid gap-4 justify-center">
                         <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </div>
                 </template>
@@ -68,7 +68,7 @@ export default {
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
     <template #thumbnail="slotProps">
-        <div class="grid grid-cols-12 gap-4 justify-center">
+        <div class="grid gap-4 justify-center">
             <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
         </div>
     </template>
@@ -88,7 +88,7 @@ export default {
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
             <template #thumbnail="slotProps">
-                <div class="grid grid-cols-12 gap-4 justify-center">
+                <div class="grid gap-4 justify-center">
                     <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                 </div>
             </template>
@@ -154,7 +154,7 @@ export default {
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
             <template #thumbnail="slotProps">
-                <div class="grid grid-cols-12 gap-4 justify-center">
+                <div class="grid gap-4 justify-center">
                     <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                 </div>
             </template>
diff --git a/pages/galleria/index.vue b/pages/galleria/index.vue
index 74e242be8..f0d34cf07 100755
--- a/pages/galleria/index.vue
+++ b/pages/galleria/index.vue
@@ -10,6 +10,7 @@ import BasicDoc from '@/doc/galleria/BasicDoc.vue';
 import CaptionDoc from '@/doc/galleria/CaptionDoc.vue';
 import ControlledDoc from '@/doc/galleria/ControlledDoc.vue';
 import ImportDoc from '@/doc/galleria/ImportDoc.vue';
+import ThumbnailDoc from '@/doc/galleria/ThumbnailDoc.vue';
 import ResponsiveDoc from '@/doc/galleria/ResponsiveDoc.vue';
 import CustomContentDoc from '@/doc/galleria/fullscreen/CustomContentDoc.vue';
 import WithThumbnailsDoc from '@/doc/galleria/fullscreen/WithThumbnailsDoc.vue';
@@ -70,12 +71,12 @@ export default {
                             component: TemplateDoc
                         }
                     ]
-                } /*,
+                },
                 {
                     id: 'thumbnail',
                     label: 'Thumbnail',
                     component: ThumbnailDoc
-                },*/,
+                },
                 {
                     id: 'responsive',
                     label: 'Responsive',