From 402935604bf84142f0a2a2c6ffd15d032e835b19 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 30 Aug 2022 20:33:21 +0300
Subject: [PATCH] fix: move carousel under cover image

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/smartsheet/Gallery.vue         | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 61f749b4e2..9fcf9f2f78 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -123,7 +123,12 @@ openNewRecordFormHook?.on(async () => {
         <Row :row="record">
           <a-card hoverable class="!rounded-lg h-full overflow-hidden break-all" @click="expandFormClick($event, record)">
             <template #cover>
-              <a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay>
+              <a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay class="gallery-carousel">
+                <template #customPaging>
+                  <a>
+                    <div class="pt-[12px]"><div></div></div>
+                  </a>
+                </template>
                 <img
                   v-for="(attachment, index) in attachments(record).filter((attachment) => attachment.url)"
                   :key="`carousel-${record.row.id}-${index}`"
@@ -175,4 +180,30 @@ openNewRecordFormHook?.on(async () => {
   grid-auto-rows: 1fr;
   grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
 }
+:depp(.slick-dots li button) {
+  background-color: black;
+}
+.ant-carousel.gallery-carousel :deep(.slick-dots) {
+  position: relative;
+  height: auto;
+  bottom: 0px;
+}
+.ant-carousel.gallery-carousel :deep(.slick-dots li div > div) {
+  background: #000;
+  border: 0;
+  border-radius: 1px;
+  color: transparent;
+  cursor: pointer;
+  display: block;
+  font-size: 0;
+  height: 3px;
+  opacity: .3;
+  outline: none;
+  padding: 0;
+  transition: all .5s;
+  width: 100%;
+}
+.ant-carousel.gallery-carousel :deep(.slick-dots li.slick-active div > div) {
+  opacity: 1;
+}
 </style>