github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix: carousel style

pull/6416/head
DarkPhoenix2704 1 year ago
parent
3c6636f100
commit
34c390ffea
1 changed files with 16 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      packages/nc-gui/components/smartsheet/Gallery.vue

29
packages/nc-gui/components/smartsheet/Gallery.vue
Unescape View File

@ -75,9 +75,7 @@ const fieldsWithoutCover = computed(() =>
fields.value.filter((f) => f.id !== galleryData.value?.fk_cover_image_col_id && !isPrimary(f)), fields.value.filter((f) => f.id !== galleryData.value?.fk_cover_image_col_id && !isPrimary(f)),
) )
const displayField = computed(() => const displayField = computed(() => meta.value?.columns?.find((c) => c.pv) ?? null)
meta.value?.columns?.find((c) => c.pv) ?? meta.value?.columns ? meta.value?.columns[0] : null,
)
const coverImageColumn: any = computed(() => const coverImageColumn: any = computed(() =>
meta.value?.columnsById meta.value?.columnsById
@ -261,7 +259,7 @@ watch(
@contextmenu="showContextMenu($event, { row: rowIndex })" @contextmenu="showContextMenu($event, { row: rowIndex })"
> >
<template v-if="galleryData?.fk_cover_image_col_id" #cover> <template v-if="galleryData?.fk_cover_image_col_id" #cover>
<a-carousel v-if="!reloadAttachments && attachments(record).length" autoplay class="gallery-carousel" arrows> <a-carousel v-if="!reloadAttachments && attachments(record).length" class="gallery-carousel" arrows>
<template #customPaging> <template #customPaging>
<a> <a>
<div class="pt-[12px]"> <div class="pt-[12px]">
@ -273,7 +271,7 @@ watch(
<template #prevArrow> <template #prevArrow>
<div style="z-index: 1"> <div style="z-index: 1">
<MdiChevronLeft <MdiChevronLeft
class="text-gray-700 w-6 h-6 absolute left-1.5 bottom-[-90px] !hidden !group-hover:block !bg-white border-1 border-gray-200 rounded-sm" class="text-gray-700 w-6 h-6 absolute left-1.5 bottom-[-90px] !opacity-0 !group-hover:opacity-100 !bg-white border-1 border-gray-200 rounded-md transition"
/> />
</div> </div>
</template> </template>
@ -281,7 +279,7 @@ watch(
<template #nextArrow> <template #nextArrow>
<div style="z-index: 1"> <div style="z-index: 1">
<MdiChevronRight <MdiChevronRight
class="text-gray-700 w-6 h-6 absolute right-1.5 bottom-[-90px] !hidden !group-hover:block !bg-white border-1 border-gray-200 rounded-sm" class="text-gray-700 w-6 h-6 absolute right-1.5 bottom-[-90px] !opacity-0 !group-hover:opacity-100 !bg-white border-1 border-gray-200 rounded-md transition"
/> />
</div> </div>
</template> </template>
@ -321,10 +319,10 @@ watch(
<div v-for="col in fieldsWithoutCover" :key="`record-${record.row.id}-${col.id}`"> <div v-for="col in fieldsWithoutCover" :key="`record-${record.row.id}-${col.id}`">
<div <div
v-if="!isRowEmpty(record, col) || isLTAR(col.uidt, col.colOptions)" v-if="!isRowEmpty(record, col) || isLTAR(col.uidt, col.colOptions)"
class="flex flex-col space-y-1 ml-[-4px] rounded-lg w-full" class="flex flex-col ml-[-4px] rounded-lg w-full"
> >
<div class="flex flex-row w-full justify-start scale-75"> <div class="flex flex-row w-full justify-start scale-75">
<div class="w-full text-gray-300"> <div class="w-full pb-1 text-gray-300">
<LazySmartsheetHeaderVirtualCell <LazySmartsheetHeaderVirtualCell
v-if="isVirtualCol(col)" v-if="isVirtualCol(col)"
:column="col" :column="col"
@ -336,7 +334,7 @@ watch(
</div> </div>
</div> </div>
<div class="flex flex-row w-full pb-3 text-gray-700 pl-1 items-center justify-start"> <div class="flex flex-row w-full pb-2 text-gray-700 pl-1 items-center justify-start">
<LazySmartsheetVirtualCell <LazySmartsheetVirtualCell
v-if="isVirtualCol(col)" v-if="isVirtualCol(col)"
v-model="record.row[col.title]" v-model="record.row[col.title]"
@ -392,7 +390,7 @@ watch(
<style scoped> <style scoped>
.nc-gallery-container { .nc-gallery-container {
grid-auto-rows: 1fr; grid-auto-rows: 1fr;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
} }
.ant-card-body { .ant-card-body {
@ -404,31 +402,36 @@ watch(
} }
.ant-carousel.gallery-carousel :deep(.slick-dots) { .ant-carousel.gallery-carousel :deep(.slick-dots) {
@apply !w-auto;
position: absolute; position: absolute;
height: auto; height: auto;
bottom: 3; bottom: 3;
} }
.ant-carousel.gallery-carousel :deep(.slick-dots li div > div) { .ant-carousel.gallery-carousel :deep(.slick-dots li div > div) {
@apply rounded-full;
background: #d9d9d9; background: #d9d9d9;
border: 0; border: 0;
border-radius: 1px;
color: transparent; color: transparent;
cursor: pointer; cursor: pointer;
display: block; display: block;
font-size: 0; font-size: 0;
height: 3px; height: 8px;
opacity: 1; opacity: 1;
outline: none; outline: none;
padding: 0; padding: 0;
transition: all 0.5s; transition: all 0.5s;
width: 100%; width: 8px;
} }
.ant-carousel.gallery-carousel :deep(.slick-dots li.slick-active div > div) { .ant-carousel.gallery-carousel :deep(.slick-dots li.slick-active div > div) {
@apply bg-brand-500;
opacity: 1; opacity: 1;
} }
.ant-carousel.gallery-carousel :deep(.slick-dots li) {
@apply !w-auto;
}
.ant-carousel.gallery-carousel :deep(.slick-prev) { .ant-carousel.gallery-carousel :deep(.slick-prev) {
left: 0; left: 0;
} }

Write Preview
Loading…
Cancel
Save