From 78ac1b8159dc6f348b943055a21fd03cc53809da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 23 Oct 2023 12:26:04 +0300
Subject: [PATCH] Galleria responsive updates

---
 doc/galleria/ResponsiveDoc.vue | 44 +++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/doc/galleria/ResponsiveDoc.vue b/doc/galleria/ResponsiveDoc.vue
index 6059c6aeb..4bb65d5c6 100644
--- a/doc/galleria/ResponsiveDoc.vue
+++ b/doc/galleria/ResponsiveDoc.vue
@@ -2,17 +2,17 @@
     <DocSectionText v-bind="$attrs">
         <p>Galleria responsiveness is defined with the <i>responsiveOptions</i> property.</p>
     </DocSectionText>
-    <div class="card md:flex md:justify-content-center">
-        <div>
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-                <template #thumbnail="slotProps">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-                </template>
-            </Galleria>
-        </div>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <div class="grid grid-nogutter justify-content-center">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </div>
+            </template>
+        </Galleria>
     </div>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
@@ -40,24 +40,28 @@ export default {
             ],
             code: {
                 basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
     <template #thumbnail="slotProps">
-        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+        <div class="grid grid-nogutter justify-content-center">
+            <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+        </div>
     </template>
 </Galleria>
 `,
                 options: `
 <template>
-    <div class="card md:flex md:justify-content-center">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
             <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                <div class="grid grid-nogutter justify-content-center">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </div>
             </template>
         </Galleria>
     </div>
@@ -94,13 +98,15 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card md:flex md:justify-content-center">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
             <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                <div class="grid grid-nogutter justify-content-center">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </div>
             </template>
         </Galleria>
     </div>