More spacing on larger screens and add button group

directus · Jan 14, 2025 · db76c10 · db76c10
1 parent e9e8c98
commit db76c10
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 28 deletions.
diff --git a/components/Block/Carousel/Carousel.vue b/components/Block/Carousel/Carousel.vue
@@ -104,6 +104,8 @@ onMounted(async () => {
 		&.slide--selected > * {
 			opacity: 1;
 			transform: scale(1.2);
+			margin-left: var(--space-4);
+			margin-right: var(--space-4);
 		}
 	}
 	&__controls {
@@ -133,4 +135,17 @@ onMounted(async () => {
 		}
 	}
 }
+
+@media (min-width: 1200px) {
+	.embla__slide {
+		padding-left: calc(var(--slide-spacing) + 20px);
+	}
+
+	.embla__slide.slide--selected {
+		> * {
+			margin-left: var(--space-8);
+			margin-right: var(--space-8);
+		}
+	}
+}
 </style>
diff --git a/components/Block/Carousel/CarouselCard.vue b/components/Block/Carousel/CarouselCard.vue
@@ -19,28 +19,13 @@ const { data: cardData } = useAsyncData(`carousel-card-${props.uuid}`, () =>
 				'external_url',
 				'button_text',
 				'description',
+				{ block_button_group: ['id', 'alignment'] },
 				{ page: ['permalink'] },
 				{ resource: ['slug'] },
 			],
 		}),
 	),
 );
-
-const buttonHref = computed(() => {
-	if (cardData.value?.external_url) {
-		return cardData.value.external_url;
-	}
-
-	if (cardData.value?.page?.permalink) {
-		return cardData.value.page.permalink;
-	}
-
-	if (cardData.value?.resource?.slug) {
-		return `/resource/${cardData.value.resource.slug}`;
-	}
-
-	return '#';
-});
 </script>
 
 <template>
@@ -50,16 +35,11 @@ const buttonHref = computed(() => {
 			<div v-show="props.isFocused" class="card-content">
 				<h2 class="title">{{ cardData?.title }}</h2>
 				<p v-if="cardData?.description" class="description">{{ cardData?.description }}</p>
-				<BaseButton
-					v-show="props.isFocused"
-					:href="buttonHref"
-					:label="cardData?.button_text"
-					color="secondary"
-					outline
-					class="custom-button"
-					size="medium"
-					icon="arrow_forward"
-					icon-position="right"
+				<BlockButtonGroup
+					v-if="cardData?.block_button_group"
+					class="custom-button-group"
+					:uuid="cardData?.block_button_group.id as string"
+					:align="cardData.block_button_group.alignment"
 				/>
 			</div>
 		</Transition>
@@ -103,8 +83,18 @@ const buttonHref = computed(() => {
 			max-width: 80%;
 		}
 	}
-	.custom-button {
-		margin-top: var(--space-3);
+	.custom-button-group {
+		display: flex;
+		flex-wrap: nowrap !important;
+		justify-content: center;
+		align-items: center;
+		gap: var(--space-4);
+	}
+	.custom-button-group :deep(.button-group) {
+		display: flex;
+		flex-wrap: nowrap !important;
+		justify-content: center;
+		align-items: center;
 	}
 }
 .fade-enter-active,

diff --git a/types/schema/blocks/block-carousel-cards.ts b/types/schema/blocks/block-carousel-cards.ts
@@ -1,6 +1,7 @@
 import type { Resource } from '../content';
 import type { Page } from '../routes';
 import type { File } from '../system';
+import type { BlockButtonGroup } from './block-button-group';
 
 export interface BlockCarouselCards {
 	id: string;
@@ -12,4 +13,5 @@ export interface BlockCarouselCards {
 	page?: string | Page | null;
 	resource?: string | Resource | null;
 	button_text?: string;
+	block_button_group?: string | BlockButtonGroup | null;
 }